前端 Notes ｜ H5 打开 App 并跳转指定页（Android/iOS）最 low 实现

还是技术的世界简单，除了 0 就是 1。

前言

之前接到一个任务，大概细分如下：

• H5 调起 App（Android/iOS） 并打开对应页面；
• 如果应用未安装，则提示用户进行下载；
• 微信打开该链接分享好友展示卡片样式，不使用微信 SDK 实现；
• 通过调用微信 SDK 实现分享好友卡片形式；

忐忑的内心，又要开始前端之旅，咋整呢？

干呗。

个人工作主要偏向于 Android，所以此篇内容主要以 Android 为例，毕竟鸡老大也曾经说过，不对没涉及的领域做太多评价。

之前项目中曾经使用 scheme 来打开过指定的页面，而此时，同样打算以 scheme 入手，对于一些新奇的玩意，私下有空再去研究咯。

由于项目特殊性，这里暂时不放置动态效果图了。

一、H5 调起 App（Android/iOS） 并打开对应页面

关键的点在于移动端以及前端协定对应的协议名称以及 host 即可。

例如我们现在协定如下：

• com.test.app://topic?id=196&code=50c20872

当然，协议名随便，不一定非要是域名，比如说，我指定个 schemeName 也可以。

而对于 Android 的小伙伴只需要在指定打开的页支持此 scheme 即可：

<activity
    android:name=".ui.activity.module.topic.TopicActivity"
    android:exported="true"
    android:launchMode="standard"
    android:screenOrientation="portrait">

    <intent-filter>
        <action android:name="android.intent.action.VIEW" />

        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />

        <data
            android:host="topic"
            android:scheme="com.test.app" />
    </intent-filter>
</activity>

而获取 H5 传递的参数也是贼 easy，如下：

if (Intent.ACTION_VIEW == intent.action && intent.data != null) {
    mAdvisoryId = intent.data.getQueryParameter("id").toInt()
    mPrivateCode = intent.data.getQueryParameter("code")
}

最后针对 H5 只需要跳转此 url 即可：

// 通用协议地址
var commSchemeUrl = "com.test.app://topic?id=196&code=50c20872";
window.location.href = commSchemeUrl;

二、如果应用未安装，则提示用户进行下载

最好的情况就是所有用户都安装咱开发的应用，可惜啊，又不是微信。

所以不得不考虑一个问题，如果目标用户未安装该应用，又该如何？能否间接提升产品下载安装率？

思来想去，还是觉得如果没下载直接跳转下载页 （这就是一句废话