微信小程序出现wx.getLocation再次授权问题的解决方法分析

 更新时间:2019年01月16日 10:22:15   作者:吴封斌技术博客  
这篇文章主要介绍了微信小程序出现wx.getLocation再次授权问题的解决方法,结合实例形式分析了解决wx.getLocation再次授权问题的相关操作步骤,需要的朋友可以参考下

本文实例讲述了微信小程序出现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弹出自己的授权框,如图

然后,点击确定即可授权,若点击取消则取消授权,当再次需要授权时,会调用我们自定义的Modal框,如图

其次,针对上述的Modal框点击取消则关闭,若点击确定则打开手机的地址授权设置,如图

最后,若直接点击左上方的返回箭头则取消授权,若先选中地理位置按钮,然后在点击左上方的返回箭头则授权成功,如图

希望本文所述对大家微信小程序开发有所帮助。

相关文章

  • javascript判断图片是否加载完成的方法推荐

    javascript判断图片是否加载完成的方法推荐

    下面小编就为大家带来一篇javascript判断图片是否加载完成的方法推荐。小编觉得挺不错的,现在分享给大家,也给大家做个参考。
    2016-05-05
  • JavaScript的console命令使用实例

    JavaScript的console命令使用实例

    这篇文章主要介绍了javascript的console命令使用实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • js常用节点操作实例总结

    js常用节点操作实例总结

    这篇文章主要介绍了js常用节点操作,结合实例形式总结分析了JavaScript针对dom节点的遍历、查找、创建、删除、克隆等相关实现技巧与注意事项,需要的朋友可以参考下
    2023-04-04
  • JavaScript实现重置表单(reset)的方法

    JavaScript实现重置表单(reset)的方法

    这篇文章主要介绍了JavaScript实现重置表单(reset)的方法,涉及javascript中reset()方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • JavaScript通过prototype给对象定义属性用法实例

    JavaScript通过prototype给对象定义属性用法实例

    这篇文章主要介绍了JavaScript通过prototype给对象定义属性用法,实例分析了prototype的功能及使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 第三篇Bootstrap网格基础

    第三篇Bootstrap网格基础

    Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,网格系统类似一个表格。接下来通过本文给大家介绍Bootstrap网格基础,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-06-06
  • wufengteam core统一中心注册器功能解析

    wufengteam core统一中心注册器功能解析

    这篇文章主要为大家介绍了wufengteam core统一中心注册器功能解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • js拦截alert对话框另类应用

    js拦截alert对话框另类应用

    alert对话框的使用给用户带来了很多的方便,而有些时候不希望让它存在,接下来介绍如何使用js拦截alert对话框,感兴趣的朋友可以了解下
    2013-01-01
  • JavaScript使用链式方法封装jQuery中CSS()方法示例

    JavaScript使用链式方法封装jQuery中CSS()方法示例

    这篇文章主要介绍了JavaScript使用链式方法封装jQuery中CSS()方法,结合具体实例形式分析了JS采用链式操作方法封住jQuery中连缀操作实现css()方法的相关技巧,需要的朋友可以参考下
    2017-04-04
  • 利用babel将es6语法转es5的简单示例

    利用babel将es6语法转es5的简单示例

    Babel是一个广泛使用的转码器,babel可以将ES6代码完美地转换为ES5代码,所以下面这篇文章就来给大家详细介绍了关于利用babel将es6语法转es5的相关资料,文章通过示例介绍的非常详细,需要的朋友可以参考下。
    2017-12-12

最新评论