微信小程序出现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 相关文章推荐
扩展javascript的Date方法实现代码(prototype)
Nov 20 Javascript
JS冒泡事件的快速解决方法
Dec 16 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
vuex提交state&&实时监听state数据的改变方法
Sep 16 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
Apr 22 Javascript
jquery实现简单拖拽效果
Jul 20 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
php empty函数判断mysql表单是否为空
2010/04/12 PHP
解析PHP跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
在IE下获取object(ActiveX)的Param的代码
2009/09/15 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
2010/04/01 Javascript
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
2019/07/16 jQuery
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
Python实现曲线点抽稀算法的示例
2017/10/12 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
广州品高软件.net笔面试题目
2012/04/18 面试题
UDP协议功能
2013/01/06 面试题
12岁生日感言
2014/01/21 职场文书
小学生环保标语
2014/06/13 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
2016年十一促销广告语
2016/01/28 职场文书
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers