前端跨端跳转的全场景总结

整理了一份 📘**《前端多端跳转总结表》**，涵盖 H5、小程序、App 三端的各种跳转方式，并附带 使用建议 + 典型代码。

---

🧭 一、H5 跳转场景

场景	实现方式	说明
H5 → H5	window.location.href = url 或 router.push(url)	最常见方式，支持前进后退。
H5 → App	使用 URL Scheme（如 lindazhuangpet://...） 或 Universal Link / AppLink	- App 必须注册 URL Scheme。 - 失败时会出现 “scheme does not have a registered handler”。 - 建议带超时回退逻辑（如未安装跳官网）。
H5 → 小程序（抖音/微信/支付宝）	⚙️ 由宿主 WebView 提供 SDK： - 微信：wx.miniProgram.navigateTo({url}) - 支付宝：my.navigateToMiniProgram() - 字节：tt.miniProgram.navigateTo({url})	必须在小程序 WebView 中运行，否则无效。
H5 → 各类小程序（非 WebView 环境）	不能直接跳转 ❌	需要通过 App 容器或扫码打开。

---

📱 二、App 跳转场景

场景	实现方式	说明
App → App（同集团或外部）	URL Scheme 或 Universal Link	示例：lindazhuangpet://page/detail?id=123。 支持跨应用跳转。
App → H5	内嵌 WebView 加载 URL	比如调用：openWebView("https://example.com")。
App → 小程序（微信/支付宝/抖音）	调用宿主 SDK 打开	示例： - 微信：WXLaunchMiniProgramReq - 支付宝：APOpenMiniProgramParam - 字节：TTLaunchMiniProgramReq。
App → 自家小程序（非微信/支付宝）	内部协议打开，如 lindazhuangpet://bifrost?...	一般通过统一路由 SDK 实现。

---

🧩 三、小程序跳转场景

场景	实现方式	说明
小程序 → 小程序（同平台）	wx.navigateToMiniProgram({ appId, path })	支持跨小程序跳转（前提是白名单内）。
小程序 → 小程序（不同平台）	❌ 不支持	必须先离开当前平台（如复制链接或唤起 App）。
小程序 → H5	<web-view src="https://xxx.com" />	只能在 web-view 中打开。
小程序 → App	调用中转 Scheme（如 lindazhuangpet://...）	需 App 注册 Scheme 并在系统内唤起。

---

🧠 四、总结对照表

来源 \ 目标	H5	App	微信小程序	支付宝小程序	抖音小程序
H5	✅ location.href	⚙️ Scheme / Link	⚙️ wx.miniProgram.navigateTo	⚙️ my.navigateToMiniProgram	⚙️ tt.miniProgram.navigateTo
App	✅ 内嵌 WebView	✅ Scheme / SDK	⚙️ 微信 SDK	⚙️ 支付宝 SDK	⚙️ 字节 SDK
小程序（微信）	✅ web-view	⚙️ Scheme	✅ wx.navigateToMiniProgram	❌	❌
小程序（支付宝）	✅ web-view	⚙️ Scheme	❌	✅ my.navigateToMiniProgram	❌
小程序（抖音）	✅ web-view	⚙️ Scheme	❌	❌	✅ tt.miniProgram.navigateToMiniProgram

---

🛠️ 五、实用建议

1. 对外跳转（H5 → App、小程序）
   🔹 推荐优先使用 Scheme + Universal Link。
   🔹 同时带上超时检测逻辑（防止用户未安装 App）。

2. 小程序内跳 H5
   🔹 只能通过 <web-view>，不能直接跳外部页面。
   🔹 H5 必须配置在小程序后台“业务域名”中。

3. App 内跳转策略
   🔹 如果是公司自研 App，可以统一封装一个 openLink(url) 方法，内部自动判断 Scheme/H5/小程序。
   🔹 如果要支持微信、支付宝、字节跳转，需要对接对应 SDK。

4. encodeURIComponent() 必须使用的场景
   🔹 拼接小程序的 page 参数（防止 ? 和 & 混乱）。
   🔹 例如：

   const page = encodeURIComponent('pages/detail/detail?id=123');
   const url = `lindazhuangpet://xxx.com/bifrost?name=AppPetWXSS&page=${page}`;
   

5. URL Scheme 的 H5 跳 App 实现方式，本质上就是让浏览器去访问这个 Scheme URL 🔹 最常用的方法就是： window.location.href = 'lindazhuangpet://path?param=123';

---