uni-app微信小程序uni.getLocation获取位置;authorize scope.userLocation需要在app.json中声明permission;小程序用户拒绝授权后重新授权

需求:点击按钮获取当前微信位置,以及点击拒绝授权后,下次点击还可以拉起授权窗口;

拒绝授权后重新拉起授权操作:拒绝授权后重新拉起授权:
直接授权操作:在这里插入图片描述

一、问题1:报authorize scope.userLocation需要在app.json中声明permission字段;
在这里插入图片描述
原因:因为微信小程序从2019年1月14日起新提交发布的版本若未填写地理位置用途说明,则将无法正常调用地理位置相关接口;
解决办法:manifest.json文件中,mp-weixin属性下配置permission获取地理位置的权限
在这里插入图片描述
代码如下:直接复制黏贴对应位置即可

        "permission": {
            // 获取当前的地理位置、速度 配置
            "scope.userLocation": {
                "desc": "你的位置信息将用于小程序位置接口的效果展示"
            }
        }

问题2:需要申请使用wx.getLocation的权限,否则审核代码时候会不通过。
申请相关的wx.getLocation权限
在这里插入图片描述

二、点击进行获取位置:
以上的配置好后,如果直接使用uni.getLocation()方法,不判断是否有获取的权限, 就去获取 ,那么第一次获取时候会让你授权,确认则可以获取到;但如果拒绝,则获取不到,且以后都无法唤起授权也无法获取到。
此时就遇到问题3:微信小程序如何在用户拒绝授权申请后再次拉起授权窗口?
解决方法:思路是在用户点击拒绝授权时,添加弹框wx.showModal();在弹框内再次让用户选择是否授权以及调用权限wx.openSetting();

不要慌:直接复制以下代码即可解决,记得配置permission:

<template>
  <view>
    <button type="" @click="getLocation">获取位置</button>
    <view>经度:{{x}}</view>
    <view>纬度:{{y}}</view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      x: 0,
      y: 0
    }
  },
  methods: {
    getLocation () {
      let that = this
      // 获取用户是否开启 授权获取当前的地理位置、速度的权限。
      uni.getSetting({
        success (res) {
          console.log(res)

          // 如果没有授权
          if (!res.authSetting['scope.userLocation']) {
            // 则拉起授权窗口
            uni.authorize({
              scope: 'scope.userLocation',
              success () {
                //点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
                uni.getLocation({
                  type: 'wgs84',
                  success: function (res) {
                    that.x = res.longitude
                    that.y = res.latitude
                    console.log(res)
                    console.log('当前位置的经度:' + res.longitude)
                    console.log('当前位置的纬度:' + res.latitude)
                    uni.showToast({
                      title: '当前位置的经纬度:' + res.longitude + ',' + res.latitude,
                      icon: 'success',
                      mask: true
                    })
                  }, fail (error) {
                    console.log('失败', error)
                  }
                })
              },
              fail (error) {
                //点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
                console.log('拒绝授权', error)

                uni.showModal({
                  title: '提示',
                  content: '若点击不授权,将无法使用位置功能',
                  cancelText: '不授权',
                  cancelColor: '#999',
                  confirmText: '授权',
                  confirmColor: '#f94218',
                  success (res) {
                    console.log(res)
                    if (res.confirm) {
                      // 选择弹框内授权
                      uni.openSetting({
                        success (res) {
                          console.log(res.authSetting)
                        }
                      })
                    } else if (res.cancel) {
                      // 选择弹框内 不授权
                      console.log('用户点击不授权')
                    }
                  }
                })
              }
            })
          } else {
            // 有权限则直接获取
            uni.getLocation({
              type: 'wgs84',
              success: function (res) {
                that.x = res.longitude
                that.y = res.latitude
                console.log(res)
                console.log('当前位置的经度:' + res.longitude)
                console.log('当前位置的纬度:' + res.latitude)
                uni.showToast({
                  title: '当前位置的经纬度:' + res.longitude + ',' + res.latitude,
                  icon: 'success',
                  mask: true
                })
              }, fail (error) {
                uni.showToast({
                  title: '请勿频繁调用!',
                  icon: 'none',
                })
                console.log('失败', error)
              }
            })
          }
        }
      })

    }
  },
}
</script>

<style>
</style>
  • 13
    点赞
  • 68
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
要申请微信小程序的wx.getLocation接口,你需要按照以下步骤进行操作: 1. 登录微信小程序后台,进入开发管理页面。 2. 在左侧菜单找到接口设置,点击后进入接口权限页面。 3. 在接口权限页面,找到地理位置选项,点击后面的“去开通”按钮。 4. 进入wx.getLocation接口申请页面,填写申请原因。你可以写上类似于“因当前业务涉及周边服务推荐需要,需获取用户地理位置信息。”的申请原因。 5. 其他选填项可以忽略,直接点击“提交申请”按钮。 6. 等待审核通过即可。通常情况下,审核需要1-2个工作日。 请注意,从2022年7月14日起,如果你需要在最新版本发布后使用地理位置相关接口,你需要完成接口权限开通。除了wx.getLocation接口,还有其他7个接口也需要完成准入开通流程。这些接口包括:wx.getFuzzylocation、wx.onLocationChange、wx.chooseAddress、wx.choosePoi、wx.chooseLocation、wx.startLocationUpdate、wx.startLocationUpdateBackground。 希望以上信息对你有帮助!<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [微信小程序地理位置接口( wx.getLocation )申请方法](https://blog.csdn.net/u010128829/article/details/125564248)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [微信小程序申请地理位置接口wx.getLocation不通过的应对方案 过率很高](https://blog.csdn.net/withkai44/article/details/128224230)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值