小程序模板網(wǎng)

微信小程序獲取用戶頭像昵稱等信息

發(fā)布時(shí)間:2021-07-05 08:49 所屬欄目:小程序開(kāi)發(fā)教程
調(diào)用微信小程序封住的 wx.getUserInfo({ })
微信新創(chuàng)建的項(xiàng)目中自帶獲取功能的代碼,但是代碼量太多,所以給簡(jiǎn)化了一下方便以后在別的項(xiàng)目中使用
直接上代碼>>>
先在app.js中聲明一個(gè)全局變量userInfo
globalData: {
    userInfo: null
}
在需要現(xiàn)顯示的wxml中
<view class="container">
    <view class="userinfo">
        <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image> //頭像
        <text class="userinfo-nickname">{{userInfo.nickName}}</text>//昵稱
    </view>
</view>
在需要現(xiàn)顯示頁(yè)面的wxss中定義一下顯示的樣式
.userinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.userinfo-avatar {
     width: 128rpx;
    height: 128rpx;
    margin: 20rpx;
    border-radius: 50%;
}

.userinfo-nickname {
    color: #aaa;
}
在需要現(xiàn)顯示的js中
data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo')
}

onLoad: function () {     //頁(yè)面加載監(jiān)聽(tīng)函數(shù)
 wx.getUserInfo({
    success: res => {
      console.log(res)    //獲取的用戶信息還有很多,都在res中,看打印結(jié)果
      this.setData({
        userInfo: res.userInfo,
        hasUserInfo: true
      })
    }
  })
}
以上代碼就可實(shí)現(xiàn)微信小程序獲取用戶信息
注意:微信小程序獲取用戶信息需用戶授權(quán),以上代碼是用戶已授權(quán)節(jié)省代碼量,若需授權(quán)請(qǐng)?jiān)赼pp.js加入如下代碼:
onLaunch: function () {
// 登錄
wx.login({
  success: res => {
    // 發(fā)送 res.code 到后臺(tái)換取 openId, sessionKey, unionId
  }
})
// 獲取用戶信息
wx.getSetting({
  success: res => {
    if (res.authSetting['scope.userInfo']) {
      // 已經(jīng)授權(quán),可以直接調(diào)用 getUserInfo 獲取頭像昵稱,不會(huì)彈框
      wx.getUserInfo({
        success: res => {
          // 可以將 res 發(fā)送給后臺(tái)解碼出 unionId
          this.globalData.userInfo = res.userInfo

          // 由于 getUserInfo 是網(wǎng)絡(luò)請(qǐng)求,可能會(huì)在 Page.onLoad 之后才返回
          // 所以此處加入 callback 以防止這種情況
          if (this.userInfoReadyCallback) {
            this.userInfoReadyCallback(res)
          }
        }
      })
    }
  }
 })
},


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