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

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

浏览量:791 时间: 来源:BeterJane

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'获取位置信息/buttonbutton 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,还有别的参数可以打印出来看一下。
感触:刚接触查到很多资料也是废弃之前的东西,路漫漫其修远兮,吾将上下而求索。。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎