微信小程序相关

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

2018-10-09  本文已影响72人  world_7735

最近要写小程序,发现很多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,还有别的参数可以打印出来看一下。
感触:刚接触查到很多资料也是废弃之前的东西,路漫漫其修远兮,吾将上下而求索。。

上一篇下一篇

猜你喜欢

热点阅读