背景

之前小程序代码混乱，所以新项目一开始就准备弄个微信小程序的 request 的封装

流程

先来说说整个流程：

1.appjs 里面已进入就去获取用户信息，如果没有登录则默认登录，这里不做错误处理

2.用户必须同意授权才能进行操作，如果不同意授权则会一直跳转到授权页面

3.在授权页面点击授权登录后，调用登录接口，成功后返回调起授权的页面，

app.js

onLaunch 里面获取用户信息

appSelf = this;         // 应用程序第一次进入，获取用户信息，不做任何错误处理         userInfo().then( (res)=>{             console.log(res);// 打印结果             if (!res.code) {                 appSelf.globalData.userInfo = res             }         }).catch( (errMsg)=>{             console.log(errMsg);// 错误提示信息         });

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({//后台请求             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

授权页面 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);// 错误提示信息             });         }     },  });

项目地址

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

一个 vue + thinkphp5.1 搭建的后台管理：https://github.com/lmxdawn/vu…

演示：