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


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 相关文章推荐
用js实现的抽象CSS圆角效果!!
May 03 Javascript
javascript 定义初始化数组函数
Sep 07 Javascript
JavaScript中__proto__与prototype的关系深入理解
Dec 04 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
indexOf 和 lastIndexOf 使用示例介绍
Sep 02 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
js实现延迟加载的几种方法
Apr 24 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
DWR内存兼容及无法调用问题解决方案
Oct 16 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 Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
php堆排序(heapsort)练习
2013/11/13 PHP
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
jquery选择器(常用选择器说明)
2010/09/28 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
基于layui的table插件进行复选框联动功能的实现方法
2019/09/19 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
js实现时间日期校验
2020/05/26 Javascript
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
质检员岗位职责
2013/12/17 职场文书
党员承诺书内容
2014/03/26 职场文书
项目经理聘任书
2014/03/29 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书