Now you need to click the button to open the authorization pop-up box. Button's open type = "getUserInfo"

<button open-type="getUserInfo" @getuserinfo="bindGetUserInfo" class="btn">Determine</button>

The code is as follows: (code style, please improve according to your own design).

 <view class="page">
    <view class="give-me">
      <view class="logo">
        <image lazy-load src="{{imagePath+'logo.png'}}" wx:if="{{imagePath}}"/> 
      </view>

      <view class="title">Nice to meet you</view>
      <view class="title">Click authorize to join</view>
      <!-- Confirm button -->
      <button open-type="getUserInfo" @getuserinfo="bindGetUserInfo" class="btn">Determine</button>
    </view>
  </view>

My style:

page{
  position: fixed;
  width: 100%;
  height:100%;
  background-color:rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
  z-index: 999;
  .give-me{
    background-color: #fff;
    position: absolute;
    width: 630rpx;
    height: 550rpx;
    left: 50%;
    top: 40%;
    margin-left: -315rpx;
    margin-top: -275rpx;
    border-radius: 20rpx;
    text-align: center;
    .logo{
      height: 220rpx;
      background-image: url('https://pictest.sqplus.cn/szjs/user/images/index/bg_01.png');
      background-repeat: no-repeat;
      background-size: 630rpx 220rpx;
      image{
        width: 170rpx;
        height: 170rpx;
        padding-top: 50rpx;
      }
    }
    .title{
      font-size: 32rpx;
      color: #666;
      margin-top: 40rpx;
    }
    .title:last-child{
      margin-top: 20rpx;
    }
    .btn{
      width: 510rpx;
      height: 84rpx;
      line-height: 84rpx;
      text-align: center;
      background-color: #EB4D4E;
      border-radius: 42rpx;
      margin: 0 auto;
      margin-top: 30rpx;
      font-size: 32rpx;
      color: #fff;
    }
  }
}

The effect is: (the product is confidential and you can't see the complete screenshot, ha ha)

 

 

js: defines the bindGetUserInfo method. After the user confirms the authorization, he can get the encryptedData and iv;wx.login according to wx.getUserInfo to get the user's code. The encryptedData is the user's openid and session_key after encryption. May contain unionId. Require background decryption

Why is it possible to include unionId? Because if you don't use the wechat open platform, you will never have a unionId!!!!

The address is: https://open.weixin.qq.com/ . The decryption of encryptedDatad can be handed over to the background. The front end can also try to decrypt it. The requested address:

Https://api.weixin.qq.com/sns/jscode2session (parameters: qppid, code,encryptedData,iv).

 bindGetUserInfo(e) {
        if (e.detail.userInfo) {
            //The user pressed the allow authorization button
            var that = this;
            //Insert information about the logged in user into the database
            that.queryUserInfo(e);
            // wx.switchTab({
            //           url:'../index/index'
            // })
        } else {
            //User pressed reject button
            wx.showModal({
                title:'warning',
                content:'If you click deny authorization, you will not be able to enter the applet. Please authorize before entering!!!',
                showCancel:false,
                confirmText:'Return authorization',
                success:function(res){
                    if (res.confirm) {
                        console.log('User clicks "return to authorization"')
                    } 
                }
            })
        }
  }

queryUserInfo(e){
    var that = this;
      wx.getUserInfo({
          success: function (res) {
          console.log(res);
          var encryptedData = res.encryptedData;
          var iv = res.iv;
           wx.login({
            success: res => {
            // After getting the user's code: res.code
               that.code = res.code 
               console.log(res);
                wx.request({
                url: 'api/szmktuser/user/authorize',
                header: {
                  'content-type': 'application/x-www-form-urlencoded'
                  },// Default value,
                data: {
                  'encryptedData':encryptedData,
                  'code':that.code,
                  'iv':iv,
                }, //Parameters requested ",
                method: 'post',
                dataType: 'json',
                success: res => {
                  console.log(res);
                },
                fail: () => {
                },
                complete: () => {}
            });
             }
            });                  
        }
    });
  }