应用场景
App产品在运营推广上有一个需求，就是要求可以让用户在访问我们的推广网页时，就可以判断出这个用户手机上是否安装了我们的App，如果安装了则可以直接在网页上打开，否则就引导用户前往下载。从而形成一个推广上的闭环。
解决办法
而对于点击链接后，能否直接打开，可以通过下面的代码来实现。前提条件：你得知道你的APP对应的打开协议，如贴吧APP，协议为：com.baidu.tieba:// ，微信的：weixin:// ，等等
1 <!-- a标签点击打开的动作，在click事件中注册 --> 2 <a href="javascript:;" id="openApp">贴吧客户端</a> 3 <script type="text/javascript"> 4 document.getElementById('openApp').onclick = function(e){ 5 // 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止js其他行为 6 7 var ifr = document.createElement('iframe'); 8 ifr.src = 'com.baidu.tieba://';//打开app的协议，有app同事提供 9 ifr.style.display = 'none'; 10 document.body.appendChild(ifr); 11 window.setTimeout(function(){ 12 document.body.removeChild(ifr); 13 window.location.href = "https://itunes.apple.com/cn/app/id477927812";//打开app下载地址，有app同事提供 14 },2000) 15 }; 16 </script>
此方法有些浏览器不兼容iframe，可以window.location的方法解决
1 <a href="javascript:;" id="openApp">贴吧客户端</a> 2 <script type="text/javascript"> 3 document.getElementById('openApp').onclick = function(e){ 4 window.location.href = "com.baidu.tieba://"; 5 window.setTimeout(function(){ 6 window.location.href = "https://itunes.apple.com/cn/app/id477927812";//打开app下载地址，有app同事提供 7 },2000) 8 }; 9 </script>
IOS上的Banner
应用场景：
1、用户第一次访问宣传页面
a、点击Banner，进入到APP Store中对应的APP下载页
b、APP下载页中提示：安装；用户点击安装
c、安装完成后，APP下载页中提示：打开；用户继续点击打开
d、用户正常使用APP
2、用户第二次访问宣传页面
a、点击Banner，进入到APP Store中对应的APP下载页
b、APP下载页中提示：打开；用户直接点击打开
c、用户正常使用APP
3、用户第三次、第四次、...、第N次访问，操作步骤同2
在iOS上，要增加一个APP的大Banner，其实只需要在<head>标签内增加一个<meta>标签即可，格式如：
<meta name='apple-itunes-app' content='app-id=你的APP-ID'>
百度贴吧的
1 <meta name='apple-itunes-app' content='app-id=477927812'>
测试Demo
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>this's a demo</title> 6 <meta name='apple-itunes-app' content='app-id=477927812'> 7 </head> 8 <body> 9 <a href="javascript:;" id="openApp">贴吧客户端</a> 10 </body> 11 </html> 12 <script type="text/javascript"> 13 document.getElementById('openApp').onclick = function(e){ 14 15 if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) 16 { 17 window.location.href = "com.baidu.tieba://";//ios app协议 18 window.setTimeout(function() { 19 window.location.href = "https://itunes.apple.com/cn/app/id477927812"; 20 }, 2000) 21 } 22 if(navigator.userAgent.match(/android/i)) 23 { 24 window.location.href = "com.baidu.tieba://app";//android app协议 25 window.setTimeout(function() { 26 window.location.href = "https://****.apk";//android 下载地址 27 }, 2000) 28 } 29 }; 30 </script>
