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

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

<!--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按钮，分为以下四种情况显示：

若用户信息和手机号码均未授权时，显示的按钮中要包括授权用户信息事件bindtap="getUserInfo"和授权手机号事件open-type='getPhoneNumber' bindgetphonenumber="getPhoneNumber"，授权弹框会按照授权用户信息和授权手机号码依次弹出；
若用户信息授权，手机号码未授权时，显示的按钮中只需包含授权手机号码事件open-type='getPhoneNumber' bindgetphonenumber="getPhoneNumber"，仅弹出授权手机号码的弹框;
若用户信息未授权，手机号码授权时，显示的按钮中只需包含授权用户信息事件bindtap="getUserInfo"，仅弹出授权用户信息弹框；
若用户信息和手机号码均授权时显示，显示的按钮中只需直接调用获取手机号的接口的事件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.tokenwx.setStorageSync('loginInfo', JSON.stringify(loginInfo));this.setData({showPopPhone: false,phone: res.phoneNumber})}}).catch((error) => {wx.hideLoading({})});}})

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

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

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

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

微信小程序一个按钮同时获取用户信息和手机号码
<view class="login" bindtap='getuserInfo'><button open-type="getPhoneNumber& ...
微信小程序学习9：获取用户信息进行登录操作 wx.getUserProfile
微信小程序学习9:获取用户信息进行登录操作wx.getUserProfile 2021年4月份左右微信对获取用户的API进行了更改.使用wx.getUserInfo只能获取用户的匿名信息. 要获取用户 ...
微信小程序 - 登录获取openid和用户信息（适配getUserProfile）
GitHub Demo 地址: jh-weapp-demo 实现一些常用效果.封装通用组件和工具类小程序码微信小程序中如果需要使用微信的用户信息建立自己的用户体系,需拿到唯一标识openid,然后 ...
微信小程序app.js中获取用户信息以及为golbalData赋值的坑
代码如下: //app.js App({ globalData: { urlPath: "http://www.baidu.com//", //此处貌似必须填写搜索引擎的网址 ...
微信小程序使用表单组件实现用户信息搜集问卷调查案例
input 输入框.该组件是原生组件,使用时请注意相关限制属性类型默认值必填说明最低版本 value string 是输入框的初始内容 1.0.0 type string text ...
微信小程序真机调试,苹果用户记得打开本地网络
微信小程序真机调试,苹果用户记得打开本地网络我的真机调试一直显示:request:fail errcode:-109 cronet_error_code:-109 error_msg:net::ER ...
微信小程序使用腾讯位置服务地图选点实现地址的选取|微信小程序腾讯位置服务地图选点请求来源未被授权
效果图首先要在微信开放平台的小程序里添加插件具体配置,可以参考官方文档腾讯位置服务地图选点 | 小程序插件 | 微信公众平台 (qq.com) 同时还要申请接口的权限,不然小程序上线的时候不能 ...
微信小程序对企业，开发者，用户的影响有哪些？
微信小程序对企业,开发者,用户的影响有哪些? 作为一名开发人员,这个被媒体称为开发界大地震的事件让我们不得不思考思考. 张小龙这样定义小程序: 这也类似某些公众号,比如北京移动公众号,从这个公众号可 ...
【微信小程序系列】微信小程序简单的实现发送订阅信息
[微信小程序系列]微信小程序简单的实现发送订阅信息项目结构两个云函数一个页面获取模板注:详细内容中的参数很重要,一会要在云函数里用代码 app.js // app.js App({onLau ...

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

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

最新文章

热门文章