微信小程式 getUserProfile 獲取使用者資訊

KaySarjan發表於2021-04-16
微信小程式
系列文章：
phpGrace開源PHP框架 微信小程式 getUserProfile 獲取使用者資訊

官方公告中說 “新增getUserProfile介面（基礎庫2.10.4版本開始支援），可獲取使用者頭像、暱稱、性別及地區資訊”

考慮到近期開發者對小程式登入、使用者資訊相關介面調整的相關反饋，為優化開發者調整介面的體驗，回收wx.getUserInfo介面可獲取使用者授權的個人資訊能力的截止時間由2021年4月13日調整至2021年4月28日24時。

具體程式碼實現：

wxml 程式碼

<view class="container">
  <view class="userinfo">
    <block wx:if="{{!hasUserInfo}}">
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 獲取頭像暱稱 </button>
      <button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像暱稱 </button>
    </block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
</view>

wxss 程式碼

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
}

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

.usermotto {
  margin-top: 200px;
}

js 程式碼

Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUseGetUserProfile: false,
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推薦使用wx.getUserProfile獲取使用者資訊，開發者每次通過該介面獲取使用者個人資訊均需使用者確認
    // 開發者妥善保管使用者快速填寫的頭像暱稱，避免重複彈窗
    wx.getUserProfile({
      desc: '用於完善會員資料', // 宣告獲取使用者個人資訊後的用途，後續會展示在彈窗中，請謹慎填寫
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推薦使用getUserInfo獲取使用者資訊，預計自2021年4月13日起，getUserInfo將不再彈出彈窗，並直接返回匿名的使用者個人資訊
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
})

若開發者需要獲取使用者的個人資訊（頭像、暱稱、性別與地區），可以通過wx.getUserProfile介面進行獲取，該介面從基礎庫2.10.4版本開始支援，該介面只返回使用者個人資訊，不包含使用者身份識別符號。該介面中desc屬性（宣告獲取使用者個人資訊後的用途）後續會展示在彈窗中，請開發者謹慎填寫。開發者每次通過該介面獲取使用者個人資訊均需使用者確認，請開發者妥善保管使用者快速填寫的頭像暱稱，避免重複彈窗。

最佳實踐

調整後，開發者如需獲取使用者身份識別符號只需要呼叫wx.login介面即可。

開發者若需要在介面中展示使用者的頭像暱稱資訊，可以通過元件進行渲染，該元件無需使用者確認，可以在介面中直接展示。

在部分場景（如社交類小程式）中，開發者需要在獲取使用者的頭像暱稱資訊，可呼叫wx.getUserProfile介面，開發者每次通過該介面均需使用者確認，請開發者妥善處理呼叫介面的時機，避免過度彈出彈窗騷擾使用者。

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章