微信小程式使用者登入顯示"微信使用者"的問題——解決分析

阿新 • • 發佈：2021-07-01

問題產生原因：是由微信官方對介面進行升級引起的。

在之前我們在小程式獲取使用者資訊是如下方式：

<van-button  
        bind:getuserinfo="getUserInfo"
        open-type="getUserInfo"
        plain
        round
        block
        size="small"
        type="primary"
      >
        點選這裡登入
 </van-button>

注：bind:getuserinfo="getUserInfo" 中的getUserInfo是個響應事件，當然事件名可以隨便取的，不一定非是 getUserInfo 這個名字

open-type="getUserInfo" 則是微信小程式的一個開放能力，在按鈕上設定此屬性則會觸發 getuserinfo 事件。
下面則是事件的響應函式

async getUserInfo(e) {
      // 微信授權
      let that = this
      let userInfo = e.detail.userInfo
      if (userInfo) {
        let login = () => {
          return new Promise(resolve => {
            wx.login({
              success(res) {
                resolve(res)
              },
              fail() {
                resolve()
              }
            })
          })
        }
        let getUserInfo  
= () => {
          return new Promise(resolve => {
            wx.getUserInfo({
              success(res) {
                resolve(res)
              },
              fail() {
                resolve()
              }
            })
          })
        }
        let res = await login()
        let res2  
= await getUserInfo()

        showLoading('載入中')
        if (res && res.code && res2) {
          let { encryptedData, iv, rawData, signature } = res2
          await that.userLoginFunc(
            res.code,
            encryptedData,
            iv,
            rawData,
            signature
          )
          hideLoading()
        }
      }
    }

根據官方文件

調整後，開發者如需獲取使用者身份識別符號只需要呼叫wx.login介面即可。開發者若需要在介面中展示使用者的頭像暱稱資訊，可以通過<open-data>元件進行渲染，該元件無需使用者確認，可以在介面中直接展示。在部分場景（如社交類小程式）中，開發者需要在獲取使用者的頭像暱稱資訊，可呼叫wx.getUserProfile介面，開發者每次通過該介面均需使用者確認，請開發者妥善處理呼叫介面的時機，避免過度彈出彈窗騷擾使用者。

解決過程分析：

主要就是變化一點，無需再用 open-type="getUserInfo" 了，wx.getUserInfo介面也不用了，改為呼叫 wx.getUserProfile介面

async getUserProfile(e){
      let that = this
      let getuserinfo = new Promise((resolve, reject) => {
         
            wx.getUserProfile({
              desc: '用於完善會員資料',  
              success(res) {
                resolve(res)
              },
              fail() {
                resolve()
              }
            })
      })

      let login = new Promise((resolve, reject) => {
          wx.login( {
              success(res) {
                resolve(res)
              },
              fail() {
                resolve()
              }
            })
         }
      )

      
      //console.log("params=" + params )
      let flag = true
      Promise.all([login, getuserinfo]).then(res=>{
        console.log('所有操作完成---',res)
        let code = ""
        //let params = { encryptedData:'', iv:'', rawData:'', signature:'' }
        if(res[0] && res[0].code )
        {
          code = res[0].code 
        }else{
          falg = false
        }
        if(res[1]){
          console.log( "-----oooo----------")
          
          //console.log("signature:" + params.signature)
        }else{
          falg = false
        }

        showLoading('載入中')
        //console.log("")
        if (flag) {
          
         let { encryptedData, iv, rawData, signature } = res[1]
        
          //呼叫後端介面
          that.userLoginFunc(
            code,
            encryptedData,
            iv,
            rawData,
            signature
          )
          hideLoading()
        }
      }).catch((error) => {
        console.log(error)
      })
      
    }