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


Posted in Javascript onJuly 29, 2019

前言

我们在开发小程序时,如果想获取用户信息,就需要获取用的授权,如果用户误点了拒绝授权,我们怎么样去正确的引导用户重新授权呢。今天就来给大家讲讲如果正确的引导用户授权。

老规矩,先看效果图

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

从上图可以看出,我们在用户点击拒绝授权时,我们会弹出一个提示框,提示用户去设置页重新授权,当用户去授权页重新授权以后,我们再回到首页,点击获取用户信息时,就可以成功的获取到用户信息了。
如下图蓝色框里,就是我们成功的获取的用户信息。

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

一,我们获取用户信息的时候需要用户授权

我们点击获取用户信息时,通常会弹出如下提示框,如果用户点击了取消,就再也没有办法通过点击授权按钮获取用户信息了。

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

所以接下来我们要做的就是在用户拒绝了授权时,引导用户去设置页重新授权。
把获取用户授权的代码先贴给大家

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

二,检测用户是否授权

我们在用户点击了上面定义的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("请授权")
    }
   }
  })
 },

给大家简单解析下。

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',
     })
    }
   }
  })
 }

这方法做的就是引导用户去设置页。

四,我们的设置页

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

我们的设置页其实很简单,只有上图这么一段代码。

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

五,去系统设置页

我们上面第四步的button按钮,点击以后,就会去系统设置页。

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

可以看到系统设置页,有一个开关,当用户点击开关时,就可以重新授权啦。

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

重新授权成功以后,我们回到首页,就可以成功的获取到用户信息了。

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

到这里我们就成功的实现了引导用户授权的功能了。

把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',
     })
    }
   }
  })
 },
})

有任何关于小程序的问题可以加我微信:2501902696(备注小程序)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery $.ajax入门应用二
Nov 19 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
判断横屏竖屏(三种)
Feb 13 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
Vue shopCart 组件开发详解
Jan 26 Javascript
在react中使用vuex的示例代码
Jul 30 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
js实现微信聊天界面
Aug 09 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 #Javascript
vue前后分离调起微信支付
Jul 29 #Javascript
详解vue-property-decorator使用手册
Jul 29 #Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 #Javascript
微信小程序 WXML节点信息查询详解
Jul 29 #Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 #Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 #Javascript
You might like
php jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
三种php连接access数据库方法
2013/11/11 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
jQuery Ajax页面局部加载方法汇总
2016/06/02 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
python字符串编码识别模块chardet简单应用
2015/06/15 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
sklearn线性逻辑回归和非线性逻辑回归的实现
2020/06/09 Python
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
施工安全标语
2014/06/07 职场文书
邀请函模板
2015/02/02 职场文书
团员个人总结
2015/02/26 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫