一、简介

1.1 功能

运营常见的功能，通过短信投放短链接，引导流量。

1.2 基本流程

（1）点击短链接，在默认浏览器打开 H5 页面
（2）页面初始化时，唤起 app
（3）如果用户未安装 app，此时有两种做法，一种是自动为用户跳转 app 下载地址，一种是在页面提供点击按钮，引动用户点击触发下载。

PS：
自动跳转下载方案：未找到，可以去怼产品了
提供点击按钮方案：天猫、淘宝、美团外卖

二、实现

首先简单罗列一下美团、淘宝等引导页的实现方式。

2.1 唤起 app

IOS端
统一使用 location.href 来跳转 scheme 协议地址

Android端
美团
1、如果是 chrome 浏览器，使用 a标签以及 intent 协议地址
2、如果是其他情况下，使用 iframe 标签以及 scheme 协议地址

天猫淘宝
1、在 Android 下也使用 location.href

PS：
微信 webview 环境下，可以直接去下载了，目前不支持唤起外部 app

2.2 下载 app

自动跳转下载：
由于无法监听是否已安装 app，也无法监听是否成功唤起 app。
目前的做法是在唤起 app 后的一定时间（一般是3s），进行下载跳转。

按钮点击下载：
大家都懂，不废话了

2.3 下载企业版 app

某些情况下，我们 IOS 被下架了，这时为了不影响用户（或者说运营的KPI），需要引导用户去下载企业版的 app。

下载链接：itms-services://?action=download-manifest&url= + plist文件地址

用于企业版 IOS 需要用户在手机系统设置中添加信任，因此最好有一个单独的引导安装教程页面对用户进行指导。

demo.png

PS：
企业版IOS，每个包允许的下载安装数量上限为 10000，因此如果是流量较大的活动，需要客户端的同学多上传一些包。

另外，线上在运行的企业版IOS偶尔会被苹果强制过期，需要更换新的包供用户下载。如果需要，可以找服务端的同学，做一下自动更新包地址的功能。

三、自己的代码实现以及遇到的一些问题

3.1 代码实现

模仿淘宝天猫的方式，统一使用 location.href

// 自动唤起 app
handleAutoWakeApp() {
    // 微信直接去下载
    if (isWx()) {
      this.download();
      return;
    }

    let scheme = '';
       
    if (isIos()) { scheme = this.scheme_IOS; }

    if (isAndroid()) { scheme = this.scheme_Adr; }

    setTimeout(() => {
      window.location.href = scheme;
    }, 100);
},