前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序弹出用户授权弹窗,微信小程序引导用户授权,获取位置经纬度

微信小程序弹出用户授权弹窗,微信小程序引导用户授权,获取位置经纬度

作者头像
编程小石头
发布2020-10-22 11:22:50
4.1K0
发布2020-10-22 11:22:50
举报
文章被收录于专栏:小程序云开发入门

我们在开发小程序时,有些操作必须让用户授权。比如我们获取用户位置,需要用户授权位置信息。授权操作我们需要给用户弹窗提示,在用户禁用某些权限时,又要引导用户去设置页开启相应权限。我们这里就以获取经纬度为例,来带大家学会友好的引导用户授权。

老规矩,先看效果图

授权.gif

一,我们使用位置信息,就需要授权

代码语言:javascript
复制
 //校验位置权限是否打开
checkLocation() {  let that = this;  //选择位置,需要用户授权
 wx.getSetting({
  success(res) {    if (!res.authSetting['scope.userLocation']) {
    wx.authorize({      scope: 'scope.userLocation',
     success() {
      wx.showToast({ //这里提示失败原因
       title: '授权成功!',        duration: 1500
      })
     },
     fail() {
      that.showSettingToast('需要授权位置信息');
     }
    })
   }
  }
 })
},

弹窗.png

首先检验用户是否授权位置信息的权限“scope.userLocation”,如果有授权,我们就可以直接去获取用户的位置经纬度了。如果没有授权,我们就弹窗引导用户去设置页。去设置页的方法如下

代码语言:javascript
复制
 // 打开权限设置页提示框
showSettingToast: function (e) {
 wx.showModal({   title: '提示!',   confirmText: '去设置',   showCancel: false,   content: e,   success: function (res) {    if (res.confirm) {
    wx.navigateTo({      url: '../setting/setting',
    })
   }
  }
 })
},

弹窗引导用户去设置页

由于去设置页,需要用户手动触发,这里我们就用一个setting.wxml页作为过过渡页。

过渡页

我们这个过渡页的按钮,用户点击后就会去真正的授权页了。

授权页

当用户开启地理位置授权后。我们再点击获取位置,就可以获取到用户当前的经纬度了。

获取到了经纬度

完整代码如下

代码语言:javascript
复制
//index.jsPage({
getLocation() {  this.checkLocation();  let that = this;
 wx.chooseLocation({   success: function(res) {    var latitude = res.latitude    var longitude = res.longitude;
   that.setData({     address: "经纬度:" + longitude + ", " + latitude,
   })
  }
 });
}, //校验位置权限是否打开
checkLocation() {  let that = this;  //选择位置,需要用户授权
 wx.getSetting({
  success(res) {    if (!res.authSetting['scope.userLocation']) {
    wx.authorize({      scope: 'scope.userLocation',
     success() {
      wx.showToast({ //这里提示失败原因
       title: '授权成功!',        duration: 1500
      })
     },
     fail() {
      that.showSettingToast('需要授权位置信息');
     }
    })
   }
  }
 })
}, // 打开权限设置页提示框
showSettingToast: function (e) {
 wx.showModal({   title: '提示!',   confirmText: '去设置',   showCancel: false,   content: e,   success: function (res) {    if (res.confirm) {
    wx.navigateTo({      url: '../setting/setting',
    })
   }
  }
 })
},
})

到此我们就实现了小程序引导授权的全部功能,并且可以获取到用户的位置经纬度了。是不是很简单。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-02-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 编程小石头 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 老规矩,先看效果图
  • 一,我们使用位置信息,就需要授权
    • 完整代码如下
    • 到此我们就实现了小程序引导授权的全部功能,并且可以获取到用户的位置经纬度了。是不是很简单。
    相关产品与服务
    云开发 CloudBase
    云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档