The latest form of WeChat mini-program authorization to obtain avatar nicknames—filling in avatar nicknames

The WeChat applet authorizes user information. I don’t know if anyone is like me. I have tried everything from wx.getUserInfothe first to wx.getUserProfilethe last to obtain the user’s avatar and nickname . I blame myself for not reading the official documents carefully at the beginning, and I didn’t notice the official announcement of the applet. Enough talking, let's sort out the newly adjusted form of user information authorization.头像昵称填写头像昵称填写

Official announcement to adjust the background

In practice, it has been found that some small programs require the collection of the user’s WeChat nickname and avatar when the user first opens the small program, or require authorization in unreasonable ways such as before payment. If the user refuses to authorize, the applet or related functions cannot be used. In the case that the user's openId and unionId information has been obtained, the user's WeChat nickname and avatar are not necessary conditions for the user to use the Mini Program. In order to reduce such unreasonable forced authorization, the following adjustments are made.
insert image description here

Avatar nickname filling effect

insert image description here

Avatar nickname fill in the specific implementation

<!--index.wxml-->
<view data-weui-theme="{
     
     {theme}}">
  <button class="avatar-wrapper" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
    <image class="avatar" src="{
     
     {avatarUrl}}"></image>
  </button> 
  <form catchsubmit="formSubmit">
    <view class="row">
      <view class="text1">昵称：</view>
        <input type="nickname" class="weui-input" name="nickname" placeholder="请输入昵称"/>
    </view>
    <button type="primary" style="margin-top: 40rpx;margin-bottom: 20rpx;" form-type="submit">提交</button>
  </form>
</view>

/* index.wxss  参考 */ 
.avatar-wrapper {
    
    
  padding: 0;
  width: 56px !important;
  border-radius: 8px;
  margin-top: 40px;
  margin-bottom: 40px;
  background-color: #fff;
}

.avatar {
    
    
  display: block;
  width: 56px;
  height: 56px;
}

.container {
    
    
  display: flex;
}
.row{
    
    
   border-top: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   display: flex;
   align-items: center;
   height: 80rpx;
   padding-left: 20rpx;
}
.text1{
    
    
    flex: 2;
}
.weui-input{
    
    
    flex: 6;
}

// index.js
const app = getApp()
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({
    
    
  data: {
    
    
    avatarUrl: defaultAvatarUrl,
    theme: wx.getSystemInfoSync().theme,
  },
  onLoad() {
    
    
    wx.onThemeChange((result) => {
    
    
      this.setData({
    
    
        theme: result.theme
      })
    })
  },
  onChooseAvatar(e) {
    
    
    const {
    
     avatarUrl } = e.detail 
    this.setData({
    
    
      avatarUrl,
    })
  },
  formSubmit(e){
    
    
      console.log('昵称：',e.detail.value.nickname)
  }
})

Avatar selection

open-type The value of the button component needs to be set to chooseAvatar, after the user selects the avatar to be used, the temporary path to the avatar information can be obtained through bindchooseavatarthe event callback.
From version 2.24.4 of the basic library, if the image uploaded by the user fails the security inspection, the bindchooseavatar event will not be triggered.

Fill in nickname

type The value of the input component needs to be set to nickname, when the user enters this input, the WeChat nickname will be displayed above the keyboard.
Starting from version 2.24.4 of the basic library, when onBluran event is triggered, WeChat will asynchronously monitor the security of 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 use the button component in form-typethe submitform Collect user input.

Note:

When inputting a nickname, the WeChat nickname will only be displayed above the keyboard when the real device is demonstrated;
WeChat asynchronously performs security detection on user input content, and needs to call the server interface msgSecCheck. For details, see the official website text content security identification