微信小程序wx.opensetting废弃之后的二次授权

2019.3:小程序官方文档更新很快,提供的各种方法接口也在不断优化,继两个小程序后已经有段时间没做了,建议大家先从官方文档做起,因为之前写的博客可能已经不适用了或者已有更好的解决方式,以下正文:
最近要写小程序,发现很多api废弃不能使用的情况。如现在模拟一个需求,获取地理位置授权,用户首次进入获取其地理位置信息要先经过授权,如果用户同意那么将成功获取到其地理位置,然后页面显示一个‘获取位置信息’按钮,点击后跳到地图并标识其当前所在位置,如果开始授权时用户拒绝了,那么页面会显示一个‘授权并获取位置信息’按钮,用户点击后会跳到授权设置页面,需要用户手动设置,设置后根据设置结果,如果设置了同意那么返回后显示地图上的其所在位置,如果没有设置同意返回后还是显示‘授权并获取位置信息’按钮。
这里写图片描述
注意这里有个问题要注意,用户第一次拒绝授权弹框后短期内微信会认为用户拒绝该授权意愿并且不会再次吊起授权弹框,目前发现能够吊起授权弹框的有wx.getLocation、 wx.authorize但是用户拒绝后短期内调用这些api也不会出现授权弹框了,这里我们需要让用户二次授权,而二次授权就需要用户主动设置勾选(上图)‘使用我的地理位置’,这是这个问题的解决思路。那么看一下应该怎么写,调用这个“二次授权”设置页之前使用的api是wx.opensetting,即打开设置,这里引用别人的一段代码:

//index.js
//获取应用实例
Page({
  data: { location: {} },
  onLoad: function () {
    var that = this
    wx.getLocation({//弹出授权用户确认后获取其地理位置
      type: 'wgs84',
      success: function (res) {
        that.setData({
          location: {
            longitude: res.longitude,
            latitude: res.latitude
          }
        })
      }
    })
    //判断是否获得了用户地理位置授权
    wx.getSetting({
      success: (res) => {
        if (!res.authSetting['scope.userLocation'])
          that.openConfirm()
      }
    })
  },

  openConfirm: function () {
    wx.showModal({
      content: '检测到您没打开美团外卖的定位权限,是否去设置打开?',
      confirmText: "确认",
      cancelText: "取消",
      success: function (res) {
        console.log(res);
        //点击“确认”时打开设置页面
        if (res.confirm) {
          console.log('用户点击确认')
          wx.openSetting({
            success: (res) => { }
          })
        } else {
          console.log('用户点击取消')
        }
      }
    });
  },
})

当然这段细节的需求跟我一开始写的自己的需求有些不一样,这段代码要做的是进页面时获取地理授权位置信息,然后判断是否获取了授权,如果没有那么弹出一个提示框主动引导授权,这里认为如果是应用是获取地理位置是必须的如外卖小程序,那么引导用户二次授权是必须的,如果本应用对用户的位置可需可不需那么可以做成我一开始描述的那种需求。这里需注意到的是两个API wx.getSetting和wx.openSetting,分别是用户做了哪些授权设置和打开设置页面(我放的第一张图)。注意现在由于1.wx.openSetting已经废弃,要用button去主动触发授权(这里可以去搜小程序文档wx.openSetting),2.wx.getSetting也将要废弃所以我修改后的代码如下(根据我自己一开始的需求)

<button wx:if="{{ldata}}" bindtap='btnTap'>获取位置信息</button>
<button wx:else open-type="openSetting" bindopensetting='handler'>点击授权并获取位置信息</button>
//index.js
//获取应用实例
const app = getApp()
Page({
  data: {
    ldata:false
  },
  onLoad: function () {
// 获取位置
var that=this;
    wx.getLocation({
      type: 'gcj02',
      success: function (res) {
        var latitude = res.latitude
        var longitude = res.longitude
        that.setData({
          ldata:true,
          latitude: latitude,
          longitude: longitude
        })
      },
      fail:function(res){
        console.log('拒绝授权')
        that.setData({
          ldata:false
        })
      }
    }) 
  },
  btnTap(e){
    wx.openLocation({
      latitude: this.data.latitude,
      longitude: this.data.longitude,
      scale: 28
    })
  },
  handler:function(e){
    var that = this;
    if (!e.detail.authSetting['scope.userLocation']){
      that.setData({
        ldata:false
      })
	   }else{
          that.setData({
            ldata: true,
          })
          wx.getLocation({
            type: 'gcj02',
            success: function (res) {
              var latitude = res.latitude
              var longitude = res.longitude

              that.setData({
                latitude: latitude,
                longitude: longitude
              })
              wx.openLocation({
                latitude: latitude,
                longitude: longitude,
                scale: 28
              })
            }
          })
    }
    // wx.getSetting({
    //   success(res) {
    //     console.log('获取已授权列表', res);
    //     if (!res.authSetting['scope.userLocation']) {
    //       console.log('无位置授权')
    //       that.setData({
    //         ldata: false
    //       })
    //     }
    //     else {
    //       console.log('有位置授权')
    //       that.setData({
    //         ldata: true,
    //       })
    //       wx.getLocation({
    //         type: 'gcj02',
    //         success: function (res) {
    //           var latitude = res.latitude
    //           var longitude = res.longitude
    //           that.setData({
    //             latitude: latitude,
    //             longitude: longitude
    //           })
    //           wx.openLocation({
    //             latitude: latitude,
    //             longitude: longitude,
    //             scale: 28
    //           })
    //         }
    //       })
    //     }
    //   }
    // })
  }
})

注意的地方就是页面根据授权情况显示不同的按钮,由页面ldata参数控制,用户首次进入通过onload 中的 wx.getLocation弹框授权,如果同意ldata设置为true并保存位置信息,这时页面直接显示“获取位置信息”按钮,点击后通过btnTap事件直接打开地图,通过开始同意授权后保存的经纬度显示当前位置。 当我们再次进入后已经。
如果用户第一次拒绝了授权那么ldata设置为false,显示的是“点击授权并获取位置信息”按钮,注意这个button按钮的设置方式open-type=“openSetting” bindopensetting=‘handler’,用按钮的open-type发起打开授权设置页,bindopensetting是设置用户设置授权之后的回调,我们可在回调里判断用户勾没勾选同意授权,如果判断同意了那么ldata设置为true,之后显示的都是“获取位置信息”,不必授权直接显示地图。如果没有勾选同意那么ldata当然设置是false,之后再经过这个页面还是显示“点击授权并获取位置信息”。
最后注意的是在回调里我一开始用wx.getSetting判断用户在设置页设置的授权结果,以为即将废弃我们可以用回调函数的参数来判断e.detail.authSetting,还有别的参数可以打印出来看一下。
感触:刚接触查到很多资料也是废弃之前的东西,路漫漫其修远兮,吾将上下而求索。。

  • 8
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值