网页唤醒app

常见的出现场景

浏览器 —唤醒—> App
  用户在浏览器中浏览网页时,当检测到该网页来自于某个App时,此时可以引导用户呼起或者下载App
微信、QQ —唤醒—> App
  用户将App中自己喜欢的内容分享到微信、QQ,在站外打开网页时,可以正常浏览,也可以引导用户呼起或者下载App

参考代码

### 唤醒主页面
# html
<p class="t_center link" >(如已有账号可直接在<a class="t-blue openapp "  onclick="openApp()">慧育</a>APP中绑定笔盒)<img onclick="openApp()" src="/static/images/web/hy/click.png" alt=""></p>

# javascript
    function openApp(){
        var ua = window.navigator.userAgent.toLowerCase();
        //微信
        if(ua.match(/MicroMessenger/i) == 'micromessenger'){

            layer.open({
                content: '请在浏览器内打开'
                ,skin: 'msg'
                ,time: 5
            });
            //ios下载地址  https://itunes.apple.com/cn/app/%E6%85%A7%E8%82%B2/id1453366013?mt=8
        }else{//非微信浏览器
            if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
                try {
                    window.location.href = "huiyu://h5";
                    setTimeout(function(){
                        window.location.href = "https://itunes.apple.com/cn/app/id11234567";
                    },3000)
                } catch(e) {

                }

            }else if (navigator.userAgent.match(/android/i)) {
                try {
                    window.location.href = 'huiyu://h5';
                    setTimeout(function(){
                        window.location= "http://myproject.com/down.html"; //android下载地址
                    },3000);
                } catch(e) {

                }
            }
        }
    }
### 未安装app,跳转到下载app页面(微信浏览器需要用其他浏览器打开)

<!doctype html> 
<html> 
<head>
    <meta charset="UTF-8">
    <title>下载APP</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <style>
        @charset "utf-8";
        *{margin:0; padding:0;}
        a{text-decoration:none;outline:none; color: #000; blr:expression(this.onFocus=this.blur());}
        html,body{width: 100%; height: 100%; font-family:"微软雅黑","arial";  font-size:1.2rem; color:#000; background:rgb(47,129,255);}
        .indexBg{
            width:100%;
            height: 100%;
            background:url(images/indexBg.jpg) rgb(48,125,255) no-repeat;
            background-size: 100%;
            position: relative;
            background-position: 0 0;
        }
        .down{

            width:7.777rem;
            height:2.564rem;
            line-height: 2.564rem;
            display: block;
            text-align: center;
            font-size: 1.538rem;
            color: #37b6ff;
            position: absolute;
            top:47.5rem;
            left: 38%;
            background:#fff;
            border-radius: .8rem;
        }
    </style>
</head>
<body >
    <div class="indexBg">

    </div>
</body>
</html>
<!-- 弹出框 start-->
<script type="text/javascript">
 (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          docEl.style.fontSize = 10 * (clientWidth / 320) + 'px';
        };

      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
 })(document, window);
</script>

 <script type="text/javascript">
window.onload = function(){

    if(isWeiXin()){

    }else{

        if(isIos()){
            window.location.href = "https://itunes.apple.com/app/12345678"
        }else{
            window.location.href = "http://myproject.com/myapp.apk"
        }
    }
}

function isWeiXin(){
    var ua = window.navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i) == 'micromessenger'){
        return true;
    }else{
        return false;
    }
}

function isIos(){
    var ua = window.navigator.userAgent;
    if(!!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){
        return true;
    }else{
        return false;
    }
}
</script>

可以转载,但必须说明出处

发表评论