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


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实现预览待上传的本地图片
Mar 15 Javascript
jquery 单击li防止重复加载的实现代码
Dec 24 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
理解javascript中的原型和原型链
Jul 30 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
Bootstrap选项卡动态切换效果
Nov 28 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 Javascript
使用Vue调取接口,并渲染数据的示例代码
Oct 28 Javascript
vue+elementUI实现简单日历功能
Sep 24 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
自己前几天写的无限分类类
2007/02/14 PHP
PHP 批量更新网页内容实现代码
2010/01/05 PHP
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
jQuery.event兼容各浏览器的event详细解析
2013/12/18 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
多种jQuery绑定事件的实现方式
2016/06/13 Javascript
easyui-datagrid特殊字符不能显示的处理方法
2017/04/12 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
JS异步函数队列功能实例分析
2017/11/28 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
使用ECharts实现状态区间图
2018/10/25 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
Python调用C# Com dll组件实战教程
2017/10/12 Python
解决pandas中读取中文名称的csv文件报错的问题
2018/07/04 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
办公室文员工作自我鉴定
2014/09/19 职场文书
优秀员工事迹材料
2014/12/20 职场文书
好媳妇事迹材料
2014/12/24 职场文书
2015年服务员工作总结
2015/04/08 职场文书
鲁冰花观后感
2015/06/10 职场文书
javascript函数式编程基础
2021/09/15 Javascript
python实现手机推送 代码也就10行左右
2022/04/12 Python
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript