[教程]教你如何快速开发与分析微信小程序项目 [教程]教你如何快速开发与分析

在写这篇教程前我有去看上的其他微信小程序相关教程，发现有很多关于小程序的基础教程，所以我这篇教程就不从基础开始了，这篇教程分享了我在开发过程中的一些开发经验，适合有一定javascript基础，最好了解后台开发的同学。
需求分析开发项目前要把项目需求理顺、理清这是首当其冲要做的事情，在我开发的项目当中拿高人汇为例，高人汇项目的业务逻辑很多接口都需要 uid 和 token，所以第一步要从登录和存储全局信息开始，这里说一下高人汇项目是有 ios 和 android 两端app的，小程序端要利用微信开发平台 unionId 来实现同步信息，通过小程序API中的 wx.getUserInfo 方法获取到 unionId 来实现自动登录。登录后获取用户的部分数据作为全局变量存储，有了必要的数据，接下来请求其他接口和对业务逻辑就会相对清晰。

文章图片
项目登录流程图（图1）在图1 中我们看到当用户拒绝授权是获取不到 unionId 的，当用户拒绝微信授权时微信会返回错误状态码：-12006，利用这个状态码来判断用户是否授权，值得注意的是目前为止，微信开发者工具并不返回这个错误状态码，只有在真机上才有返回。
【[教程]教你如何快速开发与分析微信小程序项目】首先要配置一个全局请求接口的连接地址，这样便于生产环境与测试环境的切换。

文章图片
（图2）新建一个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 = https://www.it610.com/article/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）绑定已有账号或注册页面。

文章图片
绑定账号（图3）

文章图片
登录页面（图4）
再来看一下 wx.login() 函数中的 complete 回调函数判断了用户拒绝微信授权的处理，当用户拒绝微信授权时会返回错误状态码：-12006（目前微信开发者工具是不返回这个错误码的，只能到真机测试），根据这个错误码判断，未授权直接跳转到（图4）登录页面。
这样整个小程序项目的登录逻辑就清晰了，那接下来应该编写：绑定账号、注册和用户主动登录等页面与代码逻辑了。