微信小程序出现wx.getLocation再次授权问题的解决方法分析


Posted in Javascript onJanuary 16, 2019

本文实例讲述了微信小程序出现wx.getLocation再次授权问题的解决方法。分享给大家供大家参考,具体如下:

首先,在page外定义一个公共函数用于发送获取位置的请求

var getLocation = function (that) {
 wx.getLocation({
  type: 'wgs84',
  success: function (res) {
   // 经纬度
   var latitude = res.latitude
   var longitude = res.longitude
   var aK = that.data.aK
   wx.request({
    url: 'https://api.map.baidu.com/geocoder/v2/?ak=' + aK + '&location=' + latitude + ',' + longitude + '&output=json',
    data: {},
    header: {
     'content-type': 'application/json'
    },
    success: function (res) {
     var city = res.data.result.addressComponent.city;
     that.setData({
      currentCity: city
     })
     wx.request({
      url: 'xxx' + city,
      data: {},
      header: {
       'content-type': 'application/json'
      },
      success: function (res) {
       that.setData({
        county: res.data,
       })
      },
     })
    }
   })
  },
  fail: function () {
   wx.showToast({
    title: '授权失败',
    icon: 'success',
    duration: 1000
   })
  }
 })
}

然后,在page中需要位置调用page外部的getLocation 函数

wx.getSetting({
    success: (res) => {
     if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {//非初始化进入该页面,且未授权
      wx.showModal({
       title: '是否授权当前位置',
       content: '需要获取您的地理位置,请确认授权,否则无法获取您所需数据',
       success: function (res) {
        if (res.cancel) {
         that.setData({
          isshowCIty: false
         })
         wx.showToast({
          title: '授权失败',
          icon: 'success',
          duration: 1000
         })
        } else if (res.confirm) {
         wx.openSetting({
          success: function (dataAu) {
           if (dataAu.authSetting["scope.userLocation"] == true) {
            wx.showToast({
             title: '授权成功',
             icon: 'success',
             duration: 1000
            })
            //再次授权,调用getLocationt的API
            getLocation(that);
           } else {
            wx.showToast({
             title: '授权失败',
             icon: 'success',
             duration: 1000
            })
           }
          }
         })
        }
       }
      })
     } else if (res.authSetting['scope.userLocation'] == undefined) {//初始化进入
      getLocation(that);
     }
     else { //授权后默认加载
      getLocation(that);
     }
    }
})

上述过程执行顺序为:

1.先加载wx.getLocation弹出自己的授权框,如图

微信小程序出现wx.getLocation再次授权问题的解决方法分析

然后,点击确定即可授权,若点击取消则取消授权,当再次需要授权时,会调用我们自定义的Modal框,如图

微信小程序出现wx.getLocation再次授权问题的解决方法分析

其次,针对上述的Modal框点击取消则关闭,若点击确定则打开手机的地址授权设置,如图

微信小程序出现wx.getLocation再次授权问题的解决方法分析

最后,若直接点击左上方的返回箭头则取消授权,若先选中地理位置按钮,然后在点击左上方的返回箭头则授权成功,如图

微信小程序出现wx.getLocation再次授权问题的解决方法分析

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
动态调用css文件——jquery的应用
Feb 20 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
复杂的javascript窗口分帧解析
Feb 19 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 #Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 #Javascript
Vue 样式绑定的实现方法
Jan 15 #Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 #Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 #Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 #Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 #Javascript
You might like
用PHP实现的随机广告显示代码
2007/06/14 PHP
基于php验证码函数的使用示例
2013/05/03 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
JS实现DOM删除节点操作示例
2018/04/04 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
Python的Django框架中的数据库配置指南
2015/07/17 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
python使用webdriver爬取微信公众号
2018/08/31 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
python浪漫表白源码
2019/04/05 Python
django的model操作汇整详解
2019/07/26 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
python实现图片转字符画的完整代码
2021/02/21 Python
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
如何提高JDBC的性能
2013/04/30 面试题
《鞋匠的儿子》教学反思
2014/03/02 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
退伍军人感言
2015/08/01 职场文书
2019个人半年工作总结
2019/06/21 职场文书
Python获取字典中某个key的value
2022/04/13 Python