技术标签: 笔记 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时就不会有任何反应
文章浏览阅读1.4w次,点赞3次,收藏16次。什么是PI?PI就是圆周率π,PI是弧度制的π,也就是180°所以,Math.PI = 3.14 = 180°ps,PI是一个浮小数Math.PI/5*4分别是什么意思?let dig = Math.PI/5*4Math.PI/5,表示角度平分为36° 每个顶点到与中心连线之间的夹角α=(2π)/n = Math.PI / n * 2 那么相间的两个顶点到与中心连线之间的夹..._math.pi
文章浏览阅读1.1k次。1. 解压 MySQL ZIP压缩包 到 安装路径 D:\xapp\apps\,并将解压出来的文件夹重命名为 mysql。2.将MySQL的可执行文件目录 D:\xapp\apps\mysql\bin 加入系统环境变量,然后重启计算机。6.启动Windows命令行 键入 mysql -u root -p ,然后两次回车,进入MySQL控制台。如果通过配置文件 将 数据库目录设置到了别处,则需要将 mysql程序根目录的 data目录中。的内容拷贝到新的目录中,否则MySQL无法启动。
文章浏览阅读1k次。一.Bootstrap简介1.什么是BootstrapBootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap4 目前是 Bootstrap 的最新版本,是一套用于 HTML、CSS 和 JS 开发的开源工具集。2.Bootstrap的来源Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架,使得 W._bootstrap4的好处
文章浏览阅读264次。208 . 实现 Trie (前缀树)题目:实现一个 Trie (前缀树),包含 insert, search, 和 startsWith 这三个操作。示例:Trie trie = new Trie();trie.insert(“apple”);trie.search(“apple”); // 返回 truetrie.search(“app”); // 返回 falsetrie.startsWith(“app”); // 返回 truetrie.insert(“app”);tr
文章浏览阅读6.6k次,点赞6次,收藏12次。(对于自然数N的阶乘,当N比较小时,可以32位整数int范围内准确表示 。例如12!=479001600<2147483647(231-1) 而20!=2432902008176640000<9223372036854775807(263-1)可以在64位整数long long int范围内准确表示 ,但是N取值更大时,N!只能使用浮点数计算,从而产生误差 )题目描述已知正整数N(N..._阶乘和高精度
文章浏览阅读638次。一.用到软件 1.FontCvtST.exe 2.U2C.exe 下载地址:https://i.cnblogs.com/Files.aspx二.转换1.新建文本文档,在文本文档中写入所需要用的字或词语,注意:根据用到的字或者词语,每个换行,方便后面使用,如下图2.将文本文档另存为UNICODE格式的新文本文档,备用;并将原文档再另存为UTF-8格式的新文..._st emwin修改字库
文章浏览阅读633次。数组的定义数组是相同类型数据的有序集合。数组描述的是相同类型的若干个数据,按照一定的先后次序排列组合而成。其中,每一个数据称作一个元素,每个元素可以通过一个索引(下标)来访问它们。数组的三个基本特点:1. 长度是确定的。数组一旦被创建,它的大小就是不可以改变的。2. 其元素必须是相同类型,不允许出现混合类型。3. 数组类型可以是任何数据类型,包括基本类型和引用类型。数组变量属引用类型,数组也可以看..._java file 数组
文章浏览阅读449次。实现客户姓名录入 package kj;public class kehu { String []names=new String[10]; public void addName(String name){ for(int i=0;i
文章浏览阅读722次。配置 路由 报错 'Switch' is not exported from 'react-router'.npm uninstall react-router-domnpm install [email protected]
文章浏览阅读1.1k次,点赞2次,收藏7次。ID:399899量化交易中,首先要弄好的就是选股。然后在才是买卖策略的制定。不同类型的策略,选股思路也不相同。俗话说得好,不管黑猫白猫,抓到老鼠的就是好猫。一个好的选股策略,往往在量化中是起较为关键的作用的。要实现程序化选股的话,数据又是一个前提。要有数据才能去实现编写程序。数据来源有很多,可以去爬取,也可以去股票交易网站下载。当然也有一些接口可以提供数据。常见的接口有tushare、baostock、akshare在这里我以一个简单的选股案例,为大家介绍一下使用tushare接口使用tush_tushare 选股
文章浏览阅读3.7k次,点赞2次,收藏10次。以下是测试项目目录一、配置modelconf/casbin_rbac_model.conf# 请求[request_definition]r = sub,obj,act# sub ——> 想要访问资源的用户角色(Subject)——请求实体# obj ——> 访问的资源(Object)# act ——> 访问的方法(Action: get、post...)# 策略(.csv文件p的格式,定义的每一行为policy rule;p,p2为policy rule的名字。)_gin 的权限校验
文章浏览阅读319次。例如,一个团队有20个人,其中有2个员工在共同做A业务,3个员工在共同做B业务,5个员工在共同做C业务,剩下10个员工在共同做D业务,那么可以基于业务相关性将这20个员工分成A业务研讨组、B业务研讨组、C业务研讨组和D业务研讨组,这样,在步骤2目标众筹时,就以A、B、C、D 4个研讨小组为单位,邀请其输出3~5个团队OKR,然后团队主管再基于所有小组贡献的团队OKR进行投票表决,形成团队的OKR。通过这种方式,大大增强了团队成员对团队目标的共识程度,团队目标真正变成了大家共同的目标,而不再只是主管的目标。_运营okr的制定与实施