小程序用户拒绝授权弹窗后, 如何引导再次开启?-一一网

这是我参与更文挑战的第5天，活动详情查看：更文挑战

1. 前言

在开发小程序的过程中, 经常会遇到需要获取用户信息的场景: eg:登录的时候需要获取到用户手机号;比如某多多社区团购小程序为获取用户附近的自提点、需要获取用户的位置信息等等。
这些就需要用户主动授权、既然有选择, 那么用户就有可能拒绝该授权、那么该如何引导用户重新授权呢?

2. 需求描述

接下来主要以用户拒绝了位置服务后、如何引导再次开启为话题进行讲解.
业务梳理:

一句话概括就是: 在用户点击拒绝授权时、出现个弹窗提示框提示用户去设置页重新授权; 当用户去设置页重新授权后再回到该页面, 即可获取到用户位置信息了.

2.3.0 版本开始，用户发生点击行为后，才可以跳转打开设置页，管理授权信息.

3. 前置知识

wx.getLocation: 获取当前的地理位置、速度.
wx.openSetting: 调起客户端小程序设置界面，返回用户设置的操作结果。设置界面只会出现小程序已经向用户请求过的权限。

4. 需求实现

4.1 开启位置服务权限

A. 在根目录app.json中配置如下代码, 以开启位置服务权限.

 "permission": {
    "scope.userLocation": {
      "desc": "您的位置信息将用户小程序位置接口的效果展示"
    }
  }
复制代码

若不执行该步骤、则在微信开发者工具上会出现如下提示:

B. 准备好页面测试代码

// wxml
<view bindtap="getLocation">获取用户位置信息</view>
<view wx:if="{{location}}">用户位置信息如下: 经度: {{location.latitude}}---- 纬度:{{location.longitude}}</view>
复制代码

4.2 唤醒授权弹窗

A. 实现getLocation()业务方法-获取当前的地理位置

使用第三方进行逆地址解析时, 请确认第三方服务默认的坐标系, 正确进行坐标转换.

  getLocation () {
    wx.getLocation({
      type: 'wgs84',
      altitude: false,
      success: res =>{
        console.log('接口调用成功回调->', res)
        const { latitude, longitude } = res || {}
      },
      fail: err => {
        console.log('接口调用失败回调->', err)
      },
      complete: () =>{
        console.log('接口调用结束回调-> 成功、失败都会执行')
      }
    })
  }
复制代码

至此, 你戳获取用户位置信息按钮、即可唤醒授权弹窗、大概如下图所示:

若用户在授权弹窗里点击了拒绝, 那么就再也没办法通过点击授权按钮来获取位置信息了, 这也是为什么我们需要引导到设置页的原因.

4.3 实现授权引导弹窗

A. 实现showTipsModal()业务方法-点击取消后、弹出引导弹窗
我们发现、若用户点击了拒绝, 是会在fail回调里给到信息的、故我们可在这里做手脚.

主要代码如下:

  showTipsModal (e) {
    wx.showModal({
      title: '提示',
      confirmText: '去设置',
      showCancel: false,
      content: e,
      success: function(res) {
        console.log('弹窗回调->', res)
        const { confirm } = res || {}
        if(confirm){
          console.log('点击了弹窗去设置按钮-> 可发起下一步流程')
        }
      }
    })
  }
复制代码

实现的效果图如下:

4.4 跳转原生设置页

A. 实现openLocationSetting()业务方法-去设置跳转到原生设置页

设置界面只会出现小程序已经向用户请求过的权限。

主要代码如下:

  openLocationSetting () {
    const _this = this
    const setting = 'scope.userLocation'
    wx.openSetting({
      success (res) {
        console.log('原生设置页回调->', res)
        const { authSetting } = res || {}
        // 已开启位置授权
        if (authSetting.hasOwnProperty(setting) && authSetting[setting]) {
          console.log('已成功开启位置服务->But这里没有返回任何位置信息相关信息')
        }
      },
      fail () {
        toast('获取位置信息失败，按“右上菜单 - 关于\n - 右上菜单 - 设置 - 位置信息”授权')
      }
    })
  }
复制代码

在这里选择你想要修改的项目, 比如这里我想修改位置消息权限

点击后会跳转到位置消息设置页, 如下图:

我们修改后, 比如修改为仅在小程序期间使用、会触发success回调、具体信息如下:

4.5 接收设置页回调

A. 在回调函数里面、再次获取用户位置信息即可.
这里有如下几个点需要留意下:

若用户仍不同意授权、需要有个兜底方案;
若获取定位的方法不是用户手动触发的、而是在页面onShow的时候主动触发、需要留意下用户拒绝授权再回来该页面、仍不断出现授权引导弹窗的bug -> 用户永远没法正常浏览页面 -> 处理方案: 设置个开关、仅在页面第一次show的时候出现引导弹窗、其它时候均不出现.

完整代码如下所示:

const app = getApp()
Page({
  data:{
    location: ''
  },
  getLocation () {
    wx.getLocation({
      type: 'wgs84',
      altitude: false,
      success: res =>{
        console.log('接口调用成功回调->', res)
        const { latitude, longitude } = res || {}
        this.setData({
          location: {
            latitude,
            longitude
          }
        })
      },
      fail: err => {
        console.log('接口调用失败回调->', err)
        // 拒绝了出现引导弹窗
        this.showTipsModal('请授权')
      },
      complete: () =>{
        console.log('接口调用结束回调-> 成功、失败都会执行')
      }
    })
  },
  showTipsModal (e) {
    const _this = this
    wx.showModal({
      title: '提示',
      confirmText: '去设置',
      showCancel: false,
      content: e,
      success: function(res) {
        console.log('弹窗回调->', res)
        const { confirm } = res || {}
        if(confirm){
          console.log('点击了弹窗去设置按钮-> 可发起下一步流程')
          // 跳转至原生设置页
          _this.openLocationSetting()
        }
      }
    })
  },
  openLocationSetting () {
    const _this = this
    const setting = 'scope.userLocation'
    wx.openSetting({
      success (res) {
        console.log('原生设置页回调->', res)
        const { authSetting } = res || {}
        // 已开启位置授权
        if (authSetting.hasOwnProperty(setting) && authSetting[setting]) {
          console.log('已成功开启位置服务->But这里没有返回任何位置信息相关信息')
          // 再次手动获取用户位置信息
          _this.getLocation()
        }
      },
      fail () {
        toast('获取位置信息失败，按“右上菜单 - 关于\n - 右上菜单 - 设置 - 位置信息”授权')
      }
    })
  }
})
复制代码