教你如何在微信浏览器唤醒APP

实现效果

如下图所示，在手机浏览器中访问南泥湾的手机版网站(wechat.nanniwan.com)，顶部会有一个广告图，点击这个广告图，如果手机上已经安装了App，则直接打开，如果没有安装，则开始下载，如果在微信公众号中，则跳转应用宝第三方平台跳转。

实现方式

1.为Android应用的启动Activity设置一个Schema，如下：

<data android:host="splash" android:scheme="cundong"/>
  
  

   
   
1
  
  
  
  

   
   
1
  
  

2.用户点击浏览器中的链接时，在动态创建一个不可见的iframe，并且让这个iframe去加载步骤1中的Schema，如下：

var ifr = document.createElement('iframe');
ifr.src="cundong://splash"
  
  

   
   
1
   
   
2
  
  
  
  

   
   
1
   
   
2
  
  

3，如果在指定的时间内没有跳转成功，则当前页跳转到apk的下载地址（或下载页），如下：

window.location = download_url;

效果实现：

① HTML页面实现

<div class="open clean" id="appstore">
    <i class="fl delete">i>
    <i class="repre fl">i>
    <p class="fr opena" id="J-call-app" href="Javascript:void();">打开APPp>
    <input id="J-download-Adr" type="hidden" name="Adr" value="https://**nanniwan_Android.apk">
    <input id="J-download-IOS" type="hidden" name="IOS" value="https://itunes.apple.com/**">
div>

方法一：

(function(){
        var ua = navigator.userAgent.toLowerCase();
        var t;
        //config 配置文件 JS 传递 scheme  客户端进行匹配
        //scheme_IOS IOS端必要参数
        //scheme_Adr 安卓端必要参数
        //download_url_Adr download_url_IOS 下载地址  timeout 过期时间
        var config = {
        //scheme:必须
              scheme_IOS: 'demo://',
            scheme_Adr: 'demo://start',
            download_url_Adr: document.getElementById('J-download-Adr').value,
            download_url_IOS: document.getElementById('J-download-IOS').value,
            timeout: 600
        };
        function openclient() {
            var startTime = Date.now();
            // 用户点击时，在动态创建一个iframe，并且让这个iframe去加载config中的Schema
            var ifr = document.createElement('iframe');
            // 端口判断 安卓或IOS
            ifr.src = ua.indexOf('os') > 0 ? config.scheme_IOS : config.scheme_Adr;
            ifr.style.display = 'none';
            document.body.appendChild(ifr);
            var t = setTimeout(function() {
                var endTime = Date.now();
                //指定的时间内没有跳转成功 当前页跳转到apk的下载地址
                if ((endTime - startTime) <(config.timeout + 200)) {
                    //判断是安卓 还是IOS
                    if (/iphone|ipad|ipod/.test(ua)) {
                        window.location.href = config.download_url_IOS;
                    } else if (/android/.test(ua)) {
                        window.location.href = config.download_url_Adr;
                    }
                } else {
                    window.close();
                }
            }, config.timeout);

            window.onblur = function() {
                clearTimeout(t);
            }
        }
        //点击事件  调用openclient方法
        window.addEventListener("DOMContentLoaded", function(){
            document.getElementById("J-call-app").addEventListener('click',openclient,true);
        }, true);
        window.addEventListener("DOMContentLoaded", function(){
            document.getElementById("J-call-app-a").addEventListener('click',openclient,true);
        }, true);
    })();

方法二：

// 点击打开APP 微信端跳转应用宝
$('#We-call-app').click(function(){
    //判断iPhone|iPad|iPod|iOS
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        window.location.href ="https://itunes.apple.com/cn/app/***";
    } else if (/(Android)/i.test(navigator.userAgent)) {  //判断Android
        window.location.href ="http://app.qq.com/#id=detail&appid=***";
    } else {  // PC端
        window.location.href ="https://www.***.com";
    }
});

安卓实现：

参考链接：http://blog.csdn.net/coslay/article/details/46889051