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