【uni

2024-07-15 16:01| 来源: 网络整理| 查看: 265

前言

在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是最合适的，后文也是介绍的这种方式

一些资料

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，实现被第三方应用调用

微信（开放标签方式）

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

h5网页必须以配置的JS接口安全域名访问，否则无法正常显示开放标签按钮微信的JS-SDK只有在H5环境下才能正常加载，在小程序、APP环境下会报错 0) { let appOpenParamObj = JSON.parse(appOpenParam) if (appOpenParamObj.openPath) { uni.navigateTo({ url: appOpenParamObj.openPath }); } } }, 0);

【本文地址】

【uni

【uni

今日新闻

推荐新闻