背景

之前小程序代碼混亂，所以新項(xiàng)目一開始就準(zhǔn)備弄個(gè)微信小程序的 request 的封裝

流程

先來說說整個(gè)流程：

1.appjs 里面已進(jìn)入就去獲取用戶信息，如果沒有登錄則默認(rèn)登錄，這里不做錯(cuò)誤處理

2.用戶必須同意授權(quán)才能進(jìn)行操作，如果不同意授權(quán)則會(huì)一直跳轉(zhuǎn)到授權(quán)頁面

3.在授權(quán)頁面點(diǎn)擊授權(quán)登錄后，調(diào)用登錄接口，成功后返回調(diào)起授權(quán)的頁面，

app.js

onLaunch 里面獲取用戶信息

appSelf = this;         // 應(yīng)用程序第一次進(jìn)入，獲取用戶信息，不做任何錯(cuò)誤處理         userInfo().then( (res)=>{             console.log(res);// 打印結(jié)果             if (!res.code) {                 appSelf.globalData.userInfo = res             }         }).catch( (errMsg)=>{             console.log(errMsg);// 錯(cuò)誤提示信息         });

httpUtils.js

request 的封裝

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({//后臺(tái)請求             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 獲取頭像昵稱，不會(huì)彈框                 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

授權(quán)頁面 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) {                     // 接口錯(cuò)誤                     return                 }                 // 跳轉(zhuǎn)回上一個(gè)頁面                 wx.navigateBack()             }).catch( (errMsg)=>{                 console.log(errMsg);// 錯(cuò)誤提示信息             });         }     },  });

項(xiàng)目地址

https://github.com/lmxdawn/wx…

一個(gè) vue + thinkphp5.1 搭建的后臺(tái)管理：https://github.com/lmxdawn/vu…

演示：