在手机浏览器中打开指定的应用商店

前言

大牛：你们这应用下载太慢了，为何不跳转到手机自带的应用商店下载，还不占用你们服务器的资源！
程序猿：哇！！！是的啊！

一、如何区分现在运行在哪一个厂商的手机里面？

下面仅仅列出了：华为、小米、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'}}

二、如果是通过QQ、微信、支付宝打开的网址怎么办？

    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;">用一次&nbsp&nbsp牛一次</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>