前情

uni-app是我比较喜欢的跨平台框架,它能开发小程序/H5/APP(安卓/iOS),重要的是对前端开发友好,自带的IDE让开发体验也挺棒的,现在所在公司项目有抖音、快手、微信、支付、APP端,就是使用uni-app来开发的。

坑位

最近接手的项目是需要在下单前获取用户所有位置的GPS信息,再服务端会根据当前用户的GPS信息来判定是否给当前用户一定优惠。本以为就是调用一个API的事,但当你直接调用的时候你会发现根本无法使用。

Why?

位置信息属于用户隐私,从23年9月开始如果小程序需要获取位置信息需要去小程序管理后台:开发与服务-开发管理-接口设置-接口权限页申请地理位置api权限方才能使用。

解决方案

STEP 1:申请权限

开发与服务-开发管理-接口设置-接口权限申请权限,这里又有一小坑,微信提供了二个获取位置的接口

  1. wx.getLocation:获取当前的地理位置、速度,支持高精度定位
  2. wx.getFuzzyLocation:获取当前的模糊地理位置

在申请地理位置获取api权限的时候,你需要填二项必填项,申请理由和场景说明,官方有提供申请成功的案例

我第一感觉是申请支持高精度定位的wx.getLocation,模精定位特有接口能做的支持高精度定位也一定能实现需求,于是我就申请了wx.getLocation接口,同时针对场景截了图提交了申请,一天后发现申请不通过,于是又完善了资料再次提交又碰壁了,二天二次申请都被打回,一脸蒙逼。

搜了论坛都是说申请全被拒的,用模糊定位接口又不准,后面问了产品,我们只需要定位到市区级别行不行,产品说可以的,不用那么精确,于是转而申请wx.getFuzzyLocation,半小时时间未到就收到申请通过的短信提醒(怀疑是机审,走个过场,哈哈哈)

所以在申请接口前要跟产品确认好对于gps位置的精度要求,如果模糊定位能实现那就不要去折腾申请高精度定位的接口了,微信对wx.getLocation接口管理的比较严格,如果你确实需要高精度接口,那你就按官方提供的参考申请案例补充资料再申请吧,但是从论坛里的抱怨来看申请可能不是那么容易,如果你要申请那就多费点心吧,在此祝好。

STEP 2:填写接口权限配置

申请接口了并不就是说你就能直接调用了,你需要去app.json里补全位置权限获取说明描述和对应的接口权限注明

"permission" : {
"scope.userFuzzyLocation" : {
"desc" : "为了给用户提供更好的服务"
}
},
"requiredPrivateInfos": ["getFuzzyLocation"]

如果你是使用uni-app的话,你直接用hbuilderx以源码视图方式打开manifest.json文件,找到mp-weixin微信项配置按如下配置好

STEP 3:接口调用

查了uni-app官方文挡都没有找到uni.getFuzzyLocation接口的说明,但是你在调用的时候是可以调用的,如果你实在不放心,可以直接使用wx.getFuzzyLocation接口。

接口调用注意事项:

你调用uni/wx.getFuzzyLocation的时候如果没有授过权会弹出授权的提示弹框,只有用户同意了才能获取地理位置信息,这里如果用户拒绝就无法再次唤起授权弹框,微信会记住授权状态,所以这里如果用户选了同意,那就万事大吉了,但是如果用户选择了拒绝,那后面就一直无法再获取用户位置信息了。

如果你获取用户的位置是可有可无的,你可以把位置信息当可选项,用户不同意你就不上传即可,但是如果你需求是位置信息是必需要的,那这里你需要做一些引导,引导用户去开启权限,对于引导你又要注意二种情况,一种是小程序位置授权没开启,另一种是微信APP位置权限没开启,下面是关键代码:

uni.getFuzzyLocation({
type: 'gcj02',
success(res){
// 位置信息获取成功
// ...
},
fail(err) {
// 位置信息获取失败
if (['getLocation:fail auth deny','getLocation:fail:auth denied','getLocation:fail:system permission denied'].includes(err.errMsg)) {
if (是否是需要强制获取位置信息的) {
//小程序位置信息获取被拒绝
if (['getLocation:fail auth deny','getLocation:fail:auth denied'].includes(err.errMsg)) {
uni.showModal({
content: "为了您享受到更好的优惠,请授权位置信息后下单",
confirmText: '去授权',
cancelText: '再想想',
success(res) {
if (res.confirm) {
// 去小程序位置授权页
uni.openSetting();
} else if (res.cancel) {
console.log('小程序权授没有开启。微信用户点击取消');
}
}
})
}
// 微信位置信息获取权限没有打开
if (err.errMsg === 'getLocation:fail:system permission denied') {
uni.showModal({
content: "请确认是否已授权APP位置权限",
confirmText: '知道了',
showCancel: false,
success(res) {
console.log('微信app权限没有开启', res);
}
})
}
}
}
}
})

注:查了微信官方文挡,并没有对应的错误提示说明,我是多次测试发现的上面的错误提示加入的判断,如果你有官方的错误提示说明文挡链接,欢迎分享出来,谢谢了。

总结

使用微信的地理位置接口分三步

  1. 申请权限:按需选用wx.getFuzzyLocation(易申请)、wx.getLocation(较难申请)
  2. 填写接口权限配置:原生小程序在app.json里配置,uniapp在manifest.json里配置
  3. 接口调用:根据自己需求这里要对权限失败的场景做好引导

uni-app微信小程序GPS位置获取爬坑的更多相关文章

  1. 微信小程序之动态获取元素宽高

    我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用 ...

  2. 微信小程序案例:获取微信访问用户的openid

    在微信开发项目中,获取openid是项目常遇的问题,本文通过主要讲解实现在微信小程序中如何获取用户的openid,案例实现非常简单 具体实现方法是通过登录接口获取登录凭证,然后通过request请求微 ...

  3. [技术博客] 微信小程序的formid获取

    微信小程序的formid获取 formId的触发 微信小程序可以通过收集用户的formid,获取formid给用户主动推送微信消息.获取formid有两个途径,一个是触发一次表单提交,或者触发一次支付 ...

  4. 总结微信小程序开发中遇到的坑

    总结微信小程序开发中遇到的坑,一些坑你得一个一个的跳啊,/(ㄒoㄒ)/~~ 1,页面跳转和参数传递实例 首先说一下我遇到的需求有一个我的消息页面,里面的数据都是后端返回的,返回的数据大致如下,有一个是 ...

  5. 微信小程序那些令人眼泪汪汪的坑儿

    前言 最近做了一个麻雀虽小,五脏俱全的微信小程序项目.一看就会,一用就废的小程序.有些坑真的坑的你两眼泪汪汪.我就爱干前人栽树后人乘凉的事儿,看到文章的你,也许是同道中人,相视一笑:亦或是小程序外围人 ...

  6. 小程序——微信小程序初学踩过的坑

    微信小程序初学踩过的坑 一.前言     最近因为某些需要和个人兴趣打算开发一下微信小程序,经过在官方网站上的基本了解,我大体知道了微信小程序开发的大致过程,其实最本质的就是MVVM,借用了很多模式上 ...

  7. 微信小程序wx.getLocation()获取经纬度及JavaScript SDK调用腾讯地图API获取某一类地址

    简介 腾讯位置服务为微信小程序提供了基础的标点能力.线和圆的绘制接口等地图组件和位置展示.地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品. 在此基础上,腾讯位置服务 ...

  8. 微信小程序开发之获取用户手机号码——使用简单php接口demo进行加密数据解密

    后边要做一个微信小程序,并要能获取用户微信绑定的手机号码.而小程序开发文档上边提供的获取手机号码的接口(getPhoneNumber())返回的是密文,需要服务器端进行解密,但是官方提供的开发文档一如 ...

  9. 逍遥云天 微信小程序开发之获取用户手机号码——使用简单php接口demo进行加密数据解密

    后边要做一个微信小程序,并要能获取用户微信绑定的手机号码.而小程序开发文档上边提供的获取手机号码的接口(getPhoneNumber())返回的是密文,需要服务器端进行解密,但是官方提供的开发文档一如 ...

  10. uni-app开发经验分享二十: 微信小程序 授权登录 获取详细信息 获取手机号

    授权页面 因为微信小程序提供的 权限弹窗 只能通用户确认授权 所以可以 写一个授权页面,让用户点击 来获取用户相关信息 然后再配合后台就可以完成登录 <button class="bt ...

随机推荐

  1. 使用 Ant-Design-Vue 制作一个带图片上传功能的表单对话框

    功能需求 使用 Antdv 的 Modal 组件内嵌一个 a-form 表单,具有添加数据和图片的功能. 页面结构设计 <template> <!--Modal--> < ...

  2. 2. 解释器与PyCharm安装

    1. 解释器安装 官网 选择解释器版本 建议选择比最新版本低2~3个版本,当前选择3.10 添加到环境变量,如不勾选后续可手动配置 安装完成后已将解释器安装路径自动添加到环境变量中 将解释器安装路径添 ...

  3. USB PD和USB TYPE-C 的区别

    USB Power Delivery (USB PD) 和 USB Type-C 是两个不同但相关的技术标准,它们在功能和应用上有所区别. 1. USB Type-C 连接器标准: USB Type- ...

  4. Java实用小工具系列1---使用StringUtils分割字符串

    经常有这种情况,需要将逗号分割的字符串,比如:aaa, bbb ,ccc,但往往是人工输入的,难免会有多空格逗号情况,比如:aaa, bbb , ccc, ,,这种情况使用split会解析出不正常的结 ...

  5. 关于 vue3 中的 fragment 组件

    vue3 中的模板中只能返回一个元素 ,否则报错,使用 fragment 组件可以返回多个元素标签

  6. 43.v-if和v-for的优先级

    v-for 的优先级高 延申问题:v-for 和 v-if 为什么不能在一起使用 ? 会造成性能的浪费,因为v-for 的优先级高,所以每次渲染都会执行v-if 判断条件,浪费时间 :比如 渲染 10 ...

  7. npm install报错 Error: EACCES: permission denied

    报错内容 Unable to save binary /root/packageadmin/spring-boot-admin-2.1.6/spring-boot-admin-server-ui/no ...

  8. 云原生周刊:Kubernetes v1.29 正式发布 | 2023.12.18

    开源项目推荐 Robusta KRR Robusta KRR(Kubernetes Resource Recommender)是一个用于优化 Kubernetes 集群中资源分配的 CLI 工具.它从 ...

  9. 使用 Cilium 作为网络插件部署 K8s + KubeSphere

    Cilium 简介 Cilium 是一个用于容器网络领域的开源项目,主要是面向容器而使用,用于提供并透明地保护应用程序工作负载(如应用程序容器或进程)之间的网络连接和负载均衡. Cilium 在第 3 ...

  10. RPC框架JMH测试-chatgpt自动生成

    本文将介绍如何使用Java的JMH测试框架来测试RPC框架的性能.我们选择了Apache Dubbo作为目标RPC框架,Dubbo是一种高效的远程调用框架,它支持多种传输协议和序列化协议,并且具有很好 ...