Code前端首页关于Code前端联系我们

微信小程序用户授权弹窗,拒绝时提示用户重新授权

terry 2年前 (2023-09-23) 阅读数 80 #移动小程序
开发小程序时,如果想要获取用户信息,就必须获得授权。如果用户误点击拒绝授权,我们如何正确引导用户?重新授权。今天我就告诉大家如何正确引导用户授权。有需要的朋友可以参考下面的

简介

我们在开发小程序的时候,如果想要获取用户信息,就需要获得授权。如果用户误点击“拒绝授权”,如何正确引导用户重新授权?今天我就告诉大家如何正确引导用户授权。

老规矩,先看效果图

微信小程序用户授权弹窗 拒绝时引导用户重新授权实现

从上图中可以看到,当用户点击拒绝授权时,我们会弹出一个提示框,要求用户去设置页面重新授权。当用户进入授权页面重新授权时,以后我们返回首页点击检索用户信息时,就可以成功检索到用户信息。
如下图蓝色框所示,这是成功用户的信息。

1。当我们获取用户信息时,需要用户授权

当我们点击获取用户信息时,通常会弹出如下提示框。如果用户点击取消,则无法通过点击授权按钮来检索用户的信息。 。

微信小程序用户授权弹窗 拒绝时引导用户重新授权实现

所以接下来要做的就是当用户拒绝授权时,将用户重定向到设置页面重新授权。
先发送代码给大家获取用户授权

Markup
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 授权获取头像昵称 </button>

其次,检查用户是否被授权

当用户点击上面定义的按钮后,我们进行权限检测。代码如下所示。

JavaScript
 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方法如下

JavaScript
 // 打开权限设置页提示框
 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

Markup
<!--index.wxml-->
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 授权获取头像昵称 </button>
<text>{{name}}</text>

index.js

JavaScript
//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前端网发表,如需转载,请注明页面地址。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

热门