微信小程序用户拒绝授权的处理方法详解


Posted in Javascript onSeptember 20, 2019

前言

小程序开发中,现在一般都需要获取微信用户信息,如头像/名字等.这样在用户第一次进入小程序时,微信端会弹出一个是否同意授权的消息提示框.但是如果用户第一时间点击了拒绝,或者用户手误点击了拒绝,如果没有了后续的操作,可能你的小程序就不能使用了,也就会失去这样一位用户.

所以,微信官方推荐了一个方法,就是在用户第一次拒绝授权的时候,再给用户一个选择的机会.这样能很好的解决上诉问题.下面以用户需要授权两个权限为例,方法如下:

在 APP.JS 先设置两个全局变量 .用作记录用户是否授权

//判断地理位置是否请求成功
var locationBool;
//判断用户信息是否请求成功
var userInfoBool;

的 APP({})中

1.获取用户当前位置信息(获取成功后将数据存入缓存,方便后面使用)

//获取地理位置
  wxGetlocation: function() {
    console.log('微信获取地理')
    wx.getLocation({
      type: 'wgs84',
      //请求成功
      success: function(res) {
        locationBool = true;
        wx.setStorage({
          key: 'locationWx',
          data: {
            applatitude: res.latitude,
            applongitude: res.longitude
          }
        })
      },
      fail: function() {
        locationBool = false;
      }
    })
  },

2.获取用户资料信息:

这里需要注意的是:  现在一般开发小程序都需要做服务器登录.由于后端的解密方式的选择问题,后端可以只用用户code 解密,也有可能需要用到 encryptedData/iv 这两个参数拿去后台解密,换取用户token 来做更多的操作. 如需获取encryptedData/iv 这两个参数, 必须在微信wx.login({})之后再去获取 否则这两个参数可能会出现问题

    //获取用户信息(获取之前必须login)
    wxGetUserInfo: function() {
        console.log('微信获取用户信息')
        wx.getUserInfo({
            //请求成功
            withCredentials: true,
            success: function(data) {
                userInfoBool = true;
                wx.setStorage({
                    key: 'UserInfoWx',
                    data: data
                })
            },
            fail: function() {
                userInfoBool = false;
            }
        })
    },
logInWx: function() {
    var _this = this;
    wx.login({
      success: res => {
        console.log('微信登录')
        console.log(res)
        //如果登录成功
        var usercode = res.code; //用户code
        if (res.code) {
          wx.setStorage({
            key: 'usercode',
            data: usercode
          })          
          //请求用户信息设置缓存(获得nickname/avatarurl/gender/iv/encryptedData)
          _this.wxGetUserInfo();
        }
      }
    })
  }

在小程序中,微信提供了这样一个方法wx.openSetting({}) 他可以弹出小程序设置授权的页面.下面即是 用户拒绝授权之后的处理方法.

getPromission: function() {
    var _this = this;
    // 位置信息,用户信息中其中一个数据没有获取到(--->弹出设置界面)
    if (locationBool == false || userInfoBool == false) {
      // 显示提示弹窗(重新授权)
      wx.showModal({
        title: '用户未授权',
        content: '请开启相应的权限哦~',
        showCancel: false,
        success: res => {
          if (res.confirm) {
            //点击取消,重新获取授权
            wx.openSetting({
              success: data => {
                console.log(data)
                if (data) {
                  if (data.authSetting["scope.userInfo"] == true && data.authSetting["scope.userLocation"] == false) {
                    //再次获取用户信息
                    console.log('只获取用户信息')
                    _this.wxGetUserInfo()
                  } else if (data.authSetting["scope.userInfo"] == false && data.authSetting["scope.userLocation"] == true) {
                    //再次获取位置信息
                    _this.wxGetlocation()
                    console.log('只获取位置信息')
                  } else if (data.authSetting["scope.userInfo"] == true && data.authSetting["scope.userLocation"] == true) {
                    //再次获取用户和位置信息
                    _this.wxGetUserInfo()
                    _this.wxGetlocation()
                    console.log('获取全部信息')
                  }
                }
              },
              fail: function() {
                console.info("设置页面失败");
              }
            });
          }
        }
      });
    }
  },

然后在app.js onlaunch中

onLaunch: function(e) {
    var _this = this
    _this.wxGetlocation();
    //微信登录
    //如果没有获取数据成功.
    var timer = setInterval(function() {
      if (locationBool != undefined && userInfoBool != undefined) {
        clearInterval(timer)
        _this.getPromission();
      }
    }, 200)  
  },

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

Javascript 相关文章推荐
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
jQuery实现图片局部放大镜效果
Mar 17 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
node.js文件上传处理示例
Oct 27 Javascript
谈谈第三方App接入微信登录 解读
Dec 27 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
基于Vue生产环境部署详解
Sep 15 Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 Javascript
vue中watch的用法汇总
Dec 28 Vue.js
解决layui动态加载复选框无法选中的问题
Sep 20 #Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 #Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 #Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 #Javascript
使用layui实现树形结构的方法
Sep 20 #Javascript
生成无限制的微信小程序码的示例代码
Sep 20 #Javascript
浅谈layui分页控件field参数接收对象的问题
Sep 20 #Javascript
You might like
php获取地址栏信息的代码
2008/10/08 PHP
php header示例代码(推荐)
2010/09/08 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
PHP stripos()函数及注意事项的分析
2013/06/08 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
Yii核心验证器api详解
2016/11/23 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
Python smallseg分词用法实例分析
2015/05/28 Python
Python实现删除文件但保留指定文件
2015/06/21 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
用python批量移动文件
2021/01/14 Python
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
学校食堂采购员岗位职责
2013/12/05 职场文书
优秀毕业生求职信
2014/06/05 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
利用Python实时获取steam特惠游戏数据
2022/06/25 Python