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


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 相关文章推荐
代码生成器 document.write()
Apr 15 Javascript
javascript中字符串拼接需注意的问题
Jul 13 Javascript
js replace替换所有匹配的字符串
Feb 13 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
javascript基础知识分享之类与函数化
Feb 13 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
Angular4集成ng2-file-upload的上传组件
Mar 14 Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 Javascript
详解react阻止无效重渲染的多种方式
Dec 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
PHP脚本的10个技巧(7)
2006/10/09 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
复制小说文本时出现的随机乱码的去除方法
2010/09/07 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
2020/02/03 Javascript
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
Python pass详细介绍及实例代码
2016/11/24 Python
python+opencv实现阈值分割
2018/12/26 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
Django静态文件加载失败解决方案
2020/08/26 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
会计顶岗实习心得
2014/01/25 职场文书
《两只鸟蛋》教学反思
2014/02/10 职场文书
工会主席岗位责任制
2014/02/11 职场文书
数字化校园建设方案
2014/05/03 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
清洁工个人总结
2015/03/04 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
中秋联欢会主持词
2015/07/04 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
党组织结对共建协议书
2016/03/23 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
使用CSS设置滚动条样式
2022/01/18 HTML / CSS
MyBatis核心源码深度剖析SQL语句执行过程
2022/05/20 Java/Android
Spring Boot实现文件上传下载
2022/08/14 Java/Android