前言
在H5页面有个按钮，点击能够在手机浏览器/微信中直接跳转到对应的APP的具体页面，如果未安装对应的APP，则进行提示下载或在应用商店打开该应用下载页。也就是我们常见的“在APP中打开”功能。
这个功能在实现上主要分为两种场景，从普通浏览器唤醒以及从微信唤醒。这两个场景又分为了IOS端和安卓端，因此，实现的方式也分为很多种，譬如，schemes/Universal Link（通用链接）/应用宝等。
首先说下普通浏览器，不考虑个别浏览器屏蔽Schemes等情况，采用Schemes是最直接有效的方式，但是这种方式也存在一种问题，就是无法准确判断用户是否已经安装了想要打开的APP。对于这个问题，普遍的解决方式是当用户点了“在APP中打开”按钮后，如果数秒内当前页面的显示状态没有发生变化，则提示用户进行下载或前往应用商店。
然后是微信。微信就比较妖了，它禁了Schemes，想从微信唤起APP，目前有这么几种方案：
- IOS下通过Universal Link（通用链接），网上很多说也被微信禁了，但是我亲测是可以的，版本：
IOS 14.2微信 7.0.20 - 接入应用宝（安卓依靠应用宝唤起，IOS只能跳转到app store）
- 提示用户在浏览器中打开（间接）
- 做腾讯的干儿子（即被微信列入不屏蔽schemes的对象中，可能不？）
- 采用微信开放标签
很显然，方案5是最合适的，后文也是介绍的这种方式
一些资料
普通浏览器（采用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"]
}]
检验
<a href="your_url_schemes://params">打开APP<a><br/>
或安卓下触发
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的提示存在问题，易误导
微信（开放标签方式）
按微信开放标签文档操作就可以了，值得注意的点有以下：
- h5网页必须以配置的
JS接口安全域名访问，否则无法正常显示开放标签按钮 - 微信的JS-SDK只有在H5环境下才能正常加载，在小程序、APP环境下会报错
-
<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即为当前的参数内容，但是有以下几个点需要处理：
- 在获取
plus.runtime.arguments后，需要将plus.runtime.arguments置为空，否则一直能获取到 - 不同浏览器或系统获取到的参数可能会包含前缀
your_url_schemes://，需要处理 - IOS下会对参数进行编码，因此，在获取后，需要用
decodeURIComponent方法进行解码 - IOS下可能有获取参数异常的问题（获取的为上一个变化的值），需要用setTimeout(function,0)的方式来解决
代码示例
在App.vue onshow钩子函数中添加：
// 跳转页面(需要在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);
