H5唤醒app,第三方开源库

时间:2023-03-09 03:37:17
H5唤醒app,第三方开源库
在微信浏览器内,安卓打开应用宝,ios跳进appstore,基本都可以成功
在外部浏览器内,已安装可进入应用内,未安装进入应用宝提示下载,需客户端支持。
<!DOCTYPE html>
<!-- saved from url=(0034)https://www.zihexin.net/m/?c=11111 -->
<html class="" id="htmlf" style="font-size: 455.556px;"><!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title>app介绍</title>
<script src="../js/jquery.min.js"></script>
<script src="../js/clipboard.min.js"></script>
<script src="https://unpkg.com/callapp-lib@2.1.5/dist/index.umd.min.js"></script> <link href="../css/m_style.css" rel="stylesheet" type="text/css">
</head>
<body onclick="copydata()" data-clipboard-text="bar" id='bodyBar'>
<style>
section p{ padding-left:0;}
section{ padding-top:0.2rem;}
body{cursor:pointer;}
</style> <div class="gridContainer">
<footer class="dow" id="dow" style="display: none;">
<p></p>
<article>请点击本页面右上角选择使用浏览器打开即可</article>
</footer>
<script>
var u = navigator.userAgent, app = navigator.appVersion;
if(!(u.indexOf('MicroMessenger') > -1)){
document.getElementById("dow").style.display="none";
}
</script>
<div class="f_dingbu"><a href="javascript:;"><img style="width:100%;" src="../images/appxiazai_01.png"></a></div>
<header id="dow_a" >
<img src="../images/appxiazai_02.png" alt="app下载广告图" >
</header>
<ul class="uls">
<li class="lis">
<img src="../images/appxiazai_03.png" alt="">
</li>
<li class="lis">
<img src="../images/appxiazai_04.png" alt="">
</li>
<li class="lis">
<img src="../images/appxiazai_05.png" alt="">
</li>
<li class="lis">
<img src="../images/appxiazai_06.png" alt="">
</li>
</ul>
</div>
</body>
</html>

第三方开源实现库:https://github.com/suanmei/callapp-lib

引入js :

<script src="https://unpkg.com/callapp-lib@2.1.5/dist/index.umd.min.js"></script>

不用再判断浏览器版本,安卓微信会通过应用宝打开,ios会进入appstore。

var Terminal={};
const options = {
scheme: {
protocol:'zihexin://openapp',//和安卓ios统一的,openapp表示唤起,安卓ios配openapp之前的zihexin://
},
intent: {
package: '',
scheme: '',
},
timeout: 3000,
appstore: 'https://itunes.apple.com/cn/app/zi-he-xin/id581817870?mt=8',//appstore地址
yingyongbao: 'https://a.app.qq.com/o/simple.jsp?pkgname=com.zihexin',//应用宝地址
fallback: 'https://a.app.qq.com/o/simple.jsp?pkgname=com.zihexin',//唤起应用失败,未安装时跳转到应用宝地址
};
    const callLib = new CallApp(options);
var clipboard = new Clipboard('#bodyBar');
clipboard.on('success', function(e) {
e.clearSelection();
}); clipboard.on('error', function(e) { });
function copydata(){
var url = window.location;
$('#bodyBar').attr('data-clipboard-text',url);
callLib.open({path:''})
}
// 获取终端的相关信息可不用
window.onload=function(){
Terminal = {
// 辨别移动终端类型
platform : function(){
return {
// android终端或者uc浏览器
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
// 是否为iPhone或者QQHD浏览器
iPhone: u.indexOf('iPhone') > -1 ,
// 是否iPad
iPad: u.indexOf('iPad') > -1,
//是否为微信
mic:u.indexOf('MicroMessenger') > -1,
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
}