Absrtact: the access user interface of the applet has been changed from automatic pop-up window to active pop-up window. Although it improves the user experience, it has one more step to guide the user to authorize. What has been launched will not be affected, but it will be affected if it is launched again, so record the process.

Technological process:

1, wxml page side: (mainly a button of authorization type)

<view style='text-align: center; padding: 40rpx;' wx:if="{{sign}}">
  <image src='../../images/logo.png' mode='widthFix'></image>
</view>

<view style='padding: 20rpx;' wx:if="{{sign}}">
  <button type="primary" wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" hover-class="other-button-hover">Authorized application</button>
  <view wx:else>Please upgrade wechat version</view>
</view>

2, wxss file

image {
  width: 200rpx; 
  height: 200rpx;
}

3, js file

Page({

  /**
   * Initial data of the page
   */
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    sign:false
  },

  /**
   * Life cycle function -- listening to page loading
   */
  onLoad: function () {
    
  },

  /**
   * Life cycle function -- monitor page display
   */
  onShow: function () {
    var that = this
    // See if authorized
    var token = wx.getStorageSync('token')
    if (token == '' || token == undefined) {
      wx.getSetting({
        success: function (res) {
          if (res.authSetting['scope.userInfo']) {
            // Authorized, you can directly call getUserInfo to get the nickname of the Avatar
            that.bindGetUserInfo()
          } else {
            that.setData({
              sign: true
            })
          }
        }
      })
    }else{
    }
  },

 /**
  * Get user message
  */
  bindGetUserInfo: function (e) {
    var that = this
      // Call login interface
      wx.getUserInfo({
        success: function (res) {
          var arr = JSON.parse(res.rawData)
          var nickname = arr.nickName
          wx.login({
            success: function (res) {
              var code = res.code
            }
          })
        }
      })
  }

})

Check that if the user information has been obtained, you can directly jump to the business page and obtain the permission without authorization

Note: if you only need to obtain the user's nickname and avatar, you don't need to authorize it. This is good. You only need to use the components provided by the applet

wxml

  <view class="userinfo-lu">
  <view class="userinfo-avatar-lu">
    <open-data  type="userAvatarUrl"></open-data>
  </view>
    <open-data type="userNickName"></open-data>
  </view>

css

.userinfo-lu {
  position: relative;
  width: 750rpx;
  height: 320rpx;
  color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  margin-bottom: 20rpx;
}
 
.userinfo-avatar-lu {
  overflow:hidden;
  display: block;
  width: 160rpx;
  height: 160rpx;
  margin: 20rpx;
  margin-top: 50rpx;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}
 
.userinfo-lu text {
  font-size: 14px;
  background-color: #c0c0c0;
  border-radius:40%;
}