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


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 相关文章推荐
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
May 26 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
Jul 18 Javascript
jQuery轮播图实例详解
Aug 15 jQuery
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 Javascript
JavaScript 面向对象基础简单示例
Oct 02 Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 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中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
javascript  删除select中的所有option的实例
2017/09/17 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
Vue前端项目部署IIS的实现
2020/01/06 Javascript
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
PyCharm设置SSH远程调试的方法
2018/07/17 Python
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
Python 实现自动导入缺失的库
2019/10/29 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
一套比较完整的软件测试人员面试题
2012/05/13 面试题
生产现场工艺工程师岗位职责
2013/11/28 职场文书
美术社团活动总结
2014/06/27 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
庆六一开幕词
2015/01/29 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers
php访问对象中的成员的实例方法
2021/11/17 PHP
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS