微信小程序出现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 相关文章推荐
自己动手开发jQuery插件教程
Aug 25 Javascript
火狐textarea输入法的bug的触发及解决
Jul 24 Javascript
AJAX跨域请求json数据的实现方法
Nov 11 Javascript
jQuery设置与获取HTML,文本和值的简单实例
Feb 26 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 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
第1次亲密接触PHP5(1)
2006/10/09 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
php循环创建目录示例分享(php创建多级目录)
2014/03/04 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
PHP自定义错误用法示例
2016/09/28 PHP
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
python 中文字符串的处理实现代码
2009/10/25 Python
连接Python程序与MySQL的教程
2015/04/29 Python
numpy判断数值类型、过滤出数值型数据的方法
2018/06/09 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
Python HTMLTestRunner可视化报告实现过程解析
2020/04/10 Python
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
PHP引擎php.ini参数优化深入讲解
2021/03/24 PHP
毕业生动漫设计求职信
2013/10/11 职场文书
单位在职证明范本
2014/01/09 职场文书
股东出资证明书范例
2014/10/04 职场文书
城南旧事观后感
2015/06/11 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL