• 【h5】扫描二维码打开app或点击下载功能的实现

    背景： 有时候，会遇到这种需求，就是扫描二维码打开app，若是用户没有这个app则提示它跳转；或者，用户首次安装，通过扫描二维码进行跳转到应用商店，或直接下载apk。
        用网页直接来调用app是不可能的，必须原生那边先做一些配置。而且，安卓和苹果的调用方法是不一样的。

    一、方法1，直接统一跳转至应用市场

        在h5页面上，不管用户是否安装过app，都直接跳转至应用商店，让用户从应用市场上打开app，这种方法比较简单直接，而且，微信扫描也不需要做特殊处理。
        思路：首先，直接判断设备是android端还是ios端，然后，在点击按钮上赋值对应的应用商店下载链接就可以了。在微信上打开h5页面时也不用另外做处理，跳转之前，系统会默认弹出对话框询问是否跳转。
    在这里插入图片描述在这里插入图片描述
    具体实现：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title></title>
        <style type="text/css">
            body{
                padding-top: 30px;
            }
            .open-app {
                margin: 30px;
                border-radius: 5px;
                padding: 10px 20px;
                border: 1px solid #ccc;
            }
        </style>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>

        <a class="open-app">click me to store</a>
        
        <script type="text/javascript">

            var iosLinkUrl = "http://apps.apple.com/cn/app/id387682726" // 淘宝 app store 下载地址
            var androidLinkurl = "https://a.app.qq.com/o/simple.jsp?pkgname=com.lucky.luckyclient" //(找不到淘宝应用宝地址，这里以lucky coffee为例)

            var u = navigator.userAgent, isAndroid, isIOS

            window.onload = function() {
                init()
            }

            function init() {
                isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端
                isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

                var link = isIOS ? iosLinkUrl : androidLinkurl

                $('a').attr('href', link)
            }
            
        </script>
    </body>
</html>

    • 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
    二、方法2

        在h5页面上，用户点击打开app按钮，若用户手机上已经安装了app时，就直接打开app，否则，就引导用户前往应用市场，或者下载apk。这种操作，体验更好，方便用户操作与使用，而且，在业务需要的情况下，可以跳转到app指定页面和传参。
        思路：在h5页面上唤醒app，需要用到scheme协议（由app端小伙伴提供），但是在微信游览器中scheme协议不起作用，有时在微信上打开的一些需要跳转到app的操作时，会提示在游览器上打开就是这个原因。
        所以，需要先判断是否为微信游览器，是微信游览器的话，提示到游览器打开，不是的话，再判断是android端还是ios端，然后，作相应的处理。

    具体实现：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title></title>
        <style type="text/css">
            body{
                padding-top: 30px;
            }
            .open-app {
                margin: 30px;
                border-radius: 5px;
                padding: 10px 20px;
                border: 1px solid #ccc;
            }
        </style>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
        
        <a class="open-app">click me to app</a>
        
        <script type="text/javascript">

            $('a').click(function() {
                var u = navigator.userAgent;
                var isWeixin = u.toLowerCase().indexOf('micromessenger') !== -1; // 微信内
                var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端
                var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

                // 微信内
                if(isWeixin) {
                    alert('请在浏览器上打开')
                } else {
                    //android端
                    if (isAndroid) {
                        //安卓app的scheme协议
                        window.location.href = 'taobao://';
                        setTimeout(function(){
                            let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||window.document.webkitHidden 
                            if(typeof hidden =="undefined" || hidden ==false){
                                //应用宝下载地址 (emmm 找不到淘宝应用宝的地址，这里放的是 lucky coffee 地址)
                                window.location.href ="https://a.app.qq.com/o/simple.jsp?pkgname=com.lucky.luckyclient";
                            }
                        }, 2000);
                    }
                    //ios端
                    if (isIOS) {
                        //ios的scheme协议
                        window.location.href = 'taobao://'
                        setTimeout(function(){
                            let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||window.document.webkitHidden 
                            if(typeof hidden =="undefined" || hidden ==false){
                                //App store下载地址
                                window.location.href = "http://itunes.apple.com/app/id387682726";
                            }
                        }, 2000);
                    }
                }
                
            });
        </script>
    </body>
</html>

    • 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

    如果，能检测到scheme就跳转到协议taobao，即打开app；
    如果2秒后，还没有唤醒taobao，那么就认为该设备上没有安装taobao，即跳转到应用市场。
    这里，可以选择直接打开窗口来打开链接，或者，也可以用到iframe框架来打开链接，但是ios9屏蔽了iframe这个标签。

    借助iframe可以在原页面打开一个页面：
    使用iframe的话，既可以实现下载，又可以不重新打开页面，而且，对原页面的布局不会产生任何影响。
    关键代码：

    var src = 'http://imtt.dd.qq.com/16891/26747DD8B125A8479AD0C9D22CA47BC9.apk?fsname=com.snda.wifilocating_4.2.91_3211.apk&csr=1bbd';
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = "javascript: '