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

夢鑰

已于 2024-02-28 15:50:15 修改

阅读量1.3k

点赞数 7

分类专栏： JavaScript 文章标签：应用商店

于 2024-02-28 15:48:35 首次发布

本文链接：https://blog.csdn.net/weixin_41620505/article/details/136347477

版权

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

文章介绍了如何使用JavaScript检查用户设备制造商，如华为、小米、OPPO、VIVO，并根据厂商识别跳转到相应的应用商店，如华为市场、小米市场等，同时处理通过QQ、微信、支付宝打开的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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

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

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