微信小程序用户位置权限的获取方法(拒绝后提醒)


Posted in Javascript onNovember 15, 2018

微信小程序获取用户当前位置有三个方式:

1. wx.getLocation(多与wx.openLocation一起用)

获取当前的精度、纬度、速度。不需要授权。当type设置为gcj02 返回可用于wx.openLocation的坐标

2. wx.chooseLocation

需要授权,打开地图选择位置

第一次调用方法时先出现

微信小程序用户位置权限的获取方法(拒绝后提醒)

允许权限之后之后再出现

微信小程序用户位置权限的获取方法(拒绝后提醒)

如果第一次就不允许,则一直调用wx.chooseLocation的fail方法

3. wx.openLocation

需要授权,使用微信内置地图查看位置。多半用于查看起点到终点的路线怎么走

微信小程序用户位置权限的获取方法(拒绝后提醒)

授权方法有三种:

1. wx.getSetting

获取用户的当前设置,返回值中只会出现小程序已经向用户请求过的权限,类似下面的样子

微信小程序用户位置权限的获取方法(拒绝后提醒)

2. wx.openSetting

调起权限设置选择界面,设置界面只会出现小程序已经向用户请求过的权限,类似下面的样子

微信小程序用户位置权限的获取方法(拒绝后提醒)

3. wx.authorize

提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据,但不会实际调用对应接口。如果用户之前已经同意授权,则不会出现弹窗,直接返回成功。,类似下面的样子

微信小程序用户位置权限的获取方法(拒绝后提醒)

这就是wx.authorize出现的内容

问题来了:假如我第一次使用wx.chooseLocation()获取权限被拒绝,然后使用wx.getSetting()来重新获取权限该怎么做呢?

思路:wx.chooseLocation()有fail方法,如果第一次拒绝之后,以后调用选择地图都是触发的这个,那么我可以在fail方法里面,使用wx.getSetting(),这样就每次都能判断是否已经给与了权限了。

第一步:由于有可能会多次使用定位的方法,所以我把定位的方法写到App.js中,方便调用

App({
 //获取用户地理位置权限
 getPermission:function(obj){
  wx.chooseLocation({
  success: function (res) { 
   obj.setData({
    addr: res.address  //调用成功直接设置地址
   })    
  },
  fail:function(){
   wx.getSetting({
    success: function (res) {
     var statu = res.authSetting;
     if (!statu['scope.userLocation']) {
      wx.showModal({
       title: '是否授权当前位置',
       content: '需要获取您的地理位置,请确认授权,否则地图功能将无法使用',
       success: function (tip) {
        if (tip.confirm) {
         wx.openSetting({
          success: function (data) {
           if (data.authSetting["scope.userLocation"] === true) {
            wx.showToast({
             title: '授权成功',
             icon: 'success',
             duration: 1000
            })
            //授权成功之后,再调用chooseLocation选择地方
            wx.chooseLocation({
             success: function(res) {
              obj.setData({
               addr: res.address
              })
             },
            })
           } else {
            wx.showToast({
             title: '授权失败',
             icon: 'success',
             duration: 1000
            })
           }
          }
         })
        }
       }
      })
     }
    },
    fail: function (res) {
     wx.showToast({
      title: '调用授权窗口失败',
      icon: 'success',
      duration: 1000
     })
    }
   })
  }
 })  
 },
})

第二步:在需要获取地址的页面中:

var app = getApp();
Page({
 data:{
  addr:'请选择位置'   
 },
 //选择获取地理位置
 getAddress:function(){
   var that=this;
  app.getPermission(that); //传入that值可以在app.js页面直接设置内容 
 }, 
})

最终效果图:

微信小程序用户位置权限的获取方法(拒绝后提醒)

最终在手机上获取到的位置偏差不太大。

--------------------------------------------------------------------------------

更新 wx.openSetting 的注意事项。

2.3.0 版本开始,用户发生点击行为后,才可以跳转打开设置页,管理授权信息

即2.3.0版本之后,我通过上面的wx.showModal的回调函数来调用wx.openSetting 会发生下面的错误:

openSetting:fail can only be invoked by user TAP gesture.

但是我测试 2.2.4 开始 到2.3.1 都会出现上面这种错误。

2.3.2及以上又不会出现这种问题。。。。。。。。

而且当我测试2.0.8 到 2.2.3 会出现下面的错误。。。。。。

微信小程序用户位置权限的获取方法(拒绝后提醒)

其它的就没有这问题了。搞不懂。。。

总结

以上所述是小编给大家介绍的微信小程序用户位置权限的获取方法(拒绝后提醒),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
js获取Get值的方法
Sep 29 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
vue中keep-alive的用法及问题描述
May 15 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
判断iOS、Android以及PC端的示例代码
Nov 15 #Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 #jQuery
详解ES6 Fetch API HTTP请求实用指南
Nov 14 #Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
Nov 14 #Javascript
微信小程序中遇到的iOS兼容性问题小结
Nov 14 #Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 #Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 #Javascript
You might like
php实现模拟post请求用法实例
2015/07/11 PHP
PDO实现学生管理系统
2020/03/21 PHP
对xmlHttp对象的理解
2011/01/17 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
JS实现的视频弹幕效果示例
2018/08/17 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
2020/02/03 Javascript
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
Python中如何导入类示例详解
2019/04/17 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
利用Python实现Shp格式向GeoJSON的转换方法
2019/07/09 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
大学生自我鉴定
2013/12/08 职场文书
新年寄语大全
2014/04/12 职场文书
环卫工人节活动总结
2014/08/29 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
灵魂歌王观后感
2015/06/17 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
考试后的感想
2015/08/07 职场文书