国产亚洲精品资源在线26u

      
      
      <th id="ljgpb"><pre id="ljgpb"><sup id="ljgpb"></sup></pre></th>

      <rp id="ljgpb"></rp>

      您現在的位置: 微信小程序 > 微信小程序開發 > 教程 >

      小程序登錄的最優流程

      來源:微信小程序 編輯:Yiyongtong.com 發布時間:2020-05-22 10:19熱度:

      18年中旬做過一個小程序,當時是通過轉跳到一個登錄頁,然后點擊調用 wx.getUserInfo ,然后發現這個api被禁用了(雖然依然可以用),然后用

      <!-- 需要使用 button 來授權登錄 -->
      <button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授權登錄</button>
      <view wx:else>請升級微信版本</view>
      復制代碼

      因為當時剛好需要用戶信息,然后這個api有一個 encryptedData 屬性可以獲取信息。

      這樣的流程本就可以了,但是意外出現了。

      思維的禁錮

      當第二次(2020年)需要開發一個新的小程序,于是也用了老代碼, 但是出現了個奇怪的問題。 有興趣的可以看下面的[奇怪的問題]

      奇怪的問題:

      因為微信限制無法轉跳到登錄頁,所以想是否應該在首頁設置一個彈窗,點擊的時候授權。

      但是因為考慮到可能會被微信拒絕,故在小程序開發者論壇開了一篇文章

      app無法轉跳到登錄頁面 and 小程序登錄的哲學思考

      隨后發現,登錄其實并不需要授權彈窗or頁面。(如果服務器不需要保存用戶信息)

      流程

      下面這個圖是小程序官方圖 點我轉跳

      代碼

      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: '登錄失敗,請重新打開小程序試試',
                    icon: 'none',
                    duration: 1e8
                  })
                }
                // TODO 發起網絡請求
                // 延時模擬請求登錄成功
                setTimeout(success, 500)
              },
              fail(err){
                console.log(err)
                wx.hideLoading()
                wx.showToast({
                  title: '登錄失敗,請重新打開小程序試試',
                  icon: 'none',
                  duration: 1e8
                })
              }
            })
          }
          // 未登錄,去登錄
          if(!loginData){
            toLogin()
          // 已登錄,但是微信session_key過期
          }else{
            wx.checkSession({
              success () {
                //session_key 未過期,并且在本生命周期一直有效
                console.log('session_key 未過期')
              },
              fail () {
                // session_key 已經失效,需要重新執行登錄流程
                console.log('session_key 已經失效,需要重新執行登錄流程, 重新登錄中')
                toLogin()
              }
            })
          }
      
        },
        globalData: {
          userInfo: null
        }
      })
      復制代碼

      流程如下

      • 根據本地儲存判斷是否登錄
      • 已登錄判斷是否失效
      • 失效或者未登錄去登錄
      • 登錄展示toast
      • 拿到信息存儲 關閉toast

      核心

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

      這是我通過 auth.code2Session 拿到openid的截圖(因為這個是測試號,所以沒有unionid)

      【unionid】是拿來和其他平臺打通賬號的關鍵,如果只有一個小程序,都可以不需要這個。

      效果

       

       

      其他

      純展示用戶頭像昵稱等

      <open-data type="userAvatarUrl"></open-data>
      <open-data type="userNickName"></open-data>
      復制代碼

      查看open-data文檔

      --完--


      国产亚洲精品资源在线26u

          
          
          <th id="ljgpb"><pre id="ljgpb"><sup id="ljgpb"></sup></pre></th>

          <rp id="ljgpb"></rp>