微信小程序位置授权处理方法


Posted in Javascript onJune 13, 2019

这两天在做小程序调取地图的时候遇到一个问题,如果用户第一次拒绝了位置权限请求。那么就不会再次唤起授权弹出。需要我们引导用户去开启。

具体做法如下。 在 aap.json中加入授权配置

"permission": {
 "scope.userLocation": {
  "desc": "你的位置信息将用于小程序位置接口的效果展示"
 }
 }

在 page页面中使用,需要有几个注意的地方,初次使用的时候,去申请权限。这里我是放在onShow 方法里面。

onShow: function () {
 //初始获取定位权限
 wx.authorize({
  scope: 'scope.userLocation',
  success: (res) => {

  },
 })
 },

然后在调用地图地位。或者获取用户权限的函数去判断是否有定位权限,如果没有那么引导用户开启权限。 如下:我有一个Input去触发选择地图事件。

<input bindfocus="openMap" value='{{address}}' placeholder="点击选择详细地址"></input>

事件处理

openMap:function(e){
 var that = this
 wx.getSetting({
  success(res){
  //这里判断是否有地位权限
   if (!res.authSetting['scope.userLocation']) {
   wx.showModal({
    title: '提示',
    content: '请求获取位置权限',
    success:function(res){
    if(res.confirm==false){
     return false;
    }
    wx.openSetting({
     success(res) {
     //如果再次拒绝则返回页面并提示
     if (!res.authSetting['scope.userLocation']) {
      wx.showToast({
      title: '此功能需获取位置信息,请重新设置',
      duration: 3000,
      icon: 'none'
      })
     } else {
      //允许授权,调用地图
      that.chooseMap()
     }
     }
    })
    }
   }) 
   } else {
   //如果有定位权限,调用地图
   that.chooseMap()
   }

  }

 })
 },

 chooseMap(){
 var that = this
 wx.chooseLocation({
  success: function (res) {
  that.setData({
   address: res.address,
   latitude: res.latitude,
   longitude: res.longitude
  })
  },
  fail: function (res) {
  console.log(res)
  }
 })
 },

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
jQuery之ajax删除详解
Feb 27 Javascript
html的DOM中Event对象onblur事件用法实例
Jan 21 Javascript
js倒计时抢购实例
Dec 20 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
js 索引下标之li集合绑定点击事件
Jan 12 Javascript
使用vue-router设置每个页面的title方法
Feb 11 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 Javascript
详解Vue取消eslint语法限制
Aug 04 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 Javascript
json数据格式常见操作示例
Jun 13 #Javascript
微信小程序实现渐入渐出动画效果
Jun 13 #Javascript
微信小程序前端自定义分享的实现方法
Jun 13 #Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 #Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 #Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 #Javascript
深入了解JavaScript代码覆盖
Jun 13 #Javascript
You might like
php-fpm配置详解
2014/02/12 PHP
php7下的filesize函数
2019/09/30 PHP
Javascript 中介者模式实例
2009/12/16 Javascript
js浮动图片的动态效果
2013/07/10 Javascript
js用Date对象的setDate()函数对日期进行加减操作
2014/09/18 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
JavaScript判断浏览器及其版本信息
2017/01/20 Javascript
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
Vuex中mutations与actions的区别详解
2018/03/01 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
详解python tkinter 图片插入问题
2020/09/03 Python
python中count函数知识点浅析
2020/12/17 Python
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
一道Delphi上机题
2012/06/04 面试题
暑期研修感言
2014/02/17 职场文书
诚信考试承诺书
2014/03/27 职场文书
出纳担保书范文
2014/04/02 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
部队个人年终总结
2015/03/02 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
小学数学教师研修日志
2015/11/13 职场文书
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python