微信小程序出现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 相关文章推荐
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
jquery中选择块并改变属性值的方法
Jul 31 Javascript
css配合jquery美化 select
Nov 29 Javascript
javascript常用代码段搜集
Dec 04 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
Mar 05 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
mpvue将vue项目转换为小程序
Sep 30 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 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实现验证码功能
2006/10/09 PHP
php生成html文件方法总结
2014/12/01 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
React-Native左右联动List的示例代码
2017/09/21 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
python列出目录下指定文件与子目录的方法
2015/07/03 Python
python实现ID3决策树算法
2017/12/20 Python
django 修改server端口号的方法
2018/05/14 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
C#面试常见问题
2013/02/25 面试题
结婚喜宴家长答谢词
2014/01/15 职场文书
2014年最新领导班子整改方案
2014/09/27 职场文书
护理实习生带教计划
2015/01/16 职场文书
工程部经理岗位职责
2015/02/02 职场文书
教师工作决心书
2015/02/04 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang