链接形式与跳转逻辑总览
本文从 链接形式（URL pattern） 角度出发，说明不同类型链接在项目中的跳转行为与使用场景。
一、使用场景
js
一、同项目内跳转（相对路径 / 同域路径）
router.push({ path: '/xxx/c/orderDetail', query: { orderId } });
示例
http://xxx/#/xxx/c/orderDetail?orderId=xxx
特征
- 通常以 `/#/` 或 `/path` 开头；
- 属于**SPA（单页应用）内部路由跳转**；
- 使用前端路由（如 Vue Router、React Router）控制。
实际场景
当前 H5 页面中点击"查看详情"、"订单详情"、"返回上一页"等；
页面跳转后仍处于同一个项目 WebView 中；
保持登录态、共享状态。
注意事项
不需要刷新整个页面；
不需要 window.location.href；
建议统一用路由控制跳转。
二、Web 项目跳另一 Web 项目（不同域）
示例
https://xxx.xxx.com/page/special/index.html
特征
目标地址是另一个独立的 Web 项目；
不同域名（xxx.xxx.com ≠ 当前项目）；
新项目可能不共享登录态。
window.location.href = 'https://xxx.xxx.com/page/special/index.html';
或
window.open('https://xxx.xxx.com/page/special/index.html');
实际场景
当前 Web 项目跳转到活动页 / 注册页 / 营销页；
比如"去抽奖"、"新用户领券"、"邀请好友"等；
不同团队独立维护的 H5 系统。
注意事项
若需要带登录态，可透传 token；
若需回调，添加回跳参数 redirectUrl；
若在 App 内，优先用 bridge 的 Native.openMarketingWeb方法。
三、本项目 H5 跳到另一个项目 H5（同端内互跳）
示例
https://xxx.xxx.com/h5/detail/index.html?petId=123
特征
都是 H5，但属于不同业务模块或项目；
通常通过中间跳转页或统一 Schema 调度；
需要考虑是否打开新 WebView。
打开方式
Web 内跳转：window.location.href
App 内跳转：bridge 的 Native.openMarketingWeb({ url })
实际场景
从周边商城商品订单页 → 热卖商品详情页；
从商城 H5 → 支付 H5；
从任务页 → 其他业务模块。
注意事项
保留登录态：可使用 cookie 或 token；
确保埋点参数（traceId、source）透传；
需要返回原页时，可添加 backUrl。
四、自定义 Scheme 链接（App DeepLink）
示例
lindazhuanghitch://lindazhuanghitch.com/hitch/my/coupon
lindazhuangpet://xxx.com/bifrost?name=lindazhuangPetWXSS&page=pages/shelves/goods-detail/goods-detail
特征
以 lindazhuanghitch://、lindazhuangpet:// 等开头；
Scheme 由原生注册；
主要用于 唤起 App 或 App 内部页面。
打开方式
App 内：bridge 的 Native.openMarketingWeb({ url: scheme })
浏览器中：window.location.href = scheme
实际场景
从活动页唤起 App；
从一个 App 跳到另一个 App（如从 xxxBike → xxxPet）；
从外部浏览器跳入 App。
注意事项
若用户未安装 App → 唤起失败；
可添加 fallback 逻辑跳 H5；
iOS / Android 唤起规则不同；
若在微信内需跳中间落地页（因为 Scheme 会被拦截）。
五、小程序页面路径
示例
/pages/index/index
/pages/shelves/goods-detail/goods-detail?itemId=123
特征
以 /pages/ 开头；
代表小程序内部路由；
只能在小程序环境中识别。
打开方式
// 微信
wx.miniProgram.navigateTo({ url: '/pages/index/index' });
// 支付宝
my.navigateToMiniProgram({ appId: '2021000000000016', path: '/pages/index/index' });
// 抖音
判断是否为首页 (/pages/index/index)
├─ 是 → tt.miniProgram.reLaunch({ url })
└─ 否 → tt.miniProgram.navigateTo({ url })
实际场景
在 App 内打开嵌入的小程序；
从 H5 或活动页跳转小程序；
在小程序内部做页面导航。
注意事项
不能在浏览器直接访问；
需通过小程序容器（微信 / 支付宝）；
可由原生通过 Bifrost 桥接跳入。
六、文件 / 静态资源类链接
示例
https://xxx.com/static/pdf/contract.pdf
https://cdn.xxx.com/img/banner.png
特征
直链文件资源；
可能触发下载或图片展示；
与页面跳转逻辑不同。
打开方式
图片类：<img src="">
文件类：window.open(url)
实际场景
下载合同 / 导出报表；
打开图片预览；
查看静态资源。
注意事项
某些文件需携带 token；
iOS Safari 可能不支持直接下载；
可用 <a download> 方式触发。
七、相对路径或本地锚点跳转
示例
/about
#section3
特征
页面内跳转或同项目路径；
用于 SPA 内部导航或锚点滚动。
打开方式
router.push('/about')
window.location.hash = '#section3'
实际场景
页面 tab 切换；
滚动到某模块；
帮助中心跳转。
八、唤起第三方 App 的 Scheme
示例
weixin://
alipays://platformapi/startapp?appId=2021000000000016
taobao://
特征
第三方 App 的 DeepLink；
用于跳转支付宝 / 微信 / 淘宝等外部 App。
打开方式
window.location.href = 'alipays://platformapi/startapp?appId=2021000000000016';
实际场景
从活动页跳转支付宝小程序；
从任务页跳微信；
从浏览器一键唤端。
注意事项
需在 HTTPS 下使用；
微信内可能被拦截；
建议使用中间落地页处理。二、混合场景总结对照表
| 链接形式 | 常见场景 | 推荐打开方式 | 是否可跨端 |
|---|---|---|---|
| 同项目内（hash 路由） | 内部详情页 | router.push |
✅ |
| 不同 Web 项目 | 活动页、外链 | window.location.href / Native.openMarketingWeb |
✅ |
| 不同 H5 项目 | 营销、任务跳转 | Native.openMarketingWeb |
✅ |
| App Scheme | 唤起原生 / 其他 App | Native.openMarketingWeb / window.location.href |
✅ |
| 小程序路径 | 跳小程序页面 | wx.miniProgram.navigateTo |
⚠️ 仅小程序内 |
| 静态资源 | 下载 / 图片 | window.open / <img> |
✅ |
| 外部 App Scheme | 支付宝、微信 | window.location.href |
✅ |
| 页面锚点 | 内部滚动 | hash 跳转（window.location.hash） |
✅ |
🔖 三、跳转逻辑总结
| 分类 | 本质 | 举例 | 推荐打开方式 |
|---|---|---|---|
| H5 内部路由 | 同项目路由跳转 | #/orderDetail |
router.push |
| 外部 H5 | 不同项目（如活动页、独立项目） | https://activity.xxx.com/... |
window.location.href |
| App Scheme | 原生页面 / 模块唤起 | lindazhuangpet://lindazhuangbike.com/bifrost?... |
Native.openMarketingWeb |
| 小程序路径 | 小程序内部页面跳转 | /pages/index/index |
wx.miniProgram.navigateTo |
| 第三方唤端 | 打开支付宝、微信等外部 App | alipays://... / weixin://... |
window.location.href |
| 文件资源 | 打开 PDF / 图片 / 下载 | https://cdn.xxx.com/... |
window.open |
🧩 四、推荐实践
✅ 封装统一跳转方法
建议封装一个 openLink(url) 工具函数，根据 URL 的前缀自动选择跳转策略：
#/或相对路径 →router.pushhttp(s)://→window.location.hreflindahuzngapet://等 App Scheme →Native.openMarketingWeb/pages/...→wx.miniProgram.navigateTo
✅ 在 App 内使用 Native.openMarketingWeb
保证原生容器内的 WebView 跳转行为统一、兼容埋点与唤端。
✅ 在浏览器内使用 window.location.href
更符合浏览器默认行为，能保留历史记录与刷新语义。
✅ 小程序路径单独判断
仅在小程序运行环境中调用 wx.miniProgram.navigateTo，否则需做降级处理（例如跳转至 H5 对应页）。
✅ Scheme 链接统一走中间唤端逻辑
通过中间层（如 openApp 模块）统一处理 lindazhuangpet://、alipays://、weixin:// 等 Scheme，便于日志埋点与异常处理。
⚠️ 避免直接拼写复杂 URL
推荐建立统一的「路由映射表」，通过 key 动态生成跳转地址，减少硬编码。
⚙️ 保持 traceId / source / backUrl 一致性
通过统一的参数透传机制，确保跳转链路中的埋点追踪与回跳逻辑一致。