微信小程序出现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获取ckeditor编辑器的值(实现代码)
Nov 18 Javascript
详解JavaScript中的every()方法
Jun 08 Javascript
元素绑定click点击事件方法
Jun 08 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
JS扩展类,克隆对象与混合类实例分析
Nov 26 Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
Mar 05 Javascript
Windows上node.js的多版本管理工具用法实例分析
Nov 06 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 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递归法读取目录及文件的方法
2015/01/30 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
Jquery颜色选择器ColorPicker实现代码
2012/11/14 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
2015/09/04 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
python求素数示例分享
2014/02/16 Python
python集合类型用法分析
2015/04/08 Python
Python安装第三方库的3种方法
2015/06/21 Python
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
python实现学生通讯录管理系统
2021/02/25 Python
岗位职责范本
2013/11/23 职场文书
护理专业毕业生自荐信范文
2014/01/05 职场文书
园林技术个人的自我评价
2014/01/08 职场文书
高中生职业规划范文
2014/03/09 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
Python使用openpyxl批量处理数据
2021/06/23 Python