h5、app、小程序 互相跳转打开的方式总结

（注：本文里的小程序默认是指微信小程序）

一、app或小程序打开h5

1、webview实现

• 你可以把webview理解成一个无界面的浏览器。
• ios端已经淘汰掉了UIWebView，现在要使用WKWebView容器，android一般使用系统自带的webview即可，小程序就是用自己的webview内核。

关于h5中如何判断所处的平台环境可以参考另一篇文章：传送门

代码示例（小程序）：

<web-view 
  src="{{url}}" 
  bindmessage="getMessage"
>web-view>

二、app打开小程序

1、微信开放平台sdk实现

• 需要已认证的微信开放平台账号
• app需要接入微信开放平台OpenSDK
• 可跳转至任意小程序
• 跳转自家的小程序不受限制
• 跳转其他家的小程序之前需要先将app和小程序关联，最多关联3个小程序

具体细则参考官方文档：传送门

三、小程序打开app

1、app打开小程序后再跳回

• 小程序不能随便打开app，只能是跳回原app，也就是app是发起者。
• 主要是两种场景：一是app分享微信卡片，点击微信卡片打开小程序；二是app直接打开小程序。这两种场景下小程序可以打开原app。
• 只能手动点击页面标签按钮跳转

具体细则参考官方文档：传送门

代码示例：

<button 
  open-type="launchApp" 
  app-parameter="myParameters" 
  binderror="onLaunchAppError"
>打开APPbutton>

四、微信内h5打开小程序

1、微信开放标签实现

• 需要已认证的微信公众平台账号
• 需要在公众平台后台绑定h5安全域名
• h5需要引入微信js-sdk，配置wx.config，使用标签wx-open-launch-weapp
• 只能手动点击页面标签按钮跳转
• 可跳转至任意小程序

具体细则参考官方文档：传送门

代码示例：

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index?user=123&action=abc"
>
  <template>
    <style>.btn { padding: 12px }style>
    <button class="btn">打开小程序button>
  template>
wx-open-launch-weapp>

2、小程序码实现

• 需要已认证的微信公众平台账号（小程序）
• 需要后端对接小程序官方api生成小程序码
• 前端展示小程序码，引导用户长按识别
• 小程序码可携带参数（scene）有长度限制，最大32个字符长度
• 只能跳转自家的小程序

具体细则参考官方文档：传送门

五、普通环境h5打开小程序

这里的普通环境是指除微信外的普通浏览器或其他app内的webview环境。
短信唤起小程序本质上也是普通h5唤起来实现。

1、小程序url schema实现

url schema是一种页面内跳转协议，通过定义自己的scheme协议，可以非常方便跳转app中的各个页面。
这也是最近一年小程序官方才推出的方式，使用方便，强烈建议。
具体细则参考官方文档：传送门

2、云开发静态托管h5实现

具体细则参考官方文档：传送门

3、小程序码实现

• 需要已认证的微信公众平台账号（小程序）
• 需要后端对接小程序官方api生成小程序码
• 前端展示小程序码海报，引导用户保存或下载海报后再通过微信扫一扫识别
• 小程序码可携带参数（scene）有长度限制，最大32个字符长度
• 只能跳转自家的小程序

具体细则参考官方文档：传送门

六、微信内h5打开app

微信环境里默认屏蔽了url schema等方式打开app的能力，除非你是白名单app，例如腾讯系的知乎、bilibili等，一般app只能另寻出路。

1、微信开放标签实现

• 需要已认证的微信公众平台账号和微信开放平台账号
• 需要在公众平台后台绑定h5安全域名
• 需要在开放平台后台登记h5域名和app的绑定关系
• h5需要引入微信js-sdk，配置wx.config，使用标签wx-open-launch-app
• 只能手动点击页面标签按钮跳转
• 只能跳转h5域名绑定的app
• 可以实现跳转指定页面和携带参数

具体细则参考官方文档：传送门

代码示例：

<wx-open-launch-app
  id="launch-btn"
  appid="your-appid"
  extinfo="your-extinfo"
>
  <template>
    <style>.btn { padding: 12px }style>
    <button class="btn">打开Appbutton>
  template>
wx-open-launch-app>

2、应用宝微下载实现

应用宝微下载链接页面会自动判断运行平台，判断是安卓就跳转该app应用宝详情页，判断是ios就跳转该app苹果应用商店详情页，已安装app就会弹窗提示打开。

• 需要已认证的腾讯开放平台账号
• app需要接入应用宝平台并上架
• 需要在开放平台后台配置应用宝微下载，生成一个网页链接
• h5只需要跳转该网页链接即可
• 可跳转至任意app
• 如需获得跳转app指定页面的能力，需要额外申请，根据应用资质进行审批

具体细则参考官方文档：传送门

代码示例：

<a 
  href="https://a.app.qq.com/o/simple.jsp?pkgname=com.test.testapp"
>打开Appa>

3、右上角提示用浏览器打开

• 微信环境页面内引导用户点击右上角省略号用浏览器打开页面，然后通过普通浏览器h5打开app的方式（见下面）实现
• 很多微信内h5页面的技术限制都可以通过这一交互方式来处理。
  

判断微信环境的代码示例：

const ua = window.navigator.userAgent.toLowerCase()

const isWechat = (() => {
  return /MicroMessenger/i.test(ua)
})()

七、普通环境h5打开app

这里的普通环境是指除微信外的普通浏览器或其他app内的webview环境。

1、url schema实现

url schema是一种页面内跳转协议，通过定义自己的scheme协议，可以非常方便跳转app中的各个页面。

• 安卓和ios平台都支持
• 需要浏览器或webview环境支持url schema协议向外跳转
• 要跳转的app端需要配置一个url schema地址，提供给h5
• h5页面只需要以跳转普通网页的方式跳转该url schema地址即可
• 可以实现跳转指定页面和携带参数
• 如果用户未安装要跳转的app则相当于跳转了一个不存在的网址，用户体验不好

代码示例：

<a 
  href="pinduoduo://com.xunmeng.pinduoduo/"
>打开Appa>

2、universal links实现

universal links是iOS9.0推出的新技术，如果app支持通用链接，那么就可以通过https链接来打开app（手机中已安装此app），或跳转到https链接（手机中未安装此app）。

• 只有ios且9.0以上版本才支持
• 需要一个可用的https域名作为universal links链接
• ios端需激活Xcode工程中的Associated Domains能力，并配置一个apple-app-site-association文件上传到https域名服务器目录
• 能保证地址唯一性以及兼顾用户体验（未安装app时也能正常访问网页，可用作app下载页）

代码示例：

<a 
  href="https://help.wechat.com/app/"
>打开Appa>

---

参考链接：https://www.jianshu.com/p/862885bd8ea2