0.前期的准备工作，首先是一个微信号（建议是公司的，不要个人，否则后期开发过程中需要频繁的扫码，个人的话就麻烦了），需要一个公众号（没有也可以），需要微信的公众平台上申请开通小程序（如果没有公众号的话可以直接在上面注册），还需要一个不是公众号的邮箱的邮箱，绑定为小程序的登录邮箱。申请的时候有个体小程序和企业的两种，这两种的区别就是申请企业的小程序就对了。申请完成之后要进行微信认证，这时候需要企业法人身份等信息。还需要一个服务器，要有域名，因为微信不允许在线上的版本上调用服务器的ip地址。（还有就是钱不能少，在申请企业的小程序和微信的认证的时候，需要交钱和对公账号打款）
官方的注册流程链接：http://kf.qq.com/faq/170109iQBJ3Q170109JbQfiu.html
1.关于页面加载
生命周期函数
- onLoad: 页面加载
- 一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。（页面第一次打开的时候调用一次，当点击返回按钮到达这个页面的时候是不执行里面的函数的）
- onShow: 页面显示
- 每次打开页面都会调用一次。（点击返回以后，返回到当前的页面中，也会执行onShow当中的内容）
- onReady: 页面初次渲染完成
- 一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
- 对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期
- onHide: 页面隐藏
- 当navigateTo或底部tab切换时调用。
- onUnload: 页面卸载
- 当redirectTo或navigateBack的时候调用。
所以尽可能的使用wx.navigateTo打开页面。例如从A页面跳转到B页面，然后从B页面返回A。在A页面的onShow页面中，返回的时候也会执行，并且当A使用wx.navigaTo打开B页面的时候，返回的时候，是直接返回的历史，速度更快。但是……也不是所有的都要使用这个，具体的情况也要具体分析
2.首页的登录和校验
- onLoad:function(){
- // 获取用户信息
- wx.getSetting({
- success: res => {
- if (res.authSetting['scope.userInfo']) {//判断是否授权，已经授权
- // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
- //this.getUserInfo();//获取用户信息
- } else {
- // 登录
- wx.login({
- success: res => {
- // 发送 res.code 到后台换取 openId, sessionKey, unionId
- utils.getData('user/getSessionKeyAndOpenid', { code: res.code }, true).then(function (res_login) {
- wx.setStorageSync("nack_id", res_login.data.nack_id)
- wx.setStorageSync("openId", res_login.data.openid);//openid
- wx.showModal({
- title: "友情提示",
- content: res_login.data.openid,
- showCancel: false,
- confirmText: "好的"
- })
- wx.setStorageSync("session_key", res_login.data.session_key);//回话密钥
- })
- }
- });
- //this.getUserInfo();//获取用户信息
- }
- }
- })
- var that = this;
- wx.getUserInfo({
- success:function (res) {
- console.log(res)
- that.setData({
- userlocal: true,
- userid: wx.getStorageSync("nack_id"),
- imgurl:res.userInfo.avatarUrl,
- })
- },
- })
- var opendid = wx.getStorageSync("openId")
- console.log(wx.getStorageSync("openId"))
- },
3. function getData(url, data, types) {
if (types == undefined || types == false) {
types = 'GET'
} else {
types = 'POST'
};
return new Promise(function (resolve, reject) {
wx.request({
url: basePath + url,
method: types,
data: data,
header: {
},
success: function (res) {
resolve(res)
},
fail: function (res) {
reject(res)
},
complete: function () {
}
})
})
};
这个函数中，即使成功了，也会进入第二个.then()函数。但是这其中的形参会是underfind
4.微信小程序需要申请微信认证，费用是300每次。认证通过之后才能获取微信绑定的手机号。（其实就是交了信息使用费）；
5.在使用utils文件的时候，需要在头部用require引入。否则会找不到相应的代码；
6.小程序的css布局都是使用rpx布局的，这样的话，有可能会造成一种情况就是有部分的手机布局垮掉。这个时候应该就是计算的大小与父元素或者屏幕的宽度大小刚刚好了。把margin或者padding，或者width减小1rpx就可以了；
7.小程序常用的标签：view button text。（我貌似就用到了这几个）；
8.小程序的js方式和vue很像，但是也是有区别的，例如使用提前声明的变量的时候是 this.data.key 。设置的时候是用this.setData({key:value,key2:value2})。还有需要注意的一点事，this的指向问题。有可能需要声明var this_ = this；
9.小程序是允许页面之间传值的，直接加在需要跳转的url之后就可以了，与web页面之间的传值是一样的，但是获取页面的传值的时候会更简单。只需要在onLoad页面的function的形参中填一个叫做options 的形参，然后直接点上key值就可以了。例从A页面跳转到B页面，在A页面中写
wx.redirectTo({
url: '../b/b?form=2&proid=' + _this.data.proid,
})
在b页面中的 onLoad：function（options）{
Var proid = options.proid;
Var form = options.form;
}
10.pages里面每个页面要有一个文件夹，html页面不用引入js和css文件（这个确实很六），工具类的文件放在了utils文件夹中。暂时没有在本地放img文件夹，因为这样话会增大整个包的大小。直接调用服务器上面的图片，微信在不分包的情况下，最多允许是2M大小；
11.git操作命令提交代码的时候需要先更新。要不很可能会出现未知的bug；