技术标签: 笔记 H5如何实现唤起APP 工作学习总结
写过hybrid的同学,想必都会遇到这样的需求,如果用户安装了自己的APP,就打开APP或跳转到APP内某个页面,如果没安装则引导用户到对应页面或应用商店下载。这里就涉及到了H5与Native之间的交互,为什么H5能够唤起APP并且跳转到对应的页面?
就算你没写过想必也体验过,最常见的就是一些广告了,如果你点击了广告,他判断你手机装了对应APP,那他就会去打开那个APP,如果没安装,他会帮你跳转到应用商店去下载,这个还算人性化一点的,有些直接后台给你去下载,你完全无感知。
哈哈,是不是觉得这种技术很神奇,今天我们就一起来看看它是如何实现的~
实现之前我们先简单体验一下什么是唤端
从上图中,我们可以看到在浏览器中我们点击打开知乎,系统会提示我们是否在知乎中打开,当我们点击打开时,知乎就被打开了,这就是一个简单的唤端体验。
「有了这项技术我们就可以实现H5唤起APP应用了,现阶段的引流方式大都得益于这种技术,比如广告投放、用户拉新等。」
体验过后,我们就来聊一聊它的实现技术是怎样的,唤端技术我们也称之为deep link技术。当然,不同平台的实现方式有些不同,一般常见的有这几种,分别是:
这种方式是一种比较通用的技术,各平台的兼容性也很好,它一般由协议名、路径、参数组成。这个一般是由Native开发的同学提供,我们前端同学再拿到这个scheme之后,就可以用来打开APP或APP内的某个页面了。
[scheme:][//authority][path][?query][#fragment]
APP | 微信 | 支付宝 | 淘宝 | 知乎 | |
---|---|---|---|---|---|
URL Scheme | weixin:// | alipay:// | taobao:// | mqq:// | zhihu:// |
常用的有以下这几种方式
window.location.href = 'zhihu://'
const iframe = document.createElement('iframe')
iframe.style.display = 'none'
iframe.src = 'zhihu://'
document.body.appendChild(iframe)
window.miduBridge.call('openAppByRouter', {
url: 'zhihu://'})
当用户唤起APP失败时,我们希望可以引导用户去进行下载。那么我们怎么才能知道当前APP是否成功唤起呢?
我们可以监听当前页面的visibilitychange事件,如果页面隐藏,则表示唤端成功,否则唤端失败,跳转到应用商店。
OK,我们尝试来实现一下:
首先我手机上并没有安装腾讯微博,所以也就无法唤起,我们让他跳到应用商店对应的应用下载页,这里就用淘宝的下载页来代替一下~
<template>
<div class="open_app">
<div class="open_app_title">前端南玖唤端测试Demo</div>
<div class="open_btn" @click="open">打开腾讯微博</div>
</div>
</template>
<script>
let timer
export default {
name: 'openApp',
methods: {
watchVisibility() {
window.addEventListener('visibilitychange', () => {
// 监听页面visibility
if(document.hidden) {
// 如果页面隐藏了,则表示唤起成功,这时候需要清除下载定时器
clearTimeout(timer)
}
})
},
open() {
timer = setTimeout(() => {
// 没找到腾讯微博的下载页,这里暂时以淘宝下载页代替
window.location.href = 'http://apps.apple.com/cn/app/id387682726'
}, 3000)
window.location.href = 'TencentWeibo://'
}
}
}
</script>
<style lang="less">
.open_app_title {
font-size: (20/@rem);
}
.open_btn{
margin-top:(20/@rem);
padding:(10/@rem) 0;
border-radius: (8/@rem);
background: salmon;
color: #fff;
font-size: (16/@rem);
}
</style>
URL Scheme 这种方式兼容性好,无论安卓或者 iOS 都能支持,是目前最常用的方式。从上图我们能够看出它也有一些比较明显的缺点:
Universal Link 是在iOS 9中新增的功能,使用它可以直接通过https协议的链接来打开 APP。它相比前一种URL Scheme的优点在于它是使用https协议,所以如果没有唤端成功,那么就会直接打开这个网页,不再需要判断是否唤起成功了。并且使用 Universal Link,不会再弹出是否打开的弹出,对用户来说,唤端的效率更高了。
openByUniversal () {
// 打开知乎问题页
window.location.href = 'https://oia.zhihu.com/questions/64966868'
// oia.zhihu.com
},
在2015年的Google I/O大会上,Android M宣布了一个新特性:App Links让用户在点击一个普通web链接的时候可以打开指定APP的指定页面,前提是这个APP已经安装并且经过了验证,否则会显示一个打开确认选项的弹出框,只支持Android M以上系统。
App Links的最大的作用,就是可以避免从页面唤醒App时出现的选择浏览器选项框;
前提是必须注册相应的Scheme,就可以实现直接打开关联的App。
「这两种方案在国内的应用都比较少。」
URL Scheme | Universal Link | App Link | |
---|---|---|---|
<ios9 | 支持 | 不支持 | 不支持 |
>=ios9 | 支持 | 支持 | 不支持 |
<android6 | 支持 | 不支持 | 不支持 |
>=android6 | 支持 | 不支持 | 支持 |
是否需要HTTPS | 不需要 | 需要 | 需要 |
是否需要客户端 | 需要 | 需要 | 需要 |
无对应APP时的现象 | 报错/无反应 | 跳到对应的页面 | 跳到对应的页面 |
「URI Scheme:」
「Universal Link」
已经安装APP,直接唤起APP;APP没有安装,就会跳去对应的web link。
universal Link 是从服务器上查询是哪个APP需要被打开,所以不会存在冲突问题
universal Link 支持从其他app中的UIWebView中跳转到目标app
缺点在于会记住用户的选择:在用户点击了Universal
link之后,iOS会去检测用户最近一次是选择了直接打开app还是打开网站。一旦用户点击了这个选项,他就会通过safiri打开你的网站。并且在之后的操作中,默认一直延续这个选择,除非用户从你的webpage上通过点击Smart
App Banner上的OPEN按钮来打开。
「App link」
优点与 Universal Link 类似
缺点在于国内的支持相对较差,在有的浏览器或者手机ROM中并不能链接至APP,而是在浏览器中打开了对应的链接。
在询问是否用APP打开对应的链接时,如果选择了“取消”并且“记住选择”被勾上,那么下次你再次想链接至APP时就不会有任何反应
文章浏览阅读910次。常见面试题:1、MyBatis2、 SpringMVC3、 Spring 4、 SpringBoot _springboot+mybatis内推面试题常见
文章浏览阅读6.3k次,点赞9次,收藏87次。前言时间序列相似性度量是时间序列相似性检索、时间序列无监督聚类、时间序列分类以及其他时间序列分析的基础。给定时间序列的模式表示之后,需要给出一个有效度量来衡量两个时间序列的相似性。时间序列的相似性可以分为如下三种:1、 时序相似性时序相似性是指时间序列点的增减变化模式相同,即在同一时间点增加或者减少,两个时间序列呈现一定程度的相互平行。这个一般使用闵可夫斯基距离即可进行相似性度量。2、 形状相似性形状相似性是指时间序列中具有共同的形状,它通常包含在不同时间点发生的共同的趋势形状或者数据中独立_时间序列相似性度量方法
文章浏览阅读2.1k次,点赞24次,收藏37次。并查集正如它的名字一样,并查集(Union-Find)就是用来对集合进行 合并(Union) 与 查询(Find) 操作的一种数据结构。合并 就是将两个不相交的集合合并成一个集合。查询 就是查询两个元素是否属于同一集合。并查集的原理并查集是一种树型的数据结构,用于处理一些不相交集合的合并及查询问题(即所谓的并、查)。比如说,我们可以用并查集来判断一个森林中有几棵树、某个节点是否属于某棵树等。组成并查集主要由一个整型数组pre[ ]和两个函数find( )、join( )构成。_并查集csdn
文章浏览阅读5.1k次,点赞4次,收藏38次。客供料 B库存 特殊库存 来料加工 受托加工_客供料
文章浏览阅读966次。一、操作系统的安装 我这里说的操作系统以Windows 2000为例,高版本的Windows也有类似功能。 格式化硬盘时候,必须格式化为NTFS的,绝对不要使用FAT32类型。 C盘为操作系统盘,D盘放常用软件,E盘网站,格式化完成后立刻设置磁盘权限,C盘默认,D盘的安全设置为Administrator和System完全控制,其他用户删除,E盘放网站,如果只有一个网站,就设置Ad_在本地连接的属性中将不必要的协议和服务删除
文章浏览阅读7.7k次。MPEG-2压缩编码技术原理应用(一)北京广播学院电视工程系 教授 郭 斌 MPEG是运动图像专家组(Moving Picture Experts Group)的简称,其实质上的名称为国际标准化组织(ISO)和国际电工委员会(IEC)联合技术委员会(JTC)1的第29 分委员会的第11工作组,即ISO/IEC JTC1/SC29/WG11,成立于1988年。其任务是制定世界通用的_对于给定的3三张连续bmp格式灰度图像序列,设计构建mpeg-2编码器,对其进行编码压缩
文章浏览阅读868次。QT静态库编译。_生成32bit-msvc格式的库
文章浏览阅读1.2k次。近日,即构科技SDK新增支持Flutter跨平台移动框架的方式接入,开发者基于ZEGO Flutter SDK可简单高效地实现跨平台音视频的功能。一. 什么是FlutterFlutter是Google基于Dart语言开发的跨平台移动应用开发框架,开发者通过编写一份Dart代码可同时在iOS和Android平台下构建高性能、高保真、低延迟的应用程序。Flutter本身提供了丰富的UI组件,开发..._zego flutter sdk
文章浏览阅读365次。SSH服务提供两种功能,一个是远程控制服务器,第二个是对传输的数据进行加密,保护传输数据的安全性具体软件实现: Openssh:ssh协议的开源软件。工作原理:1、连接建立SSH服务器在指定的端口侦听客户端的连接请求,在客户端向服务器发起连接请求后,双方建立一个TCP连接。2、版本协商SSH协议目前存在SSH1.X(SSH2.0之前的版本)和SSH2.0版本。SSH2.0协议相比SSH1.X协议来说,在结构上做了扩展,可以支持更多的认证方法和密钥交换方法,同时提高了服务能力。_ssh服务
文章浏览阅读2.2k次,点赞16次,收藏9次。二分查找算法,也称为折半查找算法,是一种在有序数据集合中查找目标值的算法。它通过将目标值与数据集合的中间元素进行比较,从而将搜索范围缩小一半。如果目标值等于中间元素,则找到了目标;如果目标值小于中间元素,则在左半部分继续查找;如果目标值大于中间元素,则在右半部分继续查找。通过重复这个过程,最终可以找到目标值或确定目标值不存在于数据集合中。二分查找算法是一种高效且常用的搜索算法,适用于有序数据集合中的搜索操作。它通过每次将搜索范围缩小一半,快速逼近目标值,具有较低的时间复杂度和简单的实现方式。
文章浏览阅读550次。开发思路 总体开发思路 代码解析,需要考虑的问题是(目前已经实现了70%左右的功能) 代码片段的内在结构,识别代码片段中所存在的对象元素,系统根据不同的对象元素的分类能快速执行相应的处理程序,将处理的结果进行传递 将处理过程进行缓存,保留代码逻辑层面必要的数据信息,考虑数据的作用范围 批处理规则,让系统知道如何根据相应的条件与规则执行处理相应的脚本语句对象 文件函数的调用,系统判断出对象为函数还是引用外部的文件等等,参数的规则约束校验,如何响应.._程序代码模型建立
文章浏览阅读1.7k次。控件特点以page为基础扩展的控件,增加了释放后会有动画定格效果。lv_tileview_set_tile_act(tileview, ext->act_id.x + x_move, ext->act_id.y + y_move, true);//切入时开启动画效果。static void drag_end_handler(lv_obj_t * tileview){ lv_tileview_ext_t * ext = lv_obj_get_ext_attr(tilevie_lvgl tileview