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


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 相关文章推荐
什么是json和jsonp,jQuery json实例详详细说明
Dec 11 Javascript
jQuery操作checkbox选择(list/table)
Apr 07 Javascript
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
基于jquery的simpleValidate简易验证插件
Jan 31 Javascript
js中window.open打开一个新的页面
Aug 10 Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 Javascript
BootStrap 附加导航组件
Jul 22 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
VuePress 中如何增加用户登录功能
Nov 29 Javascript
JavaScript实现多文件下载方法解析
Aug 07 Javascript
解决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
Zend引擎的发展 [15]
2006/10/09 PHP
PHP版自动生成文章摘要
2008/07/23 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
PHP实现15位身份证号转18位的方法分析
2019/10/16 PHP
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
Python实现的插入排序算法原理与用法实例分析
2017/11/22 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
Python Web版语音合成实例详解
2019/07/16 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
市场营销求职信范文
2014/02/21 职场文书
市场营销管理毕业生自荐信
2014/03/03 职场文书
借款担保书范文
2014/05/13 职场文书
超市创意活动方案
2014/08/15 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
产品调价通知函
2015/04/20 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
复兴之路观后感3000字
2015/06/02 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python
JVM钩子函数的使用场景详解
2021/08/23 Java/Android