H5实现唤起APP

H5实现唤起APP

唤端技术

体验过后，我们就来聊一聊它的实现技术是怎样的，唤端技术我们也称之为 deep link 技术。当然，不同平台的实现方式有些不同，一般常见的有这几种，分别是：

• URL Scheme（通用）
• Universal Link （iOS）
• App Link、Chrome Intents（android）

URL Scheme（通用）

这种方式是一种比较通用的技术，各平台的兼容性也很好，它一般由协议名、路径、参数组成。这个一般是由Native开发的同学提供，我们前端同学再拿到这个scheme之后，就可以用来打开APP或APP内的某个页面了。

URL Scheme 组成

[scheme:][//authority][path][?query][#fragment]

打开方式

常用的有以下这几种方式

• 直接通过window.location.href跳转

window.location.href = 'zhihu://'

• 通过iframe跳转

const iframe = document.createElement('iframe')
iframe.style.display = 'none'
iframe.src = 'zhihu://'
document.body.appendChild(iframe)

• 直接使用a标签进行跳转
• 通过js bridge来打开

window.miduBridge.call('openAppByRouter', {url: 'zhihu://'})

判断是否成功唤起

当用户唤起APP失败时，我们希望可以引导用户去进行下载。那么我们怎么才能知道当前APP是否成功唤起呢？

我们可以监听当前页面的 visibilitychange 事件，如果页面隐藏，则表示唤端成功，否则唤端失败，跳转到应用商店。

IOS配置URL Scheme

1. 打开工程，点击项目名称，找到info条目，在info条目下，找到URL Types
   
2. 在URL Types处点击“+”号，新增一个URLTypes，然后填写identifier和URL Schemes.
3. identifier：URL Identifier是自定义的 URL scheme 的名字，一般采用反转域名的方法保证该名字的唯一性。例如：com.xxxx.schemeUse。
4. URL Schemes：为自己的app定义的schemes。使用另外的app调起自己的app时，使用这个参数，其格式为：schemeUseApp://
   

Android配置URL Scheme

1、在Mainefest配置文件中配置需要用scheme协议跳转的Activity

<!-- scheme协议 -->
<activity android:name=".SchemeActivity" android:label="@string/app_name">
  <!-- 要想在别的App上能成功调起App，必须添加intent过滤器 -->
  <!-- 协议部分，随便设置 -->
  <intent-filter>
    <!--协议部分，随便设置-->
    <data android:scheme="scheme" android:host="mtime" android:path="/goodsDetail" />
    <!--下面这几行也必须得设置-->
    <category android:name="android.intent.category.DEFAULT"/>
    <action android:name="android.intent.action.VIEW"/>
    <category android:name="android.intent.category.BROWSABLE"/>
  </intent-filter>
</activity>

设置Scheme的注意点

1. URL Scheme必须能唯一标识一个APP。
   • 如果你设置的URL Scheme与别的APP的URL Scheme冲突时，你的APP不一定会被启动起来。