大牛：你们这应用下载太慢了，为何不跳转到手机自带的应用商店下载，还不占用你们服务器的资源！
程序猿：哇！！！是的啊！
下面仅仅列出了：华为、小米、OPPO、VIVO这4个厂商，因为我们之上架了这4个商店。
function verifyManufacturer() {
const userAgent = navigator.userAgent.toLowerCase()
const isIphone = userAgent.match(/(iphone|ipad|ipod)/i);
const isHuawei = userAgent.match(/huawei/i);
const isHonor = userAgent.match(/honor/i);
const isOppo = userAgent.match(/oppo/i);
const isOppoR15 = userAgent.match(/PACM00/i);
const isVivo = userAgent.match(/vivo/i);
const isXiaomi = userAgent.match(/mi\s/i);
const isXIAOMI = userAgent.match(/xiaomi/i);
const isXiaomi2s = userAgent.match(/mix\s/i);
const isRedmi = userAgent.match(/redmi/i);
if (isIphone) {
return 'iphone'
} else if (isHuawei || isHonor) {
return 'huawei';
} else if (isOppo || isOppoR15) {
return 'oppo';
} else if (isVivo) {
return 'vivo';
} else if (isXiaomi || isRedmi || isXiaomi2s || isXIAOMI) {
return 'xiaomi';
} else {
return 'other'
}
}
function channelSource() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return "weixin";
} else if (ua.match(/QQ/i) == "qq") {
return "QQ";
} else if (ua.match(/Alipay/i) == "alipay" && payway == 2) {
return "alipay";
}
return false;
}
如果是通过这几个厂商的浏览器中打开的则直接跳转到对应的应用商店，如果不是通过这几个应用商店打开则只能通过自己的服务器上下载了。
function goDownload() {
const iosLinkUrl = 'IOS的appstore应用地址';
const androidLinkurl = '自己服务器的下载地址';
if (channelSource()) {
//内置浏览器 可加提示使其打开手机自带浏览器
window.location.href = androidLinkurl;
return;
}
const huaweiUrl = 'appmarket://details?id=Android包名';
const oppoUrl = "oppomarket://details?packagename=Android包名";
const vivoUrl = "vivomarket://details?id=Android包名";
const xiaomiUrl = 'mimarket://details?id=Android包名';
switch (this.verifyManufacturer()) {
case 'iphone':
window.location.href = iosLinkUrl;
break;
case 'xiaomi':
window.location.href = xiaomiUrl;
break;
case 'huawei':
window.location.href = huaweiUrl;
break;
case 'vivo':
window.location.href = vivoUrl;
break;
case 'oppo':
window.location.href = oppoUrl;
break;
default:
window.location.href = androidLinkurl;
break;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>下载中心</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="__CDN__/assets/css/bootstrap.css" rel="stylesheet">
<script src="__CDN__/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="__CDN__/assets/js/bootstrap.min.js"></script>
<style type="text/css" media="all">
.weixin-tip {
display: none;
position: fixed;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.8);
filter: alpha(opacity=80);
height: 100%;
width: 100%;
z-index: 100;
}
.weixin-tip p {
text-align: center;
margin-top: 10%;
padding: 0 5%;
}
.img1 {
width: 100%;
height: 100%;
filter: alpha(opacity=100);
-moz-opacity: 0.4;
-khtml-opacity: 0.5;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="weixin-tip" id="weixin_tip">
<img src="http://qny.ruixue.xingnuo.vip/uploads/20231026/FqotZR59umvmB5JtGVWyTHIFqyOa.jpg" class="img1"/>
</div>
<div id="down" >
<div class="col-md-12 text-center" style="margin-top:200px;display:flex;flex-direction: column;">
<span ><img src="{$logo|htmlentities}" style="width: 60px;height: 60px;"></span>
<span style="font-size: 24px;" >小伙伴儿</span>
<div><span style="color:#a1a1a1;">用一次  牛一次</span></div>
</div>
<div class="col-md-12 text-center" style="margin-top:50px;"><a id="url" href="{$a_url}" download></a>
<button onclick="downLoadAppOwen();" style="width: 85%;height: 60px;border-radius: 25px;background-color: #22d49a;outline:none;border: none"><span style="color:#fff;font-size: 20px;margin-top:20px;margin-left:10px;">下载APP</span></button>
</div>
</div>
<script type="text/javascript" charSet="utf-8">
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
var winHeight = window.innerHeight;
var weixin_top = document.getElementById('weixin_tip');
weixin_top.style.display = 'block';
weixin_top.style.height = winHeight;
var down = document.getElementById('down');
down.style.display = 'none';
} else {
var weixin_top = document.getElementById('weixin_tip');
weixin_top.style.display = 'none';
var down = document.getElementById('down');
down.style.display = 'block';
goDownload();
}
function downLoadAppOwen() {
var url = '自己服务器的下载地址';
var isIOS = /(iPhone|iPad|iPod)/i.test(navigator.userAgent); // 通过User-Agent判断是否为iOS设备
var isAndroid = /android/i.test(navigator.userAgent) && !isIOS; // 通过User-Agent判断是否为Android设备
if(isIOS){
url = 'IOS的appstore应用地址'
}
window.location.href = url;
}
</script>
</body>
</html>
上面包含了打开ios的应用商店和Android的应用商店。
ios的打开应用商店很简单，因为ios只用一个厂商。
Android手机厂商就多了有很多。华为、oppo、vivo、小米等等