【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数据:

1
"schemes" : "your_url_schemes"

IOS

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

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

检验

1
<a href="your_url_schemes://params">打开APP<a><br/>

或安卓下触发

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

或IOS下触发

1
window.location = "your_url_schemes://params"

示例代码

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

1
2
3
4
5
6
document.addEventListener("visibilitychange", function () {
  if (that.timer) {
    that.opening = false
    clearTimeout(that.timer)
  }
}, false);

唤起APP点击方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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. <wx-open-launch-app标签内的<template>标签要用<script type="text/wxtag-template">代替

参数处理

参数的传递

普通浏览器schemes url中 //后的即为参数内容，例如your_url_schemes://params的参数内容为params

微信开放标签中，wx-open-launch-app标签的extinfo属性即为参数内容

参数的获取

plus.runtime.arguments即为当前的参数内容，但是有以下几个点需要处理：

  1. 在获取plus.runtime.arguments后，需要将plus.runtime.arguments置为空，否则一直能获取到
  2. 不同浏览器或系统获取到的参数可能会包含前缀your_url_schemes://，需要处理
  3. IOS下会对参数进行编码，因此，在获取后，需要用decodeURIComponent方法进行解码
  4. IOS下可能有获取参数异常的问题（获取的为上一个变化的值），需要用setTimeout(function,0)的方式来解决

代码示例

在App.vue onshow钩子函数中添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 跳转页面(需要在setTimeout中,否则IOS会出现获取的plus.runtime.arguments是上一个赋值给plus.runtime.arguments的值,而不是当前传入的plus.runtime.arguments)
setTimeout(function () {
  let appOpenParam = plus.runtime.arguments
  plus.runtime.arguments = null;
  plus.runtime.arguments = "";
  appOpenParam = appOpenParam.replace("your_url_schemes://",'')
  appOpenParam = decodeURIComponent(appOpenParam)
  if (appOpenParam && appOpenParam.trim().length>0) {
    let appOpenParamObj = JSON.parse(appOpenParam)
    if (appOpenParamObj.openPath) {
      uni.navigateTo({
        url: appOpenParamObj.openPath
      });
    }
  }
}, 0);