Background
The code of the applet was confusing before, so at the beginning of the new project, we planned to encapsulate the request of WeChat applet
Process
Let’s talk about the whole process first:
1.appjs Once entered, get the user information. If you are not logged in, you will log in by default. No error handling is done here
2. The user must agree to the authorization to perform the operation. If he does not agree to the authorization, he will always jump to the authorization page.
3. After clicking Authorize to log in on the authorization page, call the login interface. After success, return to the page where the authorization was called. ,app.js
Get user information in onLaunch
appSelf = this;
// 应用程序第一次进入，获取用户信息，不做任何错误处理
userInfo().then( (res)=>{
console.log(res);// 打印结果
if (!res.code) {
appSelf.globalData.userInfo = res
}
}).catch( (errMsg)=>{
console.log(errMsg);// 错误提示信息
});
httpUtils.js
request encapsulation
const request = function (path, method, data, header) {
let user_id = "";
let token = "";
try {
user_id = wx.getStorageSync(USER_ID_KEY);
token = wx.getStorageSync(TOKEN_KEY);
} catch (e) {}
header = header || {};
let cookie = [];
cookie.push("USERID=" + user_id);
cookie.push("TOKEN=" + token);
cookie.push("device=" + 1);
cookie.push("app_name=" + 1);
cookie.push("app_version=" + ENV_VERSION);
cookie.push("channel=" + 1);
header.cookie = cookie.join("; ");
return new Promise((resolve, reject) => {
wx.request({//后台请求
url: API_BASE_URL + path,
header: header,
method: method,
data: data,
success: function (res) {
if (res.statusCode !== 200) {
reject(res.data)
} else {
if (res.data.code === 20006) {
login().then( (res)=>{
resolve(res)
}).catch( (errMsg)=>{
reject(errMsg);
})
}
resolve(res.data)
}
},
fail: function (res) {
reject("not data");
}
});
});
}
login
const login = function () {
try {
wx.removeStorageSync(USER_ID_KEY)
wx.removeStorageSync(TOKEN_KEY)
} catch (e) {}
return new Promise((resolve, reject) => {
wx.login({
success: res => {
let code = res.code;
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
withCredentials: true,
success: res => {
let userInfo = res.userInfo;
let name = userInfo.nickName;
let avatar = userInfo.avatarUrl;
let sex = userInfo.gender;
let data = {
code: code,
encryptedData: res.encryptedData,
iv: res.iv,
name: name,
avatar: avatar,
sex: sex,
from: FROM,
};
request("/api/user/login/byWeChatApplet", "POST", data).then( (res)=>{
if (!res.code) {
try {
wx.setStorageSync(USER_ID_KEY, res.user_id);
wx.setStorageSync(TOKEN_KEY, res.token)
} catch (e) {
reject(JSON.stringify(e));
}
}
resolve(res)
}).catch( (errMsg)=>{
reject(errMsg)
});
},
fail: function (res) {
console.log(res);
if (res.errMsg && res.errMsg.startsWith("getUserInfo:fail") && res.errMsg.search("unauthorized") != -1) {
// 跳转授权页面
wx.navigateTo({
url: '/pages/auth/auth'
})
return;
}
wx.getSetting({
success: (res) => {
if (!res.authSetting["scope.userInfo"]) {
// 跳转授权页面
wx.navigateTo({
url: '/pages/auth/auth'
})
}
}
});
}
})
}
})
});
};
auth.js
Authorization page js
Page({
data: {
},
onLoad: function () {
self = this;
},
auth: function (e) {
console.log(app.globalData.userInfo);
if (e.detail.userInfo) {
login().then( (res)=>{
console.log(res);// 打印结果
if (res.code) {
// 接口错误
return
}
// 跳转回上一个页面
wx.navigateBack()
}).catch( (errMsg)=>{
console.log(errMsg);// 错误提示信息
});
}
},
});
Project address
https://github.com/lmxdawn/wx...
a Backend management built by vue thinkphp5.1: https://github.com/lmxdawn/vu...
Demo:<br>