关于H5唤醒APP的功能实现(千辛万苦啊!)

首先，我是个后端，写java的，甚至不是搞移动端的，所以js这方面有点底子但不专业，对于出现的错误也请见谅，原来项目要求有个H5页面打开APP的功能就强行要做，没办法就想办法搞一下，网上的教程基本都是差不多套路，APP厂商也没有提供启动的接口之类的，只能从系统注册表考虑启动应用，所以这下面的代码都是基于你知道这个app的scheme_url和scheme_hosts是啥的基础上进行的。对于不知道这两个地址的只能说：度娘找你。

并不一定保证百分百打开，只能设置定时器去等应用启动，如果终端反应慢一拍，6秒过了还没启动，代码就认为没应用，会跳转到下载页面去下载。当然安卓稍微容易一些，IOS就比较封闭了。啥话不说,先上js代码

//启动app方法
function startApp(url, url2) {
//url是跳转的scheme地址,这个建议下个反编译的软件,去第三方apk查他们设置的scheme_url和scheme_host是什么,我就是这样干的
//url2是应用下载地址,要分清ios和android的不一样
//将下载地址保存到全局变量
downloadUrl = url2;
if (ua.match(/ipad|iphone|ipod|ios/i)) {
//外部一个定时器,专门盯着启动app的定时器loop;就叫它killer吧
//计时6秒,之后干掉loop.
window.setTimeout(function() {
$('#message').html('');
$('.result-message').eq(0).css("display", "none");
clearTimeout(loop);
time = parseInt('6000') / 1000;
},
6000);
//尝试启动应用
location.href = url;
//同时开始应用启动倒计时
countDown();

} else {
//安卓的就是用iframe来测试是否安装和启动应用了
window.setTimeout(function() {
$('#message').html('');
$('.result-message').eq(0).css("display", "none");
clearTimeout(loop);
time = parseInt('6000') / 1000;
},
6000);
//创建iframe并启动应用入口
openApp(url);

}

}

function openApp(src) {
// 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP
var ifr = document.createElement('iframe');
ifr.src = src;
ifr.style.display = 'none';
document.body.appendChild(ifr);
//切换到iframe时
//此时,会有个问题,如后切换到应用时间小于killer所需要杀死loop的时间,loop就会跳到下载提示,killer`就失去作用了
countDown();
window.setTimeout(function() {
document.body.removeChild(ifr);
},
5000);
//倒计时
}

function countDown() {
//每秒调用一次
loop = window.setTimeout('countDown()', 1000);
if (time > 0) {
$('.result-message').eq(0).css("display", "block");
$('#message').html('正在尝试打开客户端 ' + time + 's');

time--;
if (time == 0) {
/*if(ua.match(/ipad|iphone|ipod|ios/i)){
console.log(downloadUrl);
location.href = downloadUrl;
}*/
//如果计时到0,loop任然没被干掉,就说明应用没有启动,此时,跳到下载提示界面
//定时器的局限性还是很大,不能响应式反应,所以只能做到这一步了
$('#message').html('');
$('.result-message').eq(0).css("display", "none");
clearTimeout(loop);
time = parseInt('6000') / 1000;
var btnArray = ['否', '是'];
mui.confirm('您没有安装该应用,是否下载安装包?', '应用下载', btnArray,
function(e) {
if (e.index == 1) {
location.replace(downloadUrl);
} else {
return;
}
});
}
}
}
//url2是应用下载地址,要分清ios和android的不一样
//将下载地址保存到全局变量
downloadUrl = url2;
if (ua.match(/ipad|iphone|ipod|ios/i)) {
//外部一个定时器,专门盯着启动app的定时器loop;就叫它killer吧
//计时6秒,之后干掉loop.
window.setTimeout(function() {
$('#message').html('');
$('.result-message').eq(0).css("display", "none");
clearTimeout(loop);
time = parseInt('6000') / 1000;
},
6000);
//尝试启动应用
location.href = url;
//同时开始应用启动倒计时
countDown();

} else {
//安卓的就是用iframe来测试是否安装和启动应用了
window.setTimeout(function() {
$('#message').html('');
$('.result-message').eq(0).css("display", "none");
clearTimeout(loop);
time = parseInt('6000') / 1000;
},
6000);
//创建iframe并启动应用入口
openApp(url);

}

}

function openApp(src) {
// 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP
var ifr = document.createElement('iframe');
ifr.src = src;
ifr.style.display = 'none';
document.body.appendChild(ifr);
//切换到iframe时
//此时,会有个问题,如后切换到应用时间小于killer所需要杀死loop的时间,loop就会跳到下载提示,killer`就失去作用了
countDown();
window.setTimeout(function() {
document.body.removeChild(ifr);
},
5000);
//倒计时
}

function countDown() {
//每秒调用一次
loop = window.setTimeout('countDown()', 1000);
if (time > 0) {
$('.result-message').eq(0).css("display", "block");
$('#message').html('正在尝试打开客户端 ' + time + 's');

time--;
if (time == 0) {
/*if(ua.match(/ipad|iphone|ipod|ios/i)){
console.log(downloadUrl);
location.href = downloadUrl;
}*/
//如果计时到0,loop任然没被干掉,就说明应用没有启动,此时,跳到下载提示界面
//定时器的局限性还是很大,不能响应式反应,所以只能做到这一步了
$('#message').html('');
$('.result-message').eq(0).css("display", "none");
clearTimeout(loop);
time = parseInt('6000') / 1000;
var btnArray = ['否', '是'];
mui.confirm('您没有安装该应用,是否下载安装包?', '应用下载', btnArray,
function(e) {
if (e.index == 1) {
location.replace(downloadUrl);
} else {
return;
}
});
}
}
}

整理了一下,定时器还是不好用,这也是没办法的办法了,网上大多的教程都是定时器,不是定时器的我又不明白人家啥意思,而且大部分都是安卓的,ios就是个坑,safari不支持iframe的跳转,就搞的我人都凌乱了,只能自己想办法,这个之前那个两个定时器控制的调转差不多,将就着看吧
---------------------
作者：话说起个名字好难
来源：CSDN
原文：https://blog.csdn.net/sinat_29194935/article/details/70820398
版权声明：本文为博主原创文章，转载请附上博文链接！