How does the WeChat applet realize simultaneous authorization of user information and mobile phone numbers without repeated authorization

I believe that many friends have encountered the operation of obtaining user information and mobile phone number at the same time when clicking a button and not repeating authorization after authorization. Share my method~

<!--index.wxml-->
<!--showPopPhone 判断手机号码是否授权,初始为true-->
<!--showAuth 判断用户信息是否授权,初始为true-->
<!--用户信息和手机号码均未授权时显示-->
<button plain="true" wx:if="{
     
     {showPopPhone && showAuth}}" bindtap="getUserInfo" open-type='getPhoneNumber' bindgetphonenumber="getPhoneNumber" >
  授权1
</button>
<!--用户信息授权，手机号码未授权时显示-->
<button plain="true" wx:else-if="{
     
     {showPopPhone && !showAuth}}" open-type='getPhoneNumber' bindgetphonenumber="getPhoneNumber">
  授权2
</button>
<!--用户信息未授权，手机号码授权时显示-->
<button plain="true" wx:else-if="{
     
     {!showPopPhone && showAuth}}" bindtap="getUserInfo">
  授权3
</button>
<!--用户信息和手机号码均授权时显示-->
<button plain="true" wx:else-if="{
     
     {!showPopPhone && !showAuth}}" bindtap="saveData">
  授权4
</button>

To implement a button to authorize user information and mobile phone number at the same time without repeated authorization, first, write four button buttons with the same style, which are divided into the following four situations:

1. If neither the user information nor the mobile phone number is authorized, the displayed button must include the authorized user information event bindtap="getUserInfo"and the authorized mobile phone number event open-type='getPhoneNumber' bindgetphonenumber="getPhoneNumber", and the authorization pop-up box will pop up in order according to the authorized user information and authorized mobile phone number;
2. If the user information is authorized and the mobile phone number is not authorized, the displayed button only needs to include the authorized mobile number event open-type='getPhoneNumber' bindgetphonenumber="getPhoneNumber", and only the pop-up box for the authorized mobile number will pop up;
3. If the user information is not authorized, when the mobile phone number is authorized, the displayed button only needs to include the authorized user information event bindtap="getUserInfo", and only the authorized user information pop-up box will pop up;
4. If the user information and mobile phone number are both authorized and displayed, the displayed button only needs to directly call the event of the interface for obtaining the mobile phone number bindtap="saveData", and the authorization pop-up box will not pop up;

/**
 * index.js
 */
import api from "../../api"; //引入api.js文件
const app = getApp(); //getApp()函数是小程序原生提供的函数方法，用于从页面获取 App 实例对象
Page({
    
    
  /**
   * 页面的初始数据
   */
  data: {
    
    
   	encryptedData: '',
    iv: '',
  	showPopPhone:true,
  	showAuth:true
  },
  getUserInfo () {
    
    
    wx.getUserProfile({
    
    
      desc: '用户授权',
      success: (res) => {
    
    
        wx.setStorageSync("userInfo", res.userInfo);
        this.setData({
    
    
          showAuth: false,
          userInfo: res.userInfo
        })
      }     
    })
  },
  getPhoneNumber (e) {
    
    
    const that = this;
    // 如果未授权用户信息
    if (this.data.showAuth) {
    
    
      wx.showToast({
    
    
        title: "未授权用户信息，请重新授权",
        icon: 'none'
      })
      return;
    }
    //未授权手机号时
    that.setData({
    
    
      wxPhoneEncrypted: {
    
    
        encryptedData: e.detail.encryptedData,
        iv: e.detail.iv
      }
    });
    if (!e.detail.iv) {
    
    
      return;
    }
    that.saveData();
  },
  //授权手机号后调用获取手机号的接口
  saveData () {
    
    
    wx.showLoading();
    const {
    
     wxPhoneEncrypted } = this.data;
    var loginInfo = wx.getStorageSync("loginInfo");
    var userInfo = wx.getStorageSync("userInfo")
    app.post(
        api.getPhoneNumber, //获取手机号接口
        {
    
    
          "encryptedData": wxPhoneEncrypted.encryptedData,
          "iv": wxPhoneEncrypted.iv,
          "sessionKey": loginInfo.sessionKey,
          "openId": loginInfo.openId,
          "userInfo": userInfo
        }
      ) .then((res) => {
    
    
        if (res.phoneNumber) {
    
    
          loginInfo.phoneNumber = res.phoneNumber;
          loginInfo.token = res.token
          wx.setStorageSync('loginInfo', JSON.stringify(loginInfo));
          this.setData({
    
    
            showPopPhone: false,
            phone: res.phoneNumber
          })
        }
      }).catch((error) => {
    
    
        wx.hideLoading({
    
    
        
        })
      });
  }
 })

Of course, if it can be divided into two steps and the user information authorization and mobile phone number authorization can be performed step by step with two buttons, it will be relatively simple!

For the content of authorized user information, please refer to the article: wx.getUserInfo for WeChat Mini Program Authorization to Obtain User Information Switch to the use of wx.getUserProfile

If it is helpful to you, you can bookmark it~, if there is a better way, welcome to comment and leave a message to learn from each other!