微信H5页面定位权限处理方法示例

 更新时间:2026年06月10日 10:17:06   作者:小小闹钟  
在微信小程序中,当用户首次拒绝授权定位权限后,系统默认不会再弹出授权提示,下面这篇文章主要介绍了微信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 => {
    // 失败:提示用户手动开启
    // 文案示例:"无法获取定位,请前往手机设置 → 微信 → 位置,开启定位权限后重试"
    // 提供"重试"按钮,让用户开完权限后手动触发
  });

注意: 定位失败不应阻断整个应用,根据自己业务决定是强依赖还是降级处理。

平台差异

场景能否代码唤起授权弹窗能否跳转设置页
微信 H5首次可以,拒绝后不行不能
微信小程序首次可以,拒绝后不行能(wx.openSetting()

我的项目实现

  • 定位调用封装在 src/utils/bridge.tsgetLocation()
  • 登录并通过权限校验后,在 src/components/PermissionGuard/index.tsx 自动触发一次定位
  • 定位结果挂载到 window.userLocation,供各页面复用
  • 各业务页面(SelectStationInputConnector)直接调用 getLocation() 获取实时坐标

到此这篇关于微信H5页面定位权限处理方法的文章就介绍到这了,更多相关微信H5页面定位权限内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js实现鼠标点击页面弹出自定义文字效果

    js实现鼠标点击页面弹出自定义文字效果

    这篇文章主要为大家详细介绍了js实现鼠标点击页面弹出自定义文字效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • 使用Math.max,Math.min获取数组中的最值实例

    使用Math.max,Math.min获取数组中的最值实例

    下面小编就为大家带来一篇使用Math.max,Math.min获取数组中的最值实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • 浅谈JavaScript中的“!!”作用

    浅谈JavaScript中的“!!”作用

    这篇文章主要介绍了浅谈JavaScript中的“!!”作用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • JavaScript中exec函数用法实例分析

    JavaScript中exec函数用法实例分析

    这篇文章主要介绍了JavaScript中exec函数用法,较为详细的分析了javascript中exec函数的功能、定义及使用方法,需要的朋友可以参考下
    2015-06-06
  • 微信小程序点击左上角返回弹窗提示解决思路

    微信小程序点击左上角返回弹窗提示解决思路

    当页面表单没有提交直接返回时,要提示用户是否保存当前信息,如果已经提交就不提示了,下面小编给大家带来了微信小程序点击左上角返回弹窗提示解决思路,感兴趣的朋友一起看看吧
    2024-06-06
  • li隔行换色改进版

    li隔行换色改进版

    隔行换色非表格版不过原理可以参考下面的代码,写的很不错
    2008-05-05
  • Ajax 加载数据 练习代码

    Ajax 加载数据 练习代码

    这篇文章主要介绍了Ajax 加载数据,主要是为了查询表的显示,不用嵌入php通过ajax调用,现在手机端的更多显示功能都是通过ajax实现的
    2017-01-01
  • JavaScript使用FileSystemObject对象写入文本文件内容的方法

    JavaScript使用FileSystemObject对象写入文本文件内容的方法

    这篇文章主要介绍了JavaScript使用FileSystemObject对象写入文本文件内容的方法,实例分析了javascript使用ActiveXObject的技巧与常见问题的解决方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • document.getElementById介绍

    document.getElementById介绍

    经常使用document.getElementById,但对于更详细的细节可以参考下。
    2011-09-09
  • JS实现滑动条案例

    JS实现滑动条案例

    这篇文章主要为大家详细介绍了JS实现滑动条案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07

最新评论