[教程]教你如何快速开发与分析微信小程序项目
在写这篇教程前我有去看简书上的其他微信小程序相关教程,发现有很多关于小程序的基础教程,所以我这篇教程就不从基础开始了,这篇教程分享了我在开发过程中的一些开发经验,适合有一定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 = 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)绑定已有账号或注册页面。
登录页面(图4)
再来看一下 wx.login() 函数中的 complete 回调函数判断了用户拒绝微信授权的处理,当用户拒绝微信授权时会返回错误状态码:-12006(目前微信开发者工具是不返回这个错误码的,只能到真机测试),根据这个错误码判断,未授权直接跳转到(图4)登录页面。
这样整个小程序项目的登录逻辑就清晰了,那接下来应该编写:绑定账号、注册 和 用户主动登录等页面与代码逻辑了。
高人汇小程序,大家可以扫描体验这篇教程先写到这里,之后会陆续更新我在高人汇项目中得到的开发经验与一些开发技巧。
在文章教程中也许会出现一些纰漏,大家也可以在下方留言给予指出,大家一同交流和学习。