JavaScript - 唤醒 app store 跳转到苹果商店内下载指定应用页面安卓跳转默认浏览器应用页面

ZGH_77733

已于 2022-05-11 11:54:13 修改

阅读量5.6k

点赞数 5

文章标签： javascript vscode

于 2022-05-06 18:56:11 首次发布

本文链接：https://blog.csdn.net/ZGH_77733/article/details/124616268

版权

本篇文章主要记录通过微信分享页判断设备类型并跳转对应的下载页；

安卓跳转默认浏览器苹果跳转苹果商店App Store

通过 window.navigator 获取智能机信息、浏览器版本信息

获取智能机信息为iPhone设备时，电脑测试会报错，原因是页面跳转会自动链接苹果商店，而windows的电脑并没有这个苹果商店

// Failed to launch 'itms-appss://apps.apple.com/cn/app/dsoon?id=1618455777' because the scheme does not have a registered handler.

代码记录一下方便日后自己参考，需要的朋友也可以参考下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正在加载...</title>
</head>
<body>

</body>
<script type="text/javascript">
    // 通过 window.navigator 获取智能机信息、浏览器版本信息
    var browser = {
        versionsFn: function () {
            let u = navigator.userAgent;
            return {
                trident: u.indexOf('Trident') > -1, //IE内核  
                presto: u.indexOf('Presto') > -1, //opera内核  
                webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核  
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端  
                iPhone: u.indexOf('iPhone') > -1, //是否为iPhone终端   
                iPad: u.indexOf('iPad') > -1, //是否iPad终端    
                Windows: u.indexOf('Windows') > -1, //是否Windows终端   
                Android: u.indexOf('Android') > -1, //Android终端
                webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
            };
        },
        language: (navigator.browserLanguage || navigator.language).toLowerCase()
    };

    let versions = browser.versionsFn();

    if (versions.iPhone) {
        // 此处写iPhone的下载地址 
        window.location = "https://apps.apple.com/cn/app/dsoon/id1618455777";
    } else if (versions.Android) {
        // 此处写Andoird的下载地址
        window.location = "https://play.google.com/store/apps/details?id=com.rxt.dsoonpro";
    } else {
        // 都不满足进入指定下载地址
        window.location = "https://vikiatech.com/pages/download";
    }
</script>
</html>

以上就已经完成中转页功能，把这个HTML文件部署到服务器即可

iPhone通过微信点击网址进入中转页是不会跳转App Store，这里有两种处理方法

1、右上角的【•••】]然后点击【在浏览器打开】才能跳转

2、中转页的网址拿到网上在线工具生成一下

补充：这种需求一般是微信扫码进入中转页，那么部署好后我们只需要把中转页的网址拿到网上在线工具生成一下二维码即可（自己常用草料二维码生成器）