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


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 相关文章推荐
使用FlexiGrid实现Extjs表格效果方法分享
Dec 16 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
js实现微信分享代码
Oct 11 Javascript
jQuery插件passwordStrength密码强度指标详解
Jun 24 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
javascript实现Java中的Map对象功能的实例详解
Aug 21 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
8个非常实用的Vue自定义指令
Dec 15 Vue.js
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初学入门
2006/11/19 PHP
PHP生成静态页面详解
2006/11/19 PHP
php采集时被封ip的解决方法
2010/08/29 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
字符串的replace方法应用浅析
2011/12/06 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
python使用xslt提取网页数据的方法
2018/02/23 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
Python常见数字运算操作实例小结
2019/03/22 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
方正Java笔试题
2014/07/03 面试题
酒店办公室文员岗位职责
2013/12/18 职场文书
简历自我评价模版
2014/01/31 职场文书
买房委托公证书
2014/04/08 职场文书
建筑工程造价专业自荐信
2014/07/08 职场文书