微信小程序用户授权弹窗,拒绝时提示用户重新授权
简介
我们在开发小程序的时候,如果想要获取用户信息,就需要获得授权。如果用户误点击“拒绝授权”,如何正确引导用户重新授权?今天我就告诉大家如何正确引导用户授权。
老规矩,先看效果图
从上图中可以看到,当用户点击拒绝授权时,我们会弹出一个提示框,要求用户去设置页面重新授权。当用户进入授权页面重新授权时,以后我们返回首页点击检索用户信息时,就可以成功检索到用户信息。
如下图蓝色框所示,这是成功用户的信息。
1。当我们获取用户信息时,需要用户授权
当我们点击获取用户信息时,通常会弹出如下提示框。如果用户点击取消,则无法通过点击授权按钮来检索用户的信息。 。
所以接下来要做的就是当用户拒绝授权时,将用户重定向到设置页面重新授权。
先发送代码给大家获取用户授权
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 授权获取头像昵称 </button>
其次,检查用户是否被授权
当用户点击上面定义的按钮后,我们进行权限检测。代码如下所示。
getUserInfo: function(e) {
let that = this;
// console.log(e)
// 获取用户信息
wx.getSetting({
success(res) {
// console.log("res", res)
if (res.authSetting['scope.userInfo']) {
console.log("已授权=====")
// 已经授权,可以直接调用 getUserInfo 获取头像昵称
wx.getUserInfo({
success(res) {
console.log("获取用户信息成功", res)
that.setData({
name: res.userInfo.nickName
})
},
fail(res) {
console.log("获取用户信息失败", res)
}
})
} else {
console.log("未授权=====")
that.showSettingToast("请授权")
}
}
})
},
本段代码来自 https://www.codeqd.com/post/2023091330.html
我给大家简单分析一下。
wx.getSetting:用于获取用户授权列表
if (res.authSetting['scope.userInfo']) 用户授权码成功。如果用户没有被授权,则说明授权失败。
如果授权失败,我们调用that.showSettingToast()方法
三,showSettingToast方法如下
// 打开权限设置页提示框
showSettingToast: function(e) {
wx.showModal({
title: '提示!',
confirmText: '去设置',
showCancel: false,
content: e,
success: function(res) {
if (res.confirm) {
wx.navigateTo({
url: '../setting/setting',
})
}
}
})
}
本段代码来自 https://www.codeqd.com/post/2023091330.html
该方法的作用是引导用户进入设置页面。
四,我们的设置页面
我们的设置页面非常简单,只需使用如上图所示的代码即可。
第五,进入系统设置页面
点击上面第4步中的按钮后,您将进入系统设置页面。
可以看到系统设置页面。有一个开关。当用户点击开关时,可以重新授权。
重新授权成功后,我们返回首页,可以成功获取用户信息。
至此,我们就成功实现了用户授权路由功能。
将index.wxml和index.js代码发送给大家
index.wxml
<!--index.wxml-->
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 授权获取头像昵称 </button>
<text>{{name}}</text>
index.js
//index.js
Page({
getUserInfo: function(e) {
let that = this;
// console.log(e)
// 获取用户信息
wx.getSetting({
success(res) {
// console.log("res", res)
if (res.authSetting['scope.userInfo']) {
console.log("已授权=====")
// 已经授权,可以直接调用 getUserInfo 获取头像昵称
wx.getUserInfo({
success(res) {
console.log("获取用户信息成功", res)
that.setData({
name: res.userInfo.nickName
})
},
fail(res) {
console.log("获取用户信息失败", res)
}
})
} else {
console.log("未授权=====")
that.showSettingToast("请授权")
}
}
})
},
// 打开权限设置页提示框
showSettingToast: function(e) {
wx.showModal({
title: '提示!',
confirmText: '去设置',
showCancel: false,
content: e,
success: function(res) {
if (res.confirm) {
wx.navigateTo({
url: '../setting/setting',
})
}
}
})
},
})
本段代码来自 https://www.codeqd.com/post/2023091330.html
版权声明
本文仅代表作者观点,不代表Code前端网立场。
本文系作者Code前端网发表,如需转载,请注明页面地址。
发表评论:
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。