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


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学习笔记(十一) 正则表达式介绍
Jun 20 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
js实现手机拍照上传功能
Jan 17 Javascript
微信小程序五星评分效果实现代码
Apr 06 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
Nov 02 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
基于php常用正则表达式的整理汇总
2013/06/08 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
2013/04/11 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
2013/12/02 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
vue项目打包后打开页面空白解决办法
2018/06/29 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
2019/06/14 Javascript
Vue封装的组件全局注册并引用
2019/07/24 Javascript
js实现一个简易计算器
2020/03/30 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
对python添加模块路径的三种方法总结
2018/10/16 Python
Python如何访问字符串中的值
2020/02/09 Python
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
学生发电厂实习自我鉴定
2013/09/22 职场文书
学生实习介绍信
2014/01/15 职场文书
高中生的自我鉴定范文
2014/01/24 职场文书
小学毕业感言500字
2014/02/28 职场文书
工程索赔意向书
2014/08/30 职场文书
公证委托书格式
2014/09/13 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
费城故事观后感
2015/06/10 职场文书
在Python中如何使用yield
2021/06/07 Python
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技