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


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 parseInt("08")未指定进位制问题
Jun 19 Javascript
浅谈Javascript 执行顺序
Dec 18 Javascript
禁止IE用右键的JS代码
Dec 30 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 11 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
第二节--PHP5 的对象模型
2006/11/16 PHP
通达OA公共代码 php常用检测函数
2011/12/14 PHP
PHP生成随机用户名和密码的实现代码
2013/02/27 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
js 解决“options为空或不是对象”
2008/12/22 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
NODE.JS跨域问题的完美解决方案
2016/10/20 Javascript
JS常用知识点整理
2017/01/21 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
微信小程序和百度的语音识别接口详解
2019/05/06 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
浅析Python中的序列化存储的方法
2015/04/28 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
pandas分区间,算频率的实例
2019/07/04 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
大学班级干部的自我评价分享
2014/02/10 职场文书
新手上路标语
2014/06/20 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
寒山寺导游词
2015/02/03 职场文书
求职自荐信怎么写
2015/03/04 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
学校教师培训工作总结
2015/10/14 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书