微信小程序用户登录显示"微信用户"的问题——解决分析

问题产生原因：是由微信官方对接口进行升级引起的。

在之前我们在小程序获取用户信息是如下方式：

<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接口 ，触发的方式要改为事件：

<van-button  
        bind:click="getUserProfile"
        plain
        round
        block
        size="{{ fullPage?'large':'small' }}"
        type="primary"
      >
        点击这里登录
      </van-button>

 

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)
      })
      
    }

上面的代码在一次请求中以promise方式调了两个微信口 wx.getUserProfile 和 wx.login ，
但这在小程序中是不允许的，所以需要以Promise.all的方式去调用 ，Promise.all可以接受一个promise数组作为参数，
当所有的子Promise都完成，该Promise完成，返回值是全部值的数组。如果有任何一个失败，该Promise失败。