微信小程序出现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 相关文章推荐
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 Javascript
实现动画效果核心方式的js代码
Sep 27 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
Oct 24 Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
vue 组件中slot插口的具体用法
Apr 03 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 Javascript
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
在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
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
PHP面相对象中的重载与重写
2017/02/13 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
2019/06/14 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
从零学Python之入门(三)序列
2014/05/25 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
Python 实现淘宝秒杀的示例代码
2018/01/02 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
药品质量检测应届生求职信
2013/11/14 职场文书
基石观后感
2015/06/12 职场文书
小学大队长竞选稿
2015/11/20 职场文书
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android