小程序地理位置权限申请+uniapp调用uni.getLocation

一、小程序地理位置权限申请

登录 微信公众平台

  1. 需要确保小程序类目已经填写
    点击左侧导航栏找到最后的“设置”——“基本设置”——“前往填写”
    在这里插入图片描述

  2. 在开发管理——接口设置——地理位置中可以看到:在这里插入图片描述
    即可点击想要申请权限的接口相应的开通按钮填写申请信息(图为我已经申请通过wx.getLocation)
    注意:如果上一步没有做,这里看不到开通按钮。

  3. 开始填写申请信息
    在这里插入图片描述

我在这里填写的就是图上这两项,根据实际需求填写。以下是我的申请接口理由,仅供参考:

当前业务涉及员工签到功能,需校验签到位置是否在规定范围内,判断当前能否签到成功,完成在线办公业务场景闭环。

图片上传了3张。(在别的帖子看到要选好图片,不能一眼看出来是在测试环境,而是正常使用的生产环境)
提交之后大概5分钟以内就审核通过了,没有提醒,需要自己刷新页面查看。

二、uniapp调用uni.getLocation

  1. 在需要调用地理位置接口的方法中调用(比如对于我的业务来说,在点击签到按钮的时候调用):
uni.getLocation({
	type: 'wgs84',
	success: function(resp) {
		console.log("获取经纬度成功");
		let latitude = resp.latitude;
		let longitude = resp.longitude;
		console.log(latitude);
		console.log(longitude);
	},
	fail: function(resp) {
		console.log("获取经纬度失败");
		console.log(resp);
	}
})
  1. 需要在uniapp项目的manifest.json增加配置:
    mp-weixin对象中添加:
"requiredPrivateInfos": [
	"chooseLocation", "getLocation"
	],
"permission" : {
	"scope.userLocation": {
		"desc": "您的位置将用于小程序校验签到位置"
	}
}

注意requiredPrivateInfospermission都是必须的。

参考链接:
https://qz.fkw.com/news/1153471.html

https://mp.weixin.qq.com/cgi-bin/announce?action=getannouncement&announce_id=11654156749XzY2c&version=&lang=zh_CN&token=

### 解决 UniApp 在 H5 环境下调用 `uni.getLocation` 无响应的问题 #### 一、原因分析 当在H5环境中尝试通过`uni.getLocation`获取地理位置时,可能会因为多种因素导致该API调用不成功,并且不会抛出错误或继续执行后续逻辑,造成程序卡死现象[^1]。具体来说: - 用户设备GPS未开启或者信号弱可能导致定位请求超时; - 浏览器环境下的权限设置不当也可能阻止此功能正常运作。 #### 二、解决方案概述 为了有效处理上述情况并确保应用能够优雅降级,在实现过程中应考虑以下几个方面: #### 三、具体的改进措施 ##### 1. 设置合理的超时机制 为了避免长时间等待而导致用户体验受损的情况发生,可以在发起地理信息服务之前设定一个最大允许的时间间隔。一旦超过这个时间,则认为此次操作失败,并触发相应的提示给用户知道当前状态以及如何解决问题。 ```javascript let timeoutId; const getLocationWithTimeout = (successCallback, errorCallback) => { const TIMEOUT_DURATION = 5000; // 超时时间为5秒 timeoutId = setTimeout(() => { clearTimeout(timeoutId); if(errorCallback){ errorCallback({message:"获取位置信息超时"}); } }, TIMEOUT_DURATION); uni.getLocation({ type: 'wgs84', success(res) { clearTimeout(timeoutId); successCallback && successCallback(res); }, fail(err) { clearTimeout(timeoutId); errorCallback && errorCallback(err); } }); }; ``` ##### 2. 显示友好的反馈信息 无论是因为网络连接问题还是其他任何异常状况引起的失败情形下,都应该向用户提供清晰易懂的信息告知他们发生了什么,并指导下一步该如何做才能恢复正常的流程运转。 ```html <div id="location-status"></div> <script> // ... 上述定义的函数 ... getLocationWithTimeout( res => document.getElementById('location-status').innerText='已获得您的当前位置。', err => document.getElementById('location-status').innerText=`未能取得您所在地点的数据:${err.message}` ); </script> ``` ##### 3. 检查浏览器兼容性和权限授予情况 对于某些特定版本号以上的Webkit内核浏览器而言,可能还需要额外确认是否已经获得了必要的访问许可;另外也要注意不同平台间可能存在差异化的表现形式,因此建议开发者们多加留意目标受众群体所使用的主流客户端特性。 根据微信官方文档说明,如果是在微信内置浏览器中运行的应用遇到了此类难题的话,那么很可能是因为缺少了对私有接口声明的缘故[^4]。此时应当按照指引补充相应字段至项目的配置文件当中去。 ##### 4. 针对新旧版微信的不同行为调整策略 考虑到部分较新的微信版本可能出现无法正常使用`uni.getLocation()`的现象,这通常与小程序框架内部的变化有关联。针对这一类特殊案例,除了参照官方给出的最佳实践之外,还可以尝试引入条件编译语句来区分对待不同的终端环境,从而达到更好的适配效果[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值