🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
适用场景:微信浏览器打开的 H5 页面,使用 common-bridge 调用定位。
现象: h5 通过微信打开,无论是ios还是安卓首次会弹出定位功能的授权,若用户选择不授权,定位授权的弹窗就后续没办法再弹出。
看了官方社区目前也没有给出解决方案
解决方案:如果用户拒绝定位,通过弹窗文案提示引导用户去 手机设置 → 微信 → 位置 手动开启权限
流程总览
调用 bridge.invoke('getLocation') │ ▼ 是否首次请求? ┌────┴────┐ 是 否 │ │ ▼ ▼ 系统弹出 已有授权记录? 授权弹窗 ┌────┴────┐ │ 已授权 已拒绝 │ │ │ ▼ ▼ ▼ 用户选择 直接返回 直接返回 │ 坐标数据 失败, │ 不再弹窗(需指引用户如何开启) ├─ 允许一次 ──────────────► 返回坐标(本次有效,下次再弹) ├─ 使用App时允许 ──────────► 返回坐标 └─ 不允许 ────────────────► 返回失败,系统记住拒绝 (需指引用户如何开启)各情况说明
1. 首次请求(未有任何授权记录)
系统自动弹出 iOS/Android 原生授权弹窗
用户有三个选项(iOS):
允许一次:本次成功获取坐标,下次打开页面重新弹窗
使用 App 时允许:后续微信使用期间不再弹,直接返回坐标
不允许:本次失败,系统记录拒绝,后续不再弹窗
2. 已授权(允许一次 / 使用App时允许)
直接返回坐标,无弹窗
代码正常走 resolve 分支
3. 已拒绝
直接返回失败,不弹窗
代码走 reject 分支
无法通过代码重新触发授权弹窗
唯一恢复方式:用户手动去 手机设置 → 微信 → 位置 → 改为允许
4. 微信未授权系统定位(微信 App 本身没有定位权限)
调用直接失败
恢复方式:手机设置 → 微信 → 位置 → 打开
代码层处理策略
getLocation() .then(loc => { // 成功:使用坐标 }) .catch(err => { // 失败:提示用户手动开启 // 文案示例:"无法获取定位,请前往手机设置 → 微信 → 位置,开启定位权限后重试" // 提供"重试"按钮,让用户开完权限后手动触发 });注意: 定位失败不应阻断整个应用,根据自己业务决定是强依赖还是降级处理。
平台差异
我的项目实现
定位调用封装在 src/utils/bridge.ts → getLocation()
登录并通过权限校验后,在 src/components/PermissionGuard/index.tsx 自动触发一次定位
定位结果挂载到 window.userLocation,供各页面复用
各业务页面(SelectStation、InputConnector)直接调用 getLocation() 获取实时坐标
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。