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


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 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
JS字符串处理实例代码
Aug 05 Javascript
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
Angular4开发解决跨域问题详解
Aug 28 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
Jan 25 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
vue 子组件修改data或调用操作
Aug 07 Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 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初学者阅读的4本经典书籍
2016/09/23 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
javascript中的location用法简单介绍
2007/03/07 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
Python 多线程实例详解
2017/03/25 Python
python决策树之CART分类回归树详解
2017/12/20 Python
Python元字符的用法实例解析
2018/01/17 Python
Python工厂函数用法实例分析
2018/05/14 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
flask-restful使用总结
2018/12/04 Python
python使用turtle绘制国际象棋棋盘
2019/05/23 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
高中军训感言200字
2014/02/23 职场文书
《孔繁森》教学反思
2014/04/17 职场文书
代理人委托书
2014/08/01 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技