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

前言

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

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

在 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)
  },

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

(0)

相关推荐

  • 微信小程序实现授权登录

    前言:由于微信官方修改了 getUserInfo 接口,所以现在无法实现一进入微信小程序就弹出授权窗口,只能通过 button 去触发.官方连接:点击打开链接 1.实现思路 自己写一个微信授权登录页面让用户实现点击的功能,也就是实现了通过 button 组件去触发 getUserInof 接口.在用户进入微信小程序的时候,判断用户是否授权了,如果没有授权的话就显示下面"界面简介"的第一个图,让用户去执行授权的操作.如果已经授权了,则直接跳过这个页面,进入首页. 2.界面简介 3.源码

  • 微信小程序 授权登录详解(附完整源码)

    一.前言 由于微信官方修改了 getUserInfo 接口,所以现在无法实现一进入微信小程序就弹出授权窗口,只能通过 button 去触发. 官方连接:https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01 二.实现思路 自己写一个微信授权登录页面让用户实现点击的功能,也就是实现了通过 button 组件去触发 getUserInof 接口.在用户进入微信小程序的时候,判断用户是否

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

    前言 我们在开发小程序时,如果想获取用户信息,就需要获取用的授权,如果用户误点了拒绝授权,我们怎么样去正确的引导用户重新授权呢.今天就来给大家讲讲如果正确的引导用户授权. 老规矩,先看效果图 从上图可以看出,我们在用户点击拒绝授权时,我们会弹出一个提示框,提示用户去设置页重新授权,当用户去授权页重新授权以后,我们再回到首页,点击获取用户信息时,就可以成功的获取到用户信息了. 如下图蓝色框里,就是我们成功的获取的用户信息.   一,我们获取用户信息的时候需要用户授权 我们点击获取用户信息时,通常会

  • 微信小程序用户授权,以及判断登录是否过期的方法

    初始界面: 判断用户是否过期(如果未过期则重新登录): 获取用户信息: 获取用户的信息并在前台显示: 主要实现两个功能: ①判断登录是否过期,如果过期则就重新登录,如果没过期就提示未过期 ②获取用户的信息,并在前台显示 index.wxml <button bindtap="login">登录</button> <button bindtap="checksession">登录是否过期</button> <but

  • 微信小程序判断用户是否需要再次授权获取个人信息

    一.index.js设置如下 //获取用户的授权信息,放到本地缓存中 wx.getSetting({ success: (res) => { if(res.authSetting['scope.userInfo']) { wx.setStorage({ key: 'can_getuserinfo', data: 1, }) } else { wx.setStorage({ key: 'can_getuserinfo', data: 0, }) } } }), //1:从本地缓存中获取数据,如果获

  • 微信小程序用户授权、位置授权及获取微信绑定手机号

    1.位置授权 位置授权相对简单,可以直接调用方法wx.getLocation()就可以弹出授权框, 在调用前需要在app.json中设置用途说明 Page({ "permission": { "scope.userLocation": { "desc": "你的位置信息将用于xxx" } } }) 授权框 但是存在不少用户会拒绝授权,如果拒绝授权就不会再弹窗,而是直接进入接口 fail 回调,就要手动授权,我们可以通过自定义弹

  • uni-app之APP和小程序微信授权方法

    uni-app 介绍 uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架. 适用平台:Android.iOS.微信小程序.实现了一套代码,同时发布到Android.iOS.微信小程序. 参考官方:https://uniapp.dcloud.io/ APP微信授权 检测服务商 检测手机上是否安装微信.QQ.新浪微博等. uni.getProvider({ service: 'oauth', success: function (res) { console.log(res.prov

  • 微信小程序位置授权处理方法

    这两天在做小程序调取地图的时候遇到一个问题,如果用户第一次拒绝了位置权限请求.那么就不会再次唤起授权弹出.需要我们引导用户去开启. 具体做法如下. 在 aap.json中加入授权配置 "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" } } 在 page页面中使用,需要有几个注意的地方,初次使用的时候,去申请权限.这里我是放在onSh

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

    前言 小程序开发中,现在一般都需要获取微信用户信息,如头像/名字等.这样在用户第一次进入小程序时,微信端会弹出一个是否同意授权的消息提示框.但是如果用户第一时间点击了拒绝,或者用户手误点击了拒绝,如果没有了后续的操作,可能你的小程序就不能使用了,也就会失去这样一位用户. 所以,微信官方推荐了一个方法,就是在用户第一次拒绝授权的时候,再给用户一个选择的机会.这样能很好的解决上诉问题.下面以用户需要授权两个权限为例,方法如下: 在 APP.JS 先设置两个全局变量 .用作记录用户是否授权 //判断地

  • 微信小程序里使用SVG矢量图标方法详解

    在微信小程序开发过程中需要在小程序里使用SVG矢量图标,至于为什么要使用SVG图标相信看到这篇文章的你应该明白,如果你不明白请百度一下 微信小程序里使用SVG矢量图标有2种引入方法: 一.SVG图标转换为BASE64编码 使用 http://tools.jb51.net/transcoding/img2base64 工具把需要引入的SVG图标转换成BASE64编码 注意:生成BASE64编码时需要把开头的 data:image/svg; 修改成 data:image/svg+xml; 这个在线工

  • 微信小程序日历/日期选择插件使用方法详解

    微信小程序日历选择器插件点击日历日期可以获取到年月日,具体内容如下 wxml <view class="canlendarBgView"> <view class="canlendarView"> <view class="canlendarTopView"> <view class="leftBgView" bindtap="handleCalendar" dat

  • 微信小程序下拉框组件使用方法详解

    本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下 适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等 一.省市三级联动使用 注意mode = region,以及value = "一维数组" //.wxml <picker mode="region" bindchange="bindViewEvent" data-model="component" data-me

  • 微信小程序自定义modal弹窗组件的方法详解

    微信小程序开发中官方自带的wx.showModal,这个弹窗API有时候并不能满足我们的弹窗效果,所以往往需要自定义modal组件.下面我们进行一个自定义modal弹窗组件的开发,并进行组件的引用,组件可自定义底部是一个还是两个按钮.效果如下. 首先我们可以在跟目录下创建一个components文件夹存放所有的组件.新建一个modal文件夹,下面新建modal.js.modal.json.modal.wxml.modal.wxss四个文件. modal.wxml布局文件: <view class

  • 微信小程序分包加载代码实现方法详解

    直接在 "app.json" 中贴入代码 { "pages": [ "pages/Login/xxxx", ], "subpackages":[{ // 这里就是贴入的代码 root值可以任意改 pages同上 "root":"packageA", "pages":[ "pages/Login/bbb", "pages/Login/ccc

  • 微信小程序用户位置权限的获取方法(拒绝后提醒)

    微信小程序获取用户当前位置有三个方式: 1. wx.getLocation(多与wx.openLocation一起用) 获取当前的精度.纬度.速度.不需要授权.当type设置为gcj02 返回可用于wx.openLocation的坐标 2. wx.chooseLocation 需要授权,打开地图选择位置 第一次调用方法时先出现 允许权限之后之后再出现 如果第一次就不允许,则一直调用wx.chooseLocation的fail方法 3. wx.openLocation 需要授权,使用微信内置地图查

  • 微信小程序登录与注册功能的实现详解

    目录 小程序中的登录 用户注册 用户信息修改 总结 小程序中的登录 在小程序中有一个概念叫openid,这个相当于登录小程序用户的唯一标识,每个微信用户都不同.那要如何拿到用户的唯一标识呢?在微搭低代码中是通过调用系统的api来获取的 let userinfo = await app.utils.getWXContext() 我们通过这行代码的调用来获取到用户的唯一标识,获取到之后我们其他页面也需要使用,那就需要把他存起来.全局变量的作用域是所有页面都可见,所以我们需要在变量中定义一个全局变量叫

  • 微信小程序 开发MAP(地图)实例详解

    微信小程序 开发MAP(地图)实例详解 在创建MAP(地图)前,请各位小伙伴们认真的去了解微信小程序开发的说明. https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html#map 了解完MAP(地图)里的属性之后,接下来我们就来创建一个简单的MAP(地图)控件. 第一步:肯定是创建项目.起项目名.项目地址 PS:我这里以index的文件为名 第二步:我们来写 index.wxml 文件的代码 WXML文件代码: <map id=&quo

  • 微信小程序之网络请求简单封装实例详解

    微信小程序之网络请求简单封装实例详解 在微信小程序中实现网络请求相对于Android来说感觉简单很多,我们只需要使用其提供的API就可以解决网络请求问题. 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downloadFile) WebSocket通信(wx.connectSocket) 为了数据安全,微信小程序网络请求只支持https,当然各个参数的含义就不在细说,不熟悉的话可以:可以去阅读官方文档的网络请求api,当我们使用request

随机推荐