WeChat applet to obtain user avatar and nickname (capability to fill in avatar and nickname)

Opening Capability Adjustment Announcement

Generally speaking, the ability to authorize and obtain basic user information through buttons is gone (wx.getUserProfile and wx.getUserInfo are not available anymore), and the new version of [capability to fill in avatar and nickname] must be used.
Announcement on Adjustment of Mini Program User Avatar and Nickname Acquisition Rules

get avatar

• Get avatar code

  wxxl part

  <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
    <image class="avatar" src="{
        
        {avatarUrl}}"></image>
  </button> 
  

  js part

  Page({
        
        
    data: {
        
        
      avatarUrl: defaultAvatarUrl,
    },
    onChooseAvatar(e) {
        
        
      const {
        
         avatarUrl } = e.detail 	//获取图片临时路径
      this.setData({
        
        
        avatarUrl,
      })
    }
  })
  

Things to pay attention to when adapting the avatar

• The avatar path obtained at this time is a local path. Although it can be displayed on the page, it cannot be directly stored and used, and cannot be accessed on the browser. It needs to be uploaded to our own server, and it will be fetched from our own server every time we use it later. In fact, to put it bluntly, we used to obtain the avatar file from the WeChat server, but now we need to go to our own server to obtain it.

   wx.uploadFile({
        
        
     url: '我们自己的服务器地址', //仅为示例，非真实的接口地址
     filePath: '图片临时路径',
     name: 'uploadFile',	//自定义name
     success(res) {
        
        
       console.log('res', res);	//经自己服务器存储后，将地址返回到客户端。
     },
     fail(err) {
        
        
       console.log('err', err);
     },
     complete(cp) {
        
        
       console.log(cp);
     }
   })
  

get nickname

• Get the avatar code, set the "type" attribute in the input to 'nickname', and set a value for the "name" attribute at the same time, click the submit button to get the corresponding value according to the set name value.

 <form bindsubmit="getUserName"> <!--定义提交事件-->
   <view class="cu-form-group">
        <view class="title">昵称：</view>
        <input placeholder="请输入昵称" type="nickname" name="nickname" maxlength="32"></input>
 	</view>
 	<view class="up-bt">
        <button form-type="submit" role="button" aria-disabled="false" class="save-bt cu-btn block bg-blue margin-tb-sm lg">更新资料</button>
      </view>
 </form>

• js part

  getUserName(e) {
    
    
    console.log(e.detail.value.nickname);  //用户输入或者选择的昵称
  },

Things to pay attention to when getting a nickname

• When the user enters or selects a nickname, security monitoring will be performed asynchronously on the content entered by the user. If the security monitoring fails, WeChat will clear the content entered by the user. It is recommended that developers collect the content entered by the user through the button component whose form-type is submit in the form. content.