微信小程序如何实现同时授权用户信息和手机号码不重复授权问题

相信很多小伙伴都有遇到了在点击一个按钮时想要实现同时获取到用户信息及手机号码并且授权过后不重复授权的操作，分享一下我的方法~

<!--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>

想要实现一个按钮同时授权用户信息和手机号码并且不产生重复授权的情况，首先，写四个样式相同的button按钮，分为以下四种情况显示：

1. 若用户信息和手机号码均未授权时，显示的按钮中要包括授权用户信息事件bindtap="getUserInfo"和授权手机号事件open-type='getPhoneNumber' bindgetphonenumber="getPhoneNumber"，授权弹框会按照授权用户信息和授权手机号码依次弹出；
2. 若用户信息授权，手机号码未授权时，显示的按钮中只需包含授权手机号码事件open-type='getPhoneNumber' bindgetphonenumber="getPhoneNumber"，仅弹出授权手机号码的弹框;
3. 若用户信息未授权，手机号码授权时，显示的按钮中只需包含授权用户信息事件bindtap="getUserInfo"，仅弹出授权用户信息弹框；
4. 若用户信息和手机号码均授权时显示，显示的按钮中只需直接调用获取手机号的接口的事件bindtap="saveData"即可，不在弹出授权弹框；

/**
 * 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({
    
    
        
        })
      });
  }
 })

当然，如果能够分为两步操作由两个按钮分步进行用户信息授权和手机号码授权就比较简单了！

关于授权用户信息的内容可以参考文章：小程序微信授权获取用户信息之wx.getUserInfo 切换到 wx.getUserProfile的使用

如果对你有帮助可以收藏一下哦~，如果有更好的方式也欢迎评论留言相互学习一下！