H__D  

应用场景

  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

  参考网页:https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html

  应用场景:

  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>

 

posted on 2016-09-06 17:52 H__D 阅读(...) 评论(...) 编辑 收藏
 
Copyright © H__D Powered by: 博客园 模板提供:沪江博客