链接形式与跳转逻辑总览

本文从 链接形式（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.push
http(s):// → window.location.href
lindahuzngapet:// 等 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 一致性

通过统一的参数透传机制，确保跳转链路中的埋点追踪与回跳逻辑一致。