在写这篇教程前我有去看简书上的其他微信小程序相关教程，发现有很多关于小程序的基础教程，所以我这篇教程就不从基础开始了，这篇教程分享了我在开发过程中的一些开发经验，适合有一定javascript基础，最好了解后台开发的同学。
需求分析
开发项目前要把项目需求理顺、理清这是首当其冲要做的事情，在我开发的项目当中拿 高人汇 为例，高人汇项目的业务逻辑很多接口都需要 uid 和 token，所以第一步要从登录和存储全局信息开始，这里说一下高人汇项目是有 ios 和 android 两端app的，小程序端要利用微信开发平台 unionId 来实现同步信息，通过小程序API中的 wx.getUserInfo 方法获取到 unionId 来实现自动登录。登录后获取用户的部分数据作为全局变量存储，有了必要的数据，接下来请求其他接口和对业务逻辑就会相对清晰。
在 图1 中我们看到当用户拒绝授权是获取不到 unionId 的，当用户拒绝微信授权时微信会返回错误状态码：-12006，利用这个状态码来判断用户是否授权，值得注意的是目前为止， 微信开发者工具并不返回这个错误状态码，只有在真机上才有返回。
首先要配置一个全局请求接口的连接地址，这样便于生产环境与测试环境的切换。
新建一个js文件用来配置全局的接口请求链接地址，baseUrl.js如下：
//baseUrl.js
module.exports = {
apiUrl:'https://api.baidu.com/index.php?m=model&c=controller&a=',
imgUrl:'http://img.baidu.com',
payUrl:'https://api.baidu.com/index.php?m=model&c=controller&a=pay'
}
在app.js中引入一次即可，在app.js需要设置一个全局变量，因个人习惯全局变量名这里我设置为_G，代码如下
//app.js
var $url = require('/utils/baseUrl.js');
var $util = require('/utils/util.js');
App({
_G:{
apiUrl: $url.apiUrl,
imgUrl: $url.imgUrl,
payUrl: $url.payUrl,
wxInfo: {},
userInfo:{},
shareTitle: '测姻缘桃花，算事业财运',
shareDesc: '最靠谱的命理占卜师在线解答，10分钟快速响应！占卜问事、起名择吉看风水。'
},
....
这样在其他页面通过 getApp() 函数得到小程序实例从而得到接口url。
在上面的代码中也引入 util.js， 这个js是用来写一些常用的工具函数，提到 util.js 那现在就首先编写一个用来统一设置全局数据的方法函数，在 图1 了解到有四处地方可以获取到的用户数据分别为：自动登录、主动登录、绑定账户和用户注册，这四处获取到的数据有部分数据是需要设置全局变量和全局存储的，为了方便有必要写这个方法函数，代码如下
//util.js
/**
* 设置用户信息缓存
*/
function setDataStorage(d,g) {
data = d.data;
//设置全局变量
g._G.userInfo = {
avatar: data.avatar,
nickname: data.nickname,
mobile: data.mobile,
balance: data.balance,
credit: data.credit,
}
wx.setStorageSync('userInfo',{
uid: data.uid,
NickName: data.nickname,
mobile: data.mobile,
avatar: data.avatar
});
wx.setStorageSync('openid', data.openid);
wx.setStorageSync('uid',data.uid);
wx.setStorageSync('token',data.token);
}
module.exports = {
setDataStorage: setDataStorage
}
setDataStorage 方法函数 g 参数是通过 getApp() 函数得到小程序实例，这样同步更新全局_G变量，在之后会用来更新用户信息，例如：用户余额和用户积分的变化。
前期的准备工作先到这里，接下来要编写用户登录方法函数，之后会很多地方需要调用这个登录方法函数。
为了方便我是在app.js中创建的login方法函数，代码如下
//全局登录函数
login:function(fmurl,func){
var that = this;
//调用登录接口
wx.login({
success: function (res) {
if(res.code){
wx.getUserInfo({
withCredentials:true,
success: function (r) {
wx.showLoading({
title: '加载中',
})
wx.request({
url: $url.apiUrl + 'appletLogin',
method:'POST',
data: {
code: res.code,
rawdata: r.rawData,
signature: r.signature,
cryptedata: r.encryptedData,
iv: r.iv,
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function(result) {
var dt = result.data;
wx.setStorageSync('unionId',dt.data.unionId);
//未绑定手机号
if(dt.result == 40040){
wx.redirectTo ({
url:'/pages/member/bound/bound?fmurl=' + fmurl,
});
return false;
}
if(dt.result != 1){
wx.showModal({
title: '系统提示',
content: dt.msg,
showCancel:false,
})
return false;
}
//设置缓存
$util.setDataStorage(dt,that);
wx.showToast({
title: '登录成功',
icon: 'success',
duration: 1500,
})
//执行回调
if(typeof func == 'function'){
func(dt.data);
}
console.log(dt)
return dt;
},
fail: function(e){
wx.hideLoading();
wx.showModal({
title: '系统提示',
content: '请求超时，请稍后再试',
showCancel: false,
})
}
})
},
complete: function(obj){//处理用户拒绝授权
if(obj.err_code == '-12006'){
wx.redirectTo({
url: '/pages/member/login/login'
})
return false;
}
}
})
}else{
console.log('获取code失败')
}
}
})
},
大家要注意这个login方法函数，是由两个小程序函数和一个开发者服务器接口构成的， wx.login() 、 wx.getUserInfo()函数 和 appletLogin接口。
通过两个小程序函数获得的 code 、rawdata、signature、encryptedData、iv，数据后调用开发者服务器 appletLogin接口，将encryptedData 进行解密得到 openId 和 unionId后，appletLogin接口内部调用开发者服务器登录接口，获取用户数据进行返回。
拿到返回的用户数据再调用教程上面刚刚写的 setDataStorage() 函数，进行设置全局变量和全局数据存储。
在这里简单的说一下开发者服务器端逻辑，因为高人汇项目还有APP端，所以服务器端应该有四个相关接口：
- 微信小程序登录接口（需要解密 encryptedData）
- 第三方登录\绑定账号（可通过unionId登录的接口）
- 登录接口
- 注册接口
来看一下 login 方法函数，函数调用开发者服务器 appletLogin接口时，服务器返回错误码40040（这个错误码要根据自己服务器返回值去处理）表示该微信用户未绑定账号（unionId不匹配）或未注册，这时程序会跳转到（图3）绑定已有账号或注册页面。
再来看一下 wx.login() 函数中的 complete 回调函数判断了用户拒绝微信授权的处理，当用户拒绝微信授权时会返回错误状态码：-12006（目前微信开发者工具是不返回这个错误码的，只能到真机测试），根据这个错误码判断，未授权直接跳转到（图4）登录页面。
这样整个小程序项目的登录逻辑就清晰了，那接下来应该编写：绑定账号、注册 和 用户主动登录等页面与代码逻辑了。
这篇教程先写到这里，之后会陆续更新我在高人汇项目中得到的开发经验与一些开发技巧。
在文章教程中也许会出现一些纰漏，大家也可以在下方留言给予指出，大家一同交流和学习。
