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


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 模式实例 观察者模式
Oct 24 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
学习JavaScript图片预加载模块
Nov 07 Javascript
10个在JavaScript开发中常遇到的BUG
Dec 18 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
利用vscode调试编译后的js代码详解
May 14 Javascript
微信小程序左滑删除功能开发案例详解
Nov 12 Javascript
详解angular2 控制视图的封装模式
Dec 27 Javascript
js实现简单的无缝轮播效果
Sep 05 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
关于文本留言本的分页代码
2006/10/09 PHP
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
对javascript继承的理解
2016/10/11 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
python网络爬虫采集联想词示例
2014/02/11 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
python 进程池pool使用详解
2020/10/15 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
管理提升方案
2014/06/04 职场文书
观看信仰心得体会
2014/09/04 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
2015年手术室工作总结
2015/05/11 职场文书
青年联谊会致辞
2015/07/31 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
教您怎么制定西餐厅运营方案 ?
2019/07/05 职场文书
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript