千叶鸟
千叶鸟

【uni-app】从H5唤起APP

前言

在H5页面有个按钮，点击能够在手机浏览器/微信中直接跳转到对应的APP的具体页面，如果未安装对应的APP，则进行提示下载或在应用商店打开该应用下载页。也就是我们常见的“在APP中打开”功能。

这个功能在实现上主要分为两种场景，从普通浏览器唤醒以及从微信唤醒。这两个场景又分为了IOS端和安卓端，因此，实现的方式也分为很多种，譬如，schemes/Universal Link（通用链接）/应用宝等。

首先说下普通浏览器，不考虑个别浏览器屏蔽Schemes等情况，采用Schemes是最直接有效的方式，但是这种方式也存在一种问题，就是无法准确判断用户是否已经安装了想要打开的APP。对于这个问题，普遍的解决方式是当用户点了“在APP中打开”按钮后，如果数秒内当前页面的显示状态没有发生变化，则提示用户进行下载或前往应用商店。

然后是微信。微信就比较妖了，它禁了Schemes，想从微信唤起APP，目前有这么几种方案：

  1. IOS下通过Universal Link（通用链接），网上很多说也被微信禁了，但是我亲测是可以的，版本：IOS 14.2 微信 7.0.20
  2. 接入应用宝（安卓依靠应用宝唤起，IOS只能跳转到app store）
  3. 提示用户在浏览器中打开（间接）
  4. 做腾讯的干儿子（即被微信列入不屏蔽schemes的对象中，可能不？）
  5. 采用微信开放标签

很显然，方案5是最合适的，后文也是介绍的这种方式

一些资料

iOS H5打开App(通用链接)

微信开放标签文档

普通浏览器（采用Schemes方式）

注册Schemes

Manifest.json视图 》App常用其他设置 》分别配置Android设置和IOS设置下的UrlSchemes参数

坑：在配置视图中，配置IOS的UrlSchemes存在问题，需要按照 文档 在源码视图中配置（uniapp无形的坑真是的有点多，各方面都不够严谨）

代码示例：

安卓

在manifest.json的"app-plus"->"distribute"->"android"节点下添加schemes数据:

"schemes" : "your_url_schemes"

IOS

在manifest.json的"app-plus"->"distribute"->"ios"节点下添加urltypes数据:

"urltypes": [{
                "urlidentifier": "xxx.xxx", //  一般为域名倒写，例如 baidu.com
                "urlschemes": ["your_url_schemes"]
                        }]

检验

打开APP

或安卓下触发

let ifr = document.createElement("iframe");
ifr.src = "your_url_schemes://params";
ifr.style.display = "none";
document.body.appendChild(ifr);

或IOS下触发

window.location = "your_url_schemes://params"

示例代码

监听页面显示状态变化，用以处理定时器

document.addEventListener("visibilitychange", function () {
  if (that.timer) {
    that.opening = false
    clearTimeout(that.timer)
  }
}, false);

唤起APP点击方法

browserOpenApp() {
  let that = this
  that.opening = true
  if (that.isAndroid()) { //  安卓处理
    let ifr = document.createElement('iframe');
    ifr.src = "your_url_schemes://params";
    ifr.style.display = 'none';
    document.body.appendChild(ifr);
    that.timer = window.setTimeout(function () {  //  未安装的情况
      that.opening = false
      document.body.removeChild(ifr);
      //  提示下载
      let r = confirm("未安装APP? 是否下载")
      if (r) {
        window.location = that.androidDownloadUrl
      }
    }, 5000)
  } else {  //  IOS处理
    window.location = "your_url_schemes://params"
    that.timer = setTimeout(function () { //  未安装的情况
      that.opening = false
      //  跳转app store
      let r = confirm("未安装APP? 是否去App store查看")
      if (r) {
        window.location = 'https://apps.apple.com/cn/app/idxxxxxxxxxx'
      }
    }, 5000);
  }
}

参考文档：

【报Bug】HBuilderX配置IOS UrlSchemes的提示存在问题，易误导

Android平台设置UrlSchemes，实现被第三方应用调用

iOS平台设置UrlSchemes，实现被第三方应用调用

微信（开放标签方式）

按微信开放标签文档操作就可以了，值得注意的点有以下：

  1. h5网页必须以配置的JS接口安全域名访问，否则无法正常显示开放标签按钮
  2. 微信的JS-SDK只有在H5环境下才能正常加载，在小程序、APP环境下会报错
  3. 标签内的