ios和android使用同一个二维码实现跳转下载链接

发表于   |  

需求：扫描一个二维码，根据手机系统跳转到对应的下载页。ios扫描跳转到appstore，android扫描跳转到对应的浏览器或者市场下载。

注意点：

  • 如果在微信中扫描二维码，需要手动跳转到手机的浏览器才能跳到下载页面。因为微信浏览器是不支持直接打开App Store页面的，以前可以通过微信中“查看原文“的function来跳转，微信升了几个版本又不行了，所以写了一个alert引导用户打开浏览器，蠢是蠢了点，但是靠谱。
  • 如果要copy使用，改一下的url就好。

下面直接上代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <div id="txt"></div>
    <script>
    var iosUrl = 'https://itunes.apple.com/fr/app/wang-yi-dong-jianar-dong-cha/id1142482530?mt=8';  //AppStore下载地址
    var anUrl = 'http://www.lofter.com/rsc/android/loftcam.apk';  //android下载地址
    var defaultUrl = 'http://dongjian.163.com/';  // pc端主页
    jump(iosUrl, anUrl, defaultUrl);
    // 去下载
    function jump(iosUrl, anUrl, defaultUrl) {
        var ua = navigator.userAgent, appVer = navigator.appVersion;
        var isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Linux') > -1;
        var isIOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        // 是安卓浏览器
        if (isAndroid) {
            window.location.href = anUrl; // 跳android端下载地址
        }
        // 是iOS浏览器
        if (isIOS) {
            window.location.href = iosUrl; // 跳AppStore下载地址
        }
        // 是微信内部webView
        if (isWeixn()) {
            // window.location.href = iosUrl; // 跳AppStore下载地址
            var txtNode = document.createTextNode('请点击右上角按钮, 点击使用浏览器打开');
            document.querySelector('#txt').appendChild(txtNode);
            alert("请点击右上角按钮, 点击使用浏览器打开");
        }
        // 是PC端
        if (isPC()) {
            window.location.href = defaultUrl;  // 公司主页
        }
    }
    // 是微信浏览器
    function isWeixn(){
        var ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)=="micromessenger") {
            return true;
        } else {
            return false;
        }
    }
    function isPC() {
        var uaInfo = navigator.userAgent;
        var agents = ["Android", "iPhone",
            "SymbianOS", "Windows Phone",
            "iPad", "iPod"];
        var flag = true;
        for (var v = 0; v < agents.length; v++) {
            if (uaInfo.indexOf(agents[v]) > 0) {
                flag = false;
                break;
            }
        }
        return flag;
    }
    </script>
</body>
</html>