在阅读本文之前你首先应该对js有基本对掌握,并且对Scheme,intent有一定的理解。更多的是代码

上午给朋友做了一个产品引导页,但是需要判断ios系统的TestFlight是否安装,进行了google一下发现了callapp-lib库

很有效的解决了这个问题,但是并不是很完美,我也没有找到很完美的解决这个问题,包括我在本文所说的,只是一种很不入流的方式,但是还是有效的,

兼容情况就不说了,不考虑~,主要是就是唤醒你需要的软件。

callapp-lib这里利用了别人的库,可以省略部分代码,`callapp-lib`可以直接唤醒app,以及唤醒失败的`callback`,但是你得传入Scheme。

`callapp-lib`库可能有一点问题,我也没有理解透彻,它并不给你提供唤醒成功`callback`的功能,所以需要我们自己补足。
文档:callapp-lib
import CallApp from 'callapp-lib'
const option = {
scheme: {
protocol: 'itms-beta',
},
outChain: {
protocol: 'itms-beta',
path: '',
},
appstore: 'http://www.apple.com',
yingyongbao: 'http://www.zhihu.com',
fallback: 'https://www.baidu.com',
timeout: 3000,
};
const lib = new CallApp(option);
const callButton = document.querySelector('#call-button');
callButton.addEventListener('click', () => {
vm.is_show = 1
this.$toast.loading({
mask: true,
message: '加载中...'
});
lib.open({
path: '/text',
callback: function () {
vm.is_show = 0
self.$toast.fail('打开TestFlight失败,请先下载支持软件TestFlight');
return false
}, });
});

  


检测网页是否被切到后台运行,并监听该事件
`is_show` 是为了阻止重复加载
APP 如果被唤起的话,页面就会进入后台运行,会触发页面的 visibilitychange 事件。如果触发了,则表明页面被成功唤起,支持callback,如果失败的话就会触发前面`callapp-lib`我们传入的失败callback
 var hidden, state, visibilityChange;
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
}
document.addEventListener(visibilityChange, function () {
// eslint-disable-next-line
//这里判断不要重复下载
if (vm.is_show == 1) {
vm.is_show = 0
alert('正在下载');
location.reload()
} }, false);

原创不易,转载请附上原文出处链接,谢谢
原文链接:https://lihengc.github.io/2019/09/24/H5%E7%BD%91%E9%A1%B5%E5%94%A4%E9%86%92app-%E5%88%A4%E6%96%ADapp%E5%AE%89%E8%A3%85/

H5网页唤醒app,判断app安装的更多相关文章

  1. h5网页跳转到app,若未安装app,则跳转app下载页面

    if(isAndroid){ android(); function android(){ var ifr = document.createElement("iframe"); ...

  2. H5网页应用打包安卓App (全网最详细教程)

    img { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important } .red { color: rgba(255, 0, 0, 1) } ...

  3. 12、xamarin form中实现H5 网页唤醒微信支付的方法

    在微信的支付中有种支付叫微信H5支付.方便用户在网页中轻松唤起微信进行支付. 当然微信不推荐大家使用这样的方式唤起微信支付.建议app还是使用正常的微信支付sdk即可 服务端与其他的建议参考微信支付官 ...

  4. web页面打开本地app(判断是否安装)

    在应用宝中有APP申请链接: //是否可以打开App不可以跳则到下载页 $(".downNow button").on("click",function(){ ...

  5. 关于APP,原生和H5开发技术的争论 APP开发技术选型判断依据

    关于APP,原生和H5开发技术的争论 App的开发技术,目前流行的两种方式,原生和Html5.原生分了安卓平台和ios平台(还有小众的黑莓.死去的塞班就不说了),H5就是Html5. 目前争论不休的问 ...

  6. 点击页面判断是否安装app并打开,否则跳转app store的方法

    常常有这样的场景,咱们开发出来的APP需要进行推广,比如在页面顶部来一张大Banner图片,亦或一张二维码.但往往我们都是直接给推广图片加了一个下载链接(App Store中的).所以咱们来模拟一下用 ...

  7. 在web浏览器中判断app是否安装并直接打开

    最近公司App产品在运营推广上有一个需求,就是要求可以让用户在访问我们的推广网页时,就可以判断出这个用户手机上是否安装了我们的App,如果安装了则可以直接在网页上打开,否则就引导用户前往下载.从而形成 ...

  8. 【JS】点击页面判断是否安装app并打开,否则跳转下载的方法

    应用场景 App产品在运营推广上有一个需求,就是要求可以让用户在访问我们的推广网页时,就可以判断出这个用户手机上是否安装了我们的App,如果安装了则可以直接在网页上打开,否则就引导用户前往下载.从而形 ...

  9. h5 调起app 如果没安装就跳转下载

    <!doctype html> <html> <head> <title></title> <meta charset="u ...

随机推荐

  1. jacky解读麻省理工《计算机科学与Python编程导论》第1集

    文:@数据分析-jacky(朱元禄) (一)导言 本课程讲的中心思想就是五个字:计算机思维 Python只是辅助工具,是辅助大家理解计算机思维,仅此而已 急功近利是人性,适得其反是结果:我们看到有很多 ...

  2. Ubuntu14.04 支持 exFat 格式操作

    推荐u盘使用exfat格式,为什么呢?两个原因: 1.三大主流操作系统(Linux.Mac.Windows)都支持exfat格式.2.exfat支持大于4G的文件. 在ubuntu下,由于版权的原因( ...

  3. 第三章、HTTP报文

    1 报文流 HTTP 报文是在 HTTP 应用程序之间发送的数据块.这些数据块以一些文本形式的元信息(meta-information)开头.这些报文在客户端.服务器和代理之间流动.术语“流入”.“流 ...

  4. go区分操作系统

    package main import ( "fmt" "runtime" ) func main() { fmt.Println("Go runs ...

  5. JNI调用C和C++存在的区别

    JNI调用C和C++存在的区别   JNI是由C语言定义接口的,JNI通过函数名找函数入口,执行函数里的内容.这和函数用什么语言生成的并没有关系.只要保证函数名称符合JNI的协议.而使用C++要注意的 ...

  6. C++重写(覆盖)、重载、重定义、多态

    1 重写(覆盖)override override是重写(覆盖)了一个方法,以实现不同的功能.一般用于子类在继承父类时,重写(覆盖)父类中的方法.函数特征相同,但是具体实现不同. 重写需要注意: 被重 ...

  7. scikit-learn机器学习(四)使用决策树做分类,并画出决策树,随机森林对比

    数据来自 UCI 数据集 匹马印第安人糖尿病数据集 载入数据 # -*- coding: utf-8 -*- import pandas as pd import matplotlib matplot ...

  8. Hadoop常用命令介绍

    本文主要介绍 Hadoop 常用的命令. test命令 用于检测文件或目录是否存在,判断文件或目录大小. -test -[defsz] <path> : Answer various qu ...

  9. mysql自身报错、java、reids连接mysql数据库报错汇总

    1.Can't connect to local MySQL server through socket 'tmpmysql.sock' (2) 原因是mysql根本没有启动 2.Access den ...

  10. 修改ssh端口

    centos7.5修改默认SSH端口 linux SSH默认端口是22,不修改的话存在一定的风险,要么是被人恶意扫描,要么会被人破解或者攻击,所以我们需要修改默认的SSH端口 1.修改22端口为620 ...