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.

app.js

Get user information in onLaunch

appSelf?=?this;
????????//?應(yīng)用程序第一次進(jìn)入，獲取用戶信息，不做任何錯誤處理
????????userInfo().then(?(res)=>{
????????????console.log(res);//?打印結(jié)果
????????????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;
????????????????//?已經(jīng)授權(quán)，可以直接調(diào)用?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)?{
????????????????????????????//?跳轉(zhuǎn)授權(quán)頁面
????????????????????????????wx.navigateTo({
????????????????????????????????url:?'/pages/auth/auth'
????????????????????????????})
????????????????????????????return;
????????????????????????}
????????????????????????wx.getSetting({
????????????????????????????success:?(res)?=>?{
????????????????????????????????if?(!res.authSetting["scope.userInfo"])?{
????????????????????????????????????//?跳轉(zhuǎn)授權(quán)頁面
????????????????????????????????????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);//?打印結(jié)果
????????????????if?(res.code)?{
????????????????????//?接口錯誤
????????????????????return
????????????????}
????????????????//?跳轉(zhuǎn)回上一個頁面
????????????????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>