最近在做小程序的項(xiàng)目，依舊是商城，又開(kāi)始研究微信的登陸授權(quán)坑，第一次接觸小程序，授權(quán)登陸也是一塌糊涂以后再慢慢的改進(jìn)

場(chǎng)景

微信用戶可以通過(guò)搜索進(jìn)入小程序
也可以通過(guò)別人分享進(jìn)入小程序
進(jìn)入小程序之后需要用戶授權(quán)拿到用戶信息進(jìn)行注冊(cè)

代碼實(shí)現(xiàn)

初始化頁(yè)面home頁(yè)用戶第一次進(jìn)入小程序必須授權(quán)后臺(tái)注冊(cè)并登陸
app.json

{"pages": [    "pages/home/index",     "pages/login/index",     ...   ]}

login.js邏輯進(jìn)入頁(yè)面判斷一下是不是授權(quán)過(guò)，判斷用戶是否已經(jīng)授權(quán)，已經(jīng)授權(quán)顯示登陸，沒(méi)有授權(quán)顯示授權(quán)，用戶無(wú)論是注冊(cè)還是登陸用的是后臺(tái)提供的同一個(gè)接口。返回token存在本地
login.js

const App = getApp()import { loginModel } from '../../models/login.js'import { MineModel } from '../../models/mine.js'import { encodeUnicode } from '../../utils/index.js'const ModelLogin = new loginModel()const Modelmine = new MineModel()Page({  data: {    logged: !1,    isauth: false,    locked: false  },  onLoad: function(options) {    // 返回到之前要刷新    var pages = getCurrentPages() // 獲取頁(yè)面棧    var prevPage = pages[pages.length - 2] // 前一個(gè)頁(yè)面    prevPage.setData({      isBack: true    })  },  onShow: function() {    // 如果已經(jīng)授權(quán)則顯示登錄,直接登錄不調(diào)用授權(quán)    App.WxService.getSetting().then(res => {      if (res.authSetting['scope.userInfo']) {        this.setData({          isauth: true        })      }    })    //token 不能在page外面定義，變量寫(xiě)在 page 外面有緩存    const token = App.WxService.getStorageSync('utoken')    // 如果有token顯示已經(jīng)授權(quán)    this.setData({      logged: !!token    })    token && setTimeout(this.goBack, 1500)  },  login() {    this.wechatSignUp()  },  goBack() {    // 返回登錄之前的頁(yè)面    wx.navigateBack({      delta: 1    })  },  // 登陸注冊(cè)  wechatSignUp(cd) {    // 上鎖如果正在請(qǐng)求接口那么就返回    if (this.data.locked) {      return    }    this.data.locked = true    //注冊(cè)或者登陸獲取token    let code = ''    App.WxService      .login()     沈陽(yáng)軟件制作
 .then(data => {        code = data.code        wx.setStorageSync('logincode', data.code)        return App.WxService.getUserInfo()      })      .then(data => {        // 請(qǐng)求后臺(tái)登錄注冊(cè)接口        return ModelLogin.wechatSignUp({          encrypteData: data.encryptedData,          iv: data.iv,          rawData: encodeUnicode(data.rawData), // 編碼          signature: data.signature,          code: code        })      })      .then(data => {        this.data.locked = false        if (data.data.token == '') {          wx.showToast({            title: '登錄失敗',            icon: 'none'          })          return        }        App.WxService.setStorageSync('utoken', data.data.token)        // 訪問(wèn)后臺(tái)接口獲取用戶信息        ModelLogin.getVipInfo({ token: data.data.token }).then(res => {          App.globalData.userInfo = res.data.userInfo          // 返回上一頁(yè)          this.goBack()        })      })      .catch(err => {        this.data.locked = false        console.log(err)      })  }})

這里的App.WxService等價(jià)于wx因?yàn)閣x是回調(diào)的方式，這里使用的是promise。
先判斷有沒(méi)有授權(quán)，沒(méi)有授權(quán)顯示點(diǎn)擊授權(quán)，有授權(quán)顯示點(diǎn)擊登錄，調(diào)用的方法都是wechatSignUp，拿到wx.login的code和wx.getUserInfo的數(shù)據(jù)給后臺(tái)，然后后臺(tái)返回token，然后再去訪問(wèn)后臺(tái)獲取用戶信息
login的邏輯大概就是這些
login.wxml

<view class="login-container">  <view class="login" wx:if="{{ !logged }}">    <view class="app-info">      <image class="app-logo" src="./s-toplogo@2x.png" />      <text class="app-name">商城</text>    </view>    <view class="alert">      <view class="alert-title" wx:if="{{!isauth}}">請(qǐng)同意授權(quán)</view>      <view class="alert-title" wx:if="{{isauth}}">請(qǐng)登錄</view>      <view class="alert-desc">        <view class="alert-text">為了讓頭號(hào)買手可以更好的為您服務(wù)</view>      </view>    </view>    <button type='primary' wx:if="{{!isauth}}" class="sui-f16" open-type="getUserInfo" bind:getuserinfo="wechatSignUp">確認(rèn)授權(quán)</button>    <button type="primary" wx:if="{{isauth}}" class="weui-btn" bindtap="login">確認(rèn)登錄</button>  </view>  <view class="logged" wx:else>    <image class="logged-icon" src="./s-toplogo@2x.png" />    <view class="logged-text">近期你已經(jīng)授權(quán)登陸過(guò)商城</view>    <view class="logged-text">自動(dòng)登錄中</view>  </view></view>              
              

            
javascript,小程序