小程序初新建的项目，有三个重要文件app.js、app.json、app.wxss，呐...今天我们就从我个人的实战经验讲讲，app.js文件里应该做哪些骚操作，方便我们开发呢。
一、promise（wx.requset）封装
直接上代码，当然这个你也可以放在utils里单独引用
// promise（wx.requset）封装
httpPost: function (url, data, type) {
return new Promise((resolve, reject) => {
//init
const that = this;
const postData = data; // 请求参数
const postType = type // 请求方式 POST、GET、DELETE...
//网络请求
wx.request({
url: that.configHeadAjax.onlinePath + url, // 默认请求域名地址（配置项）+api有效地址
data: postData,
method: postType,
header: { // 公共请求头，可以按口味添加公共参数
'content-type': 'application/json' ,
'token': wx.getStorageSync('token') ? wx.getStorageSync('token'):'', // token其实就是openid+sessionkey如果没有就是首次登录服务端做空态判断处理
},
success: function (res) {
if (res.data.status == 1) {
resolve(res);
} else { // 返回错误提示信息
if (res.data.error_code == 200001){ // 服务端返回状态码为判断标准，无论哪个接口什么时候登录态过期都重新调起login
wx.setStorageSync("logFlage", 0) // 本地登录标识
wx.navigateTo({ // 跳转至登录页
url: '../logs/logs',
})
}else{
reject(res)
}
}
},
fail(res) {
reject('网络出错');
wx.showToast({
title: '网络出错',
icon:'none'
})
}
})
});
return promise;
},
复制代码之所以把登录态判断放在这里，是因为发现，服务端的登录态和我们本地需要wx.checkSession检测的用户登录态是不一样的，所以为了避免其他页面重复操作，在这里统一做了处理。
二、环境变量及公共参数配置。
globalData: { // 这块全局数据貌似每一个新建项目都有，就不多解释了，存起来用就完了
userInfo: null, // 授权后登录信息（微信）
loginStatus: false, // 默认登录状态为false
user: null, // 登录信息（账户）
secret_key: 'XXXXX',
timestamp: new Date().getTime()
},
configAjaxPath: { //通过调用configAjaxPath.onlinePath||
onlinePath: "https://xxx.xxx.com",
testPath:'https://test-xxx.xxx.com',
devPath:'https://dev-xxx.xxx.com'
},
复制代码这里就不多说了，这样做的目的也很明确，方便引用，方便修改，一目了然，改一盖全....
三、用户授权、登录。
#授权 通常就是包含两个方面的权限
- 用户信息获取授权 getUserInfo
- 服务API调用授权 wx.authoriz
通常我们说的授权大多是首次进入某小程序是弹出的用户信息获取授权
#登录 其实也是看业务需求，大概也分两种方式- 用小程序openid && session_key 作为用户标识来存储，并判断是否为该小程序业务的用户登录
- 自有登录注册体系login && register，自有的登录标识 (多以手机号为主)
但其实不管哪一种你都需要一个登录接口来存储对应信息，然后通过服务端返回值或者微信本地check来判断用户登录是否过期，那么理清思路，我们就撸代码了
onLaunch: function () { //首次启动时触发，全局只触发一次
const that = this
// 登录
wx.checkSession({
success() {
// 登录未过期
},
fail() {
wx.setStorageSync('logFlage',0); //改变本地登录状态
wx.navigateTo({ // 跳转至登录页 重新登录
url: '../logs/logs',
})
}
})
},
userLogin: function () { //用户登录
wx.login({ //小程序登录获取code码
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
var data = {
code: res.code
}
this.httpPost('/user/login', data, 'POST').then(res => { //code
if (res.data.status == 1){
wx.setStorageSync('token', res.data.result.token) //本地存储token取用
wx.setStorageSync('logFlage', 1); //本地存储登录状态
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo;
wx.setStorageSync('userinfo', res.userInfo); //本地存储微信用户信息
wx.switchTab({
url: '../index/index', //成功后跳转至小程序首页开始体验
})
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
} else {
// 未经授权，弹框确认后调用 getUserInfo
}
}
})
}else{
wx.showToast({ //提示错误信息
title: res.data.message,
icon:'none'
})
}
}).catch((errMsg) => {
wx.showToast({ //提示错误信息
title: errMsg.data.message,
icon:'none'
})
});
}
})
},
复制代码其实到这里app.js里的操作就基本完成了，还需要做的就是在app.json pages里配置login页为默认首页， 呐就这样放在放第一位
然后在logs页面设计个高大上体的宣传照，再加一个登录按钮就行了
- 判断本地登录态，是 则跳转首页index 否 则无需操作，等用户点击按钮
- 点击登录按钮，调用app.userLogin()方法去走授权登录流程
欢迎各路大神交流，指导，纠错，互相学习进步