微信小程序出现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 封装Ajax传递的数据代码
Jun 05 Javascript
基于Jquery的温度计动画效果
Jun 18 Javascript
JavaScript中的Array对象使用说明
Jan 17 Javascript
JavaScript将Table导出到Excel实现思路及代码
Mar 13 Javascript
js注入 黑客之路必备!
Sep 14 Javascript
Javascript动画效果(3)
Oct 11 Javascript
canvas红包照片实例分享
Feb 28 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 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中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
php设计模式之单例模式代码
2016/06/11 PHP
Laravel日志用法详解
2016/10/09 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
javascript中怎么做对象的类型判断
2013/11/11 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
python实现简单购物商城
2016/05/21 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
Python实现Restful API的例子
2019/08/31 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
python输出pdf文档的实例
2020/02/13 Python
python str字符串转uuid实例
2020/03/03 Python
html5弹跳球示例代码
2013/07/23 HTML / CSS
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
求职推荐信
2013/10/28 职场文书
职业规划书如何设计?
2014/01/09 职场文书
法制宣传日活动总结
2014/04/29 职场文书
教师求职信怎么写
2015/03/20 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书
导游词之无锡古运河
2019/11/14 职场文书
Python代码实现双链表
2022/05/25 Python