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


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 相关文章推荐
JS基础之undefined与null的区别分析
Aug 08 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
JavaScript模板入门介绍
Sep 26 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
js中常用的Math方法总结
Jan 12 Javascript
Javascript获取某个月的天数
May 30 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 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 studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
php利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
php 错误处理经验分享
2011/10/11 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
Thinkphp 框架基础之入口文件功能、定义与用法分析
2020/04/27 PHP
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
浅谈javascript中的作用域
2012/04/07 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
2015/02/02 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
bootstrap警告框示例代码分享
2017/05/17 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
js实现随机抽奖
2020/03/19 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
Python的缺点和劣势分析
2019/11/19 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
会议活动邀请函
2014/01/27 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
人事专员岗位说明书
2014/07/29 职场文书
物理课外活动总结
2014/08/27 职场文书
授权收款委托书
2014/09/23 职场文书
数学备课组工作总结
2015/08/12 职场文书
Python天气语音播报小助手
2021/09/25 Python
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏
Go获取两个时区的时间差
2022/04/20 Golang