教你如何在微信浏览器唤醒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();">打开APP</p>
    <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

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_29920751/article/details/78142533
上一篇LArea插件的使用
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭