<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>H5打开APP或小程序</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
.content_box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.content_box div {
width: 220px;
text-align: center;
padding: 10px 0;
margin-top: 40px;
border-radius: 5px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="content_box">
<div id="openApp">打开APP</div>
<div id="openApplet">打开小程序</div>
</div>
<script type="text/javascript">
/* 打开APP */
$('#openApp').click(function() {
const u = navigator.userAgent; // 用户设备
const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; // Android终端
const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
let schemeURL = ''; // scheme协议(地址由安卓端跟ios端提供)
let downloadURL = ''; // 软件下载地址
// 安卓操作系统
if (isAndroid) {
console.log('安卓操作系统');
schemeURL = 'XXX'; // 安卓app的scheme协议
downloadURL = "XXX"; // 应用宝下载地址
}
// 苹果操作系统
if (isIOS) {
console.log('苹果操作系统');
schemeURL = 'XXX'; // ios的scheme协议
downloadURL = "XXX"; // App store下载地址
}
window.location.href = schemeURL; // scheme协议
setTimeout(function() {
const hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||
window.document.webkitHidden;
if (typeof hidden == "undefined" || hidden == false) {
window.location.href = downloadURL; // 软件下载地址
}
}, 2500);
});
/* 打开小程序 */
$('#openApplet').click(function() {
const ua = navigator.userAgent.toLowerCase(); // 获取判断用的对象
// 在新浪微博客户端打开
if (ua.match(/WeiBo/i) == "weibo") {
console.log('在新浪微博客户端打开');
// username:微信小程序的原始ID;path:微信小程序的页面地址,可以拼接参数
window.location.href = `sinaweibo://wbdiversion?username=${"username"}&path=${"path"}`;
}
// 其他客户端打开
else {
console.log('其他客户端打开');
// 格式通常为:weixin://dl/business/?t=URL Scheme值(https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html)
window.location.href = `weixin://dl/business/?t=*******`;
}
})
</script>
</body>
</html>
|