微信H5 页面定位权限处理

‍ 写在开头点赞 收藏 学会适用场景微信浏览器打开的 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() 获取实时坐标如果对您有所帮助欢迎您点个关注我会定时更新技术文档大家一起讨论学习一起进步。