universal link与APP唤醒

本文介绍了一种H5页面上实现App唤起和下载的技术方案,包括不同场景下(如微信、微博、QQ等平台)的处理方式及注意事项。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

用户点击H5页面的打开App或者下载按钮(这个按钮可能在一个下载入口页、各种分享页面的吸顶或吸底的banner),如果用户已经安装了App,则根据业务跳转到相应的Native页面;如果用户没有安装该应用,则跳到AppStore或者应用市场去下载我们的App。

应用流程

bV2slX

首先所有的下载/唤起入口都是一个直接跳转,应该是这样:

或者这样:

所有的业务判断都是mtlf这个页面里面来做,这样有两个好处:

  • 多业务共用代码。在一个团队中,每个人的业务都可能有一个banner下载,没有比location到一个url更简单的调用方式了
  • 能够利用universal link

简单说下universal link

universal link的优势

在iOS9之前,唤起方式和现在安卓是一个的,都是使用scheme进行唤起,这种方式有个小问题,每次唤起,都会给个提示:是否打开xx应用,这样从体验上来讲,又让用户多一步操作。universal link会直接跳转,不会在页面做停留,条件就是在我们项目的根目录,增一个apple-app-site-association.json文件,里面的内容大致是这样:

bV2rx8

然后iOS的App后台再配置一下,就可以实现直接唤起了!

universal link配置

在H5端怎么才算配置成功了呢?只要我们某一个url在浏览器打开(不管是cdn地址,还是路由转发),看到json文件的内容,H5这边就算配置成功。然后把这个地址,给iOS老司机,和他们一说什么事,他们立刻就知道做什么,就这么简单!

微信、微博、QQ、Safari在各平台的唤起方案

唤起流程图

bV2p56
经过长时间的实验,总结了这张在各种情况下,唤起成功/唤起失败的解决方案,我们接下来一个一个的说。

微信

微信是最重要的一种分享渠道,但是我们能够做的,却不多。之前,iOS下的微信支持universal link这种唤起方式,但是从2018年1月8日之后,微信把这个给屏蔽了!!!不管微信基于什么原因,把iOS下这种最便捷的唤起方式屏蔽,我们能做的只能是适应了。so,现在不管是iOS还是android,我们的处理方式是一样的:都是直接跳到应用宝。iOS的应用宝会引导找开AppStore,android的应用宝会直接打开App(前提是你已经下载)
:微信把itunes链接也屏蔽了,所以也没办法直接跳转AppStore,只能借助应用宝来搭这个桥。

微博

微博目前还支持universal link唤起,我们只需要考虑未下载的情况。

  • iOS下,微博是不支持打开应用宝的链接,所以我们需要引导用户使用Safari打开,像这样:

bV2sbA

  • android平台下,使用scheme这种方式是唤不起App的,但是有特例,同样是scheme,大人点评和网易云音乐就可以唤起,有空大家可以自己试试,所以我们可以推断出,安卓平台下的微博,也有类似微信一样的白名单,在白名单内的,就可以使用scheme唤起,就像微信之于京东,京东在微信里面就是通过scheme方式唤起的。

so,不管是iOS还是android,我们的方案是:直接引导用户使用本地浏览器打开

QQ
  • iOS平台下,QQ目前还支持universal link唤起,要是没有安装,QQ下也支持直接打开itunes链接,比较其他应用,QQ支持是最好的。
  • android平台下,QQ也支持scheme方式唤起,但是在一些老机型下,QQ会有一定的概率唤起失败,具体的现象是:第一次打开页面,唤起失败,再次打开,唤起成功。根据现象,我们可以推测出,在QQ的webview中,会对scheme的唤起方式做一些加载时间上的限制,经测试,大约在500ms,超过这个时间值,就会出现唤起失败的情况。为什么第二次打开,唤起成功的概率会大,是因为第一次加载时,已缓存了文件,第二次打开直接加载,这样时间在限制之内。
Safari

Safari这种情况比较简单,支持universal link,也支持直接打开itunes,so,如图处理就可以了。

踩坑
    • iOS9中,Safari不支持直接跳转itunes,so,这种情况需要做兼容处理,可以直接跳到应用宝
    • 之前看唤起是不是成功了,需要自己来计算时间,因为要是唤起成功了,setInterval的时间就会变慢,经我测试,已经用不到这种方法了,只需要使用document.hidden || document.webkitHidden就可以,兼容性还不错
    • 判断是不是Safari浏览器时,一般判断都是UA中有没有这个字符串,经测试发现,安卓的UA中,也包含Safari这个字符串(如下UA展示),所以需要加上操作系统的判断
  • 关于Scheme唤起,之前有很多方案,比如:使用iframe标签点击window.location…经测试,只要使用a标签点击,这样兼容性最好,代码大约长这样:

bV2syU

关于测试

两个平台,这么多情况,要一个一个测试吗?当然要一个一个的验证,但是在开发期间,没有必要改一行,在手机上测试一下,这样效率太低了,尤其是像一样,选了一个安卓4.4的手机,绝对可以磨练你的耐心。为了提高效率,我把我常用到的UA分享给大家,这样在Chrome模拟器里配置一下,就可以本地调试了,常用UA如下:

  • iOS-微信

  • iOS-QQ

  • iOS-微博

  • iOS-safari

  • Android-微信

  • Android-QQ

  • Android-微博

配置完成之后,就可以像我一样,在电脑上切换环境啦:

bV2suw

<think>我们参考用户提供的引用内容,特别是引用[1]和引用[3]中关于URL Scheme在UniApp中的使用。 用户需求:了解UniApp中如何通过Scheme唤醒App的指南。 步骤: 1. 配置URL Scheme:在manifest.json文件中配置iOS和Android的URL Scheme。 2. 处理外部唤醒:在App中编写代码,监听处理外部URL的唤醒事件。 3. 实现跳转逻辑:解析URL参数,跳转到指定页面。 详细步骤: 一、配置URL Scheme 在UniApp项目中,打开manifest.json文件,进行如下配置: 对于Android平台,在"app-plus" -> "distribute" -> "android"节点下配置scheme: 对于iOS平台,在"app-plus" -> "distribute" -> "ios"节点下配置scheme,同时需要在"urlschemewhitelist"(白名单)中添加需要使用的scheme(如微信的weixin、wechat等)。 示例配置(manifest.json): ```json { "app-plus": { "distribute": { "android": { "schemes": ["myapp"] // Android的URL Scheme }, "ios": { "schemes": ["myapp"], // iOS的URL Scheme "urlschemewhitelist": ["weixin", "wechat"] // 如果需要检测或唤醒微信,需要将微信的scheme加入白名单 } } } } ``` 二、处理外部唤醒App启动时,需要监听处理外部URL的唤醒事件。UniApp提供了`onLaunch`和`onShow`生命周期函数,我们可以在这里获取启动参数。 在App.vue中,我们可以通过`onShow`方法获取传递过来的参数。 示例代码(App.vue): ```javascript export default { onShow: function(options) { // 获取启动参数 const args = plus.runtime.arguments; if (args) { // 处理args,例如解析URL // 假设外部唤醒的URL为 myapp://detail?id=123 // 这里可以将参数传递给指定页面,然后跳转 console.log('唤醒参数:', args); // 解析URL,获取参数 // 这里简单示例,实际需要根据URL格式解析 let pagePath = ''; let query = {}; // 实际解析逻辑需要根据你的URL格式来写 // 例如:如果args是完整URL,可以使用URL对象解析(注意:在App端,可能不是标准的http/https,需要自己处理) // 这里简化处理,假设我们已经解析出要跳转的页面和参数 pagePath = '/pages/detail/detail'; query = { id: '123' }; // 从URL中解析出的参数 // 跳转到指定页面 uni.navigateTo({ url: pagePath + '?' + Object.keys(query).map(key => `${key}=${encodeURIComponent(query[key])}`).join('&') }); } } } ``` 注意:由于外部唤醒可能发生在App已经运行(在后台)的情况下,我们还需要考虑在App运行时被唤醒的情况。上述代码在`onShow`中处理,可以覆盖冷启动和热唤醒。 三、实现跳转逻辑 在第二步中,我们已经将参数传递给了目标页面。在目标页面(如detail页面)的onLoad生命周期中,可以获取传递的参数。 示例代码(detail.vue): ```javascript export default { onLoad(options) { // options 中包含了传递的参数 console.log('页面参数:', options); // 根据参数id获取详情内容 if (options.id) { this.loadDetail(options.id); } }, methods: { loadDetail(id) { // 根据id请求详情数据 } } } ``` 四、生成外部唤醒链接 外部唤醒的链接格式为:`[scheme]://[host]/[path]?[query]`,其中scheme就是我们在manifest.json中配置的scheme(如myapp),host、path和query可以根据需要定义。 例如:`myapp://detail?id=123`,表示唤醒App并跳转到详情页,参数id为123。 五、注意事项 1. iOS平台需要配置白名单(urlschemewhitelist),否则无法唤醒其他App(如微信)或无法被其他App唤醒。 2. 在Android平台上,如果App被杀死,通过URL Scheme唤醒时,启动参数可以在App.vue的`onLaunch`和`onShow`中获取。但在App后台运行时,唤醒会触发`onShow`,而不会触发`onLaunch`。 3. 在iOS平台上,如果App被杀死,通过URL Scheme唤醒时,启动参数在`onLaunch`和`onShow`中都可以获取,但通常推荐在`onShow`中处理,因为`onLaunch`在App启动时只触发一次,而`onShow`在每次App显示时都会触发(包括从后台唤醒)。 六、高级:通过Universal Link(通用链接)唤醒 除了URL Scheme,还可以使用Universal Link(iOS)和App LinkAndroid)来实现唤醒。这种方式使用标准的HTTPS链接,在用户未安装App时可以打开网页,安装App则直接打开App。但UniApp目前对Universal Link的支持需要额外配置,且相对复杂。具体可参考引用[2]中的内容。 由于用户问题主要关注Scheme,这里不展开Universal Link。 七、封装工具函数(参考引用[3]) 我们可以封装一个工具函数来检测并唤醒其他App(如微信),同时支持传递参数。 示例工具函数(appLauncher.js): ```javascript // utils/appLauncher.js export const launchApp = (params) => { // #ifdef APP-PLUS const { pname, iosScheme, data } = params; const isAndroid = plus.os.name.toLowerCase() === 'android'; const appInfo = { pname: isAndroid ? pname : undefined, // Android包名 action: !isAndroid ? iosScheme : undefined, // iOS的scheme extra: data || {} // 传递的参数 }; return new Promise((resolve, reject) => { // 检查应用是否安装 const exist = plus.runtime.isApplicationExist(appInfo); if (!exist) { reject('APP_NOT_INSTALLED'); return; } // 唤醒应用 plus.runtime.launchApplication(appInfo, (err) => { if (err) { reject('LAUNCH_FAILED'); } else { resolve('SUCCESS'); } }); }); // #endif }; ``` 使用示例: ```javascript import { launchApp } from '@/utils/appLauncher.js'; // 唤醒微信 launchApp({ pname: 'com.tencent.mm', // 微信的Android包名 iosScheme: 'weixin://', // 微信的iOS Scheme data: {} // 可以传递参数,但微信是否接收参数取决于微信的URL Scheme接口 }).then(() => { console.log('唤醒成功'); }).catch(err => { console.log(err); // 如果微信未安装,可以提示用户 uni.showToast({ title: '未安装微信', icon: 'none' }); }); ``` 注意:唤醒其他App需要知道目标App的URL Scheme(iOS)或包名(Android),并且目标App必须支持通过URL Scheme唤醒。 以上就是在UniApp中通过Scheme唤醒App的指南。 根据要求,生成相关问题: 1. 如何在UniApp中配置Universal Link实现唤醒? 2. UniApp中如何区分冷启动和热唤醒? 3. 如何解析URL Scheme中的复杂参数?</think>### UniApp 通过 Scheme 唤醒 App 指南 在 UniApp 中通过 URL Scheme 唤醒 App 主要涉及以下核心步骤,支持 iOS 和 Android 平台: #### 一、配置 URL Scheme 1. **Android 配置** 在 `manifest.json` 中添加: ```json "app-plus": { "distribute": { "android": { "schemes": ["myapp"] // 自定义 Scheme 名称 } } } ``` 2. **iOS 配置** 在 `manifest.json` 中添加 Scheme 和白名单: ```json "app-plus": { "distribute": { "ios": { "schemes": ["myapp"], // 自定义 Scheme "urlschemewhitelist": ["weixin", "wechat"] // 需检测的第三方 App 白名单 } } } ``` #### 二、处理外部唤醒事件 在 `App.vue` 中监听唤醒事件: ```javascript onShow: function(options) { // 获取唤醒参数(Android/iOS 通用) const args = plus.runtime.arguments; if (args) { // 示例:myapp://detail?id=123 → 解析跳转到详情页 const params = new URLSearchParams(args.split('?')[1]); const id = params.get('id'); uni.navigateTo({ url: `/pages/detail?id=${id}` }); } } ``` #### 三、生成唤醒链接 - **格式**:`[scheme]://[path]?[params]` 示例:`myapp://product/detail?id=1001` - **使用场景**: - 网页链接:`<a href="myapp://home">打开App</a>` - 二维码:嵌入 Scheme 链接 - 短信/邮件:`点击链接打开:myapp://login?token=xxx` #### 四、检测并唤醒第三方 App 封装工具函数(如 `appLauncher.js`): ```javascript export const launchApp = (params) => { const { pname, iosScheme, data } = params; const isAndroid = plus.os.name.toLowerCase() === 'android'; const appInfo = { pname: isAndroid ? pname : undefined, // Android 包名 action: !isAndroid ? iosScheme : undefined, // iOS Scheme extra: data || {} // 传递参数 }; return new Promise((resolve, reject) => { // 检测是否安装 if (!plus.runtime.isApplicationExist(appInfo)) { return reject('APP_NOT_INSTALLED'); } // 唤醒应用 plus.runtime.launchApplication(appInfo, (err) => { err ? reject('LAUNCH_FAILED') : resolve('SUCCESS'); }); }); }; ``` #### 五、使用示例(唤醒微信) ```javascript import { launchApp } from '@/utils/appLauncher'; // 唤醒微信并传递参数 launchApp({ pname: "com.tencent.mm", // Android 包名 iosScheme: "weixin://", // iOS Scheme data: { type: "share" } // 自定义参数 }).catch(err => { uni.showToast({ title: "微信未安装", icon: "none" }); }); ``` #### 注意事项 1. **iOS 白名单限制** iOS 9+ 必须配置 `urlschemewhitelist`,否则无法检测第三方 App[^3]。 2. **参数传递** 复杂数据需 JSON 序列化:`data: { payload: encodeURIComponent(JSON.stringify(obj)) }`。 3. **Android 包名** 通过应用商店查询或 Apk 解压获取(如微信包名:`com.tencent.mm`)。 4. **Scheme 冲突** 避免使用常见 Scheme(如 `http`/`weixin`),防止系统应用冲突。 > **实践建议**:测试时直接用设备浏览器访问 `myapp://home`,观察是否成功唤醒 App[^1]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值