最近公司的APP项目开始运行，采用的是原生框架+内嵌H5页面。作为一个菜鸡前端，开始入手学习移动端的界面制作加载性能优化。由于公司开始推广软件，加大引流量，运营部开发了软件短信提醒功能，其中需要在短信内放置软件的短链接，简单常见的一个小功能，而我要做的是提供一个短连接就可以了。

分析了一下功能需求：.当用户通过短信内部点击短链接时，会自动唤起我们的APP。

需要考虑：1.判断用户的设备类型。2.判断用户是否已经安装了此软件，安装了直接唤起，未安装安卓跳转到应用宝对应的下载页面，苹果跳转到APPStroe的下载页面。

 

参考网上文档，首先写了一个demo来实现判断设备类型，并跳转到相关下载页。

具体如下：



<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>APP下载页面</title>
 </head>
 <body>
 <script type="text/javascript">
        // 获取终端的相关信息 var Terminal = { // 辨别移动终端类型  platform : function(){ var u = navigator.userAgent, app = navigator.appVersion; return { // android终端或者uc浏览器  android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, // 是否为iPhone或者QQHD浏览器  iPhone: u.indexOf('iPhone') > -1 , // 是否iPad  iPad: u.indexOf('iPad') > -1 }; }(), // 辨别移动终端的语言：zh-cn、en-us、ko-kr、ja-jp...  language : (navigator.browserLanguage || navigator.language).toLowerCase() } // 根据不同的终端，跳转到不同的地址 var theUrl; if(Terminal.platform.android){ theUrl = '应用宝对应的下载地址'; }else if(Terminal.platform.iPhone){ theUrl = 'APPStroe对应的软件下载页面'; }else if(Terminal.platform.iPad){ theUrl = 'APPStroe对应的软件下载页面';
};
 location.href = theUrl;
</script
</body> 
</html>



之把该页面放到服务器上，生成链接地址即可。此时的效果已经实现了一半，即点击链接会根据设备类型自动跳转下载页面。

接下来我们将功能进一步的完善一下：点击短链接会先判断是否已经安装，未安装在执行以上步骤。

我们采用的唤起方式是url scheme(iOS，Android平台都支持)，Android和iOS 开发人员开发时可以实现在安装这款app到手机时，同时在手机上注册一个这个URL。只需原生APP开发时注册scheme， 那么用户点击到此类链接时，会自动跳到APP。

iframe方案的唤起原理是: 程序切换到后台时，计时器会被推迟。如果app被唤醒那么网页必然就进入了后台，如果用户从app切回来，那么时间一般会超过2s;若app没有被唤起，那么网页不会进入后台，setTimeout基本准时触发，那么时间不会超过2s。

具体实现代码如下：



<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>

        <div id="btn">
            <a onclick="submitFn"><button>打开app</button></a>
        </div>

        <script type=" text/javascript ">
            function submitFn() {
                //判断浏览器
                var u = navigator.userAgent;
                if(/MicroMessenger/gi.test(u)) {
                        // 引导用户在浏览器中打开
                        alert('请在浏览器中打开');
                        return;
                    }
                    var d = new Date();
                    var t0 = d.getTime();
                    if(u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
                        //Android 向安卓同事索要链接
                        if(openApp('en://startapp')) {
                            openApp('en://startapp');
                        } else {
                            //由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
                            var delay = setInterval(function() {
                                var d = new Date();
                                var t1 = d.getTime();
                                if(t1 - t0 < 3000 && t1 - t0 > 2000) {
                                    alert('检测到未安装，请下载APP');
                                    window.location.href = "app下载地址 ";
                                }
                                if(t1 - t0 >= 3000) {
                                    clearInterval(delay);
                                }
                            }, 1000);
                        }
                    } else if(u.indexOf('iPhone') > -1) {
                        //IOS  向IOS同事索要
                        if(openApp('ios--scheme')) {
                            openApp('ios--scheme');
                        } else {
                            var delay = setInterval(function() {
                                var d = new Date();
                                var t1 = d.getTime();
                                if(t1 - t0 < 3000 && t1 - t0 > 2000) {
                                    alert('检测到未安装，请下载APP');
                                    window.location.href = "app下载地址 ";
                                }
                                if(t1 - t0 >= 3000) {
                                    clearInterval(delay);
                                }
                            }, 1000);
                        }
                    }
                };

                function openApp(src) {
                    // 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为
                    // 否则打开a标签的href链接
                    var ifr = document.createElement('iframe');
                    ifr.src = src;
                    ifr.style.display = 'none';
                    document.body.appendChild(ifr);
                    window.setTimeout(function() {
                        document.body.removeChild(ifr);
                    }, 2000);
                }
        </script>

    </body>

</html>



然后再将页面放到服务器上面生成地址，之后百度一下，生成短链接就可以丢给运营部了~不过别忘了多机型多浏览器测试一下效果哦！