Getting user information for applet learning (getuserprofile and getUserInfo)

Digression :

When learning this module, I read b One of the stations 20 In the video , The video is used when the teacher gives examples getUserInfo Interface , However, the information obtained by the teacher is indeed anonymous . We have to search the Internet and find getUserInfo Interface in 21 In, the function was changed .

getUserInfo The changes to the :

 

 

Adjustment instructions

since 2022 year 10 month 25 Japan 24 After the hour （ The following a general designation “ Effective period ” ）, The rules for obtaining user avatar nicknames will be adjusted as follows ：

1. From the effective date , Applet wx.getUserProfile The interface will be retracted ： New version of the applet released after the effective date , adopt wx.getUserProfile Interface to get the user image will return to the default Gray head , Nicknames will be returned uniformly “ WeChat users ”. Versions of applets released before the effective date will not be affected , If it needs to be adapted, it needs to be updated .
2. From the effective date , Plug in through wx.getUserInfo Interface to get the user's nickname avatar will be recalled ： New versions of plug-ins released after the effective date , adopt wx.getUserInfo Interface to get the user image will return to the default Gray head , Nicknames will be returned uniformly “ WeChat users ”. Plug in versions released before the effective date will not be affected , If it needs to be adapted, it needs to be updated . adopt wx.login And wx.getUserInfo Interface acquisition openId、unionId Capability not affected .
3. 「 Ability to fill in Avatar nicknames 」 Support to get the nickname of the user's Avatar ： If the business needs to obtain the user's Avatar nickname , have access to 「 Ability to fill in Avatar nicknames 」（ Base library 2.21.2 Version starting support ）, Specific practices can be seen below 《 Best practices 》.
4. Applet wx.getUserProfile And plug-ins wx.getUserInfo Interface compatibility base library 2.21.2 The following versions of avatar nickname acquisition requirements ： Above 「 Ability to fill in Avatar nicknames 」 From the base library 2.21.2 Version starting support （ Cover wechat 8.0.16 Above version ）. For access from lower versions of basic libraries and wechat clients , Small program passed wx.getUserProfile The interface will normally return the user's Avatar nickname , Plug in through wx.getUserInfo Interface will return the user's Avatar nickname , Developers can continue to use the above capabilities for downward compatibility .

That is to say, the original passage wx.getUserInfo Interface to get the user id And the function of the avatar is getUserProfile Interface substitution .

 

 getUserProfile

Function description :

Get user information . Page click event （ for example  button  On  bindtap  In the callback ） Can only be called after , Each request will bring up an authorization window , The user agrees and returns  userInfo. This interface is used to replace  wx.getUserInfo,

  Examples :

js:

// index.js
//  Get application instance 
const app = getApp()

Page({
  data: {
    motto: ' Clean Calculator Beta ',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    canIUseGetUserProfile:false,
    canIUseOpenData: false //  To try to get user information, change to false
  },
  //  Event handler 
  // bindViewTap() {
  //   wx.navigateTo({
  //     url: '../logs/logs'
  //   })
  // },
 
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    //  Recommended wx.getUserProfile Get user information , Every time the developer obtains the user's personal information through the interface, the user needs to confirm , Developers keep the nicknames of avatars that users fill in quickly , Avoid repeated pop ups 
    wx.getUserProfile({
      desc: ' Display user information ', //  Declare the purpose of obtaining the user's personal information , The follow-up will be shown in the pop-up window , Please fill in carefully 
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    //  It is not recommended to use getUserInfo Get user information , Estimated from 2021 year 4 month 13 The date of ,getUserInfo Pop ups will no longer pop up , And directly return the anonymous user's personal information 
    console.log(e)
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }

 wxml:

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <block wx:if="{
   {canIUseOpenData}}">
      <view class="userinfo-avatar" bindtap="bindViewTap">
        <open-data type="userAvatarUrl"></open-data>
      </view>
      <open-data type="userNickName"></open-data>
    </block>
    <block wx:elif="{
   {!hasUserInfo}}">
      <button wx:if="{
   {canIUseGetUserProfile}}" bindtap="getUserProfile">  Sign in  </button>
      <button wx:elif="{
   {canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo">  Get head nickname  </button>
      <view wx:else>  Please use 1.4.4 And above  </view>
    </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 class="usermotto"> 
  <button > 
  <navigator url="/pages/calculator/calculator" open-type="switchTab">  Clean Calculator Beta </navigator>
  </button>
  <button class="change" > 
  <navigator url="/pages/change_/changes_" open-type="switchTab">  Conversion tool </navigator>
  </button>
  </view>
 

</view>