小程序模板網(wǎng)

小程序登錄的最優(yōu)流程

發(fā)布時(shí)間:2020-05-22 10:20 所屬欄目:小程序開發(fā)教程

18年中旬做過(guò)一個(gè)小程序,當(dāng)時(shí)是通過(guò)轉(zhuǎn)跳到一個(gè)登錄頁(yè),然后點(diǎn)擊調(diào)用 wx.getUserInfo ,然后發(fā)現(xiàn)這個(gè)api被禁用了(雖然依然可以用),然后用

<!-- 需要使用 button 來(lái)授權(quán)登錄 -->
<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授權(quán)登錄</button>
<view wx:else>請(qǐng)升級(jí)微信版本</view>
復(fù)制代碼

因?yàn)楫?dāng)時(shí)剛好需要用戶信息,然后這個(gè)api有一個(gè) encryptedData 屬性可以獲取信息。

這樣的流程本就可以了,但是意外出現(xiàn)了。

思維的禁錮

當(dāng)?shù)诙?2020年)需要開發(fā)一個(gè)新的小程序,于是也用了老代碼, 但是出現(xiàn)了個(gè)奇怪的問(wèn)題。 有興趣的可以看下面的[奇怪的問(wèn)題]

奇怪的問(wèn)題:

因?yàn)槲⑿畔拗茻o(wú)法轉(zhuǎn)跳到登錄頁(yè),所以想是否應(yīng)該在首頁(yè)設(shè)置一個(gè)彈窗,點(diǎn)擊的時(shí)候授權(quán)。

但是因?yàn)榭紤]到可能會(huì)被微信拒絕,故在小程序開發(fā)者論壇開了一篇文章

app無(wú)法轉(zhuǎn)跳到登錄頁(yè)面 and 小程序登錄的哲學(xué)思考

隨后發(fā)現(xiàn),登錄其實(shí)并不需要授權(quán)彈窗or頁(yè)面。(如果服務(wù)器不需要保存用戶信息)

流程

下面這個(gè)圖是小程序官方圖 點(diǎn)我轉(zhuǎn)跳

代碼

app.js(小程序的入口文件)的完整代碼

const loginDataKey = 'loginData'

//app.js
App({
  onLaunch: function () {

    const loginData = wx.getStorageSync(loginDataKey)
    console.log('--loginData--')
    console.log(loginData)
    let toLogin = () => {
      console.log('未登錄,去登錄..')
      wx.showLoading({title: '登錄中', icon: 'loading', mask: true})
      wx.login({
        success(res){
          console.log('wx.login res')
          console.log(res)
          let success = () => {
            console.log('登錄成功')
            let loginResponse = {"openid":"ooZAbwpdDdaZV_xiamianshi_mashaike"}
            wx.setStorageSync(loginDataKey, loginResponse)
            wx.hideLoading()
          }
          let fail = () => {
            wx.hideLoading()
            wx.showToast({
              title: '登錄失敗,請(qǐng)重新打開小程序試試',
              icon: 'none',
              duration: 1e8
            })
          }
          // TODO 發(fā)起網(wǎng)絡(luò)請(qǐng)求
          // 延時(shí)模擬請(qǐng)求登錄成功
          setTimeout(success, 500)
        },
        fail(err){
          console.log(err)
          wx.hideLoading()
          wx.showToast({
            title: '登錄失敗,請(qǐng)重新打開小程序試試',
            icon: 'none',
            duration: 1e8
          })
        }
      })
    }
    // 未登錄,去登錄
    if(!loginData){
      toLogin()
    // 已登錄,但是微信session_key過(guò)期
    }else{
      wx.checkSession({
        success () {
          //session_key 未過(guò)期,并且在本生命周期一直有效
          console.log('session_key 未過(guò)期')
        },
        fail () {
          // session_key 已經(jīng)失效,需要重新執(zhí)行登錄流程
          console.log('session_key 已經(jīng)失效,需要重新執(zhí)行登錄流程, 重新登錄中')
          toLogin()
        }
      })
    }

  },
  globalData: {
    userInfo: null
  }
})
復(fù)制代碼

流程如下

  • 根據(jù)本地儲(chǔ)存判斷是否登錄
  • 已登錄判斷是否失效
  • 失效或者未登錄去登錄
  • 登錄展示toast
  • 拿到信息存儲(chǔ) 關(guān)閉toast

核心

  • wx.login拿到code
  • 然后把code通過(guò) auth.code2Session 獲取openid和unionid等。

這是我通過(guò) auth.code2Session 拿到openid的截圖(因?yàn)檫@個(gè)是測(cè)試號(hào),所以沒(méi)有unionid)

【unionid】是拿來(lái)和其他平臺(tái)打通賬號(hào)的關(guān)鍵,如果只有一個(gè)小程序,都可以不需要這個(gè)。

效果

 

 

其他

純展示用戶頭像昵稱等

<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
復(fù)制代碼

查看open-data文檔

--完--



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉(cāng)庫(kù):starfork
本文地址:http://www.u-renovate.com/wxmini/doc/course/25267.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢
AI智能客服 ×