background

The code of the small program was chaotic before, so at the beginning of the new project, WE planned to package the request of the wechat small program

process

Let’s start with the process:

  1. Appjs inside has entered to obtain user information, if not logged in to the default login, here do not do error processing
  2. Users can perform operations only when they agree with the authorization. If they do not agree with the authorization, the user is redirected to the authorization page
  3. Click login authorization on the authorization page, invoke the login interface, and return to the page of invoking authorization after success.

app.js

Get user information from onLaunch

appSelf = this; UserInfo ().then((res)=>{console.log(res); // Prints the result if (! res.code) { appSelf.globalData.userInfo = res } }).catch( (errMsg)=>{ console.log(errMsg); });Copy the code

httpUtils.js

The request of the 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({// 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"); }}); }); }Copy the code

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; 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") ! NavigateTo ({url: '/pages/auth/auth'}) return; } wx.getSetting({ success: (res) => { if (! NavigateTo ({url: '/pages/auth/auth'})}}}); res.authSetting[" scope.userinfo "]) { }})}}); };Copy the code

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); Wx.navigateback ()}). Catch ((errMsg)=>{console.log(errMsg); }); }}});Copy the code

The project address

Github.com/lmxdawn/wx….

Vue + ThinkPHP5.1 build a background management: github.com/lmxdawn/vu….

Presentation: