实现效果
如下图所示,在手机浏览器中访问南泥湾的手机版网站(wechat.nanniwan.com),顶部会有一个广告图,点击这个广告图,如果手机上已经安装了App,则直接打开,如果没有安装,则开始下载,如果在微信公众号中,则跳转应用宝第三方平台跳转。
实现方式
1.为Android应用的启动Activity设置一个Schema,如下:
<data android:host="splash" android:scheme="cundong"/>
2.用户点击浏览器中的链接时,在动态创建一个不可见的iframe,并且让这个iframe去加载步骤1中的Schema,如下:
var ifr = document.createElement('iframe');
ifr.src="cundong://splash"
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