京东联盟如何在手机H5页面打开京东APP并跳到推广页

作者：维易PHP培训学院时间 2018-04-23

《京东联盟如何在手机H5页面打开京东APP并跳到推广页》要点：
本文介绍了京东联盟如何在手机H5页面打开京东APP并跳到推广页，希望对您有用。如果有疑问，可以联系我们。

方式2：使用框架方式（不适合IOS）：

经测试，在安卓上，效果和直接用链接一样。小米自带的浏览器也是打不开APP：

因此，推荐全部使用链接方式，简单。

完整代码：

<!doctype html>
<html>
<head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

       <meta name="apple-mobile-web-app-capable" content="yes">
       <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

       <title>this's a demo</title>
       <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui">
       <script type="text/javascript" src="http://www.weishang89.com/public/js/jquery-2.1.4.min.js"></script>

</head>
<body>




<h1>
       <a href='openApp.jdMobile://virtual?params={"category":"jump","des":"DM","dmurl":"https://sale.jd.com/m/act/zQ1hbkYdU4i.html","cu":"true","utm_source":"kong","utm_medium":"tuiguang","utm_campaign":"t_2011156376_","utm_term":"23f7b53d8c8d4392a3a93cd593b31bcd","abt":"3"}' target="_blank">京东推广-链接打开，适用IOS</a>
</h1>

<br />


<h1>
       <a class="callApp" href='openApp.jdMobile://virtual?params={"category":"jump","des":"DM","dmurl":"https://sale.jd.com/m/act/zQ1hbkYdU4i.html","cu":"true","utm_source":"kong","utm_medium":"tuiguang","utm_campaign":"t_2011156376_","utm_term":"23f7b53d8c8d4392a3a93cd593b31bcd","abt":"3"}' target="_blank">京东推广-框架打开APP</a>
</h1>


<script>
       //安卓手机中，小米浏览器测试只会跳到京东的H5网站，再点击页面上的链接才会自动打开京东APP，
       //QQ浏览器测试成功。
       $(function(){
              var last = Date.now(),
                     doc = window.document,
                     ifr = doc.createElement('iframe');

              //创建一个隐藏的iframe
              ifr.src = 'openApp.jdMobile://virtual?params={"category":"jump","des":"DM","dmurl":"https://sale.jd.com/m/act/zQ1hbkYdU4i.html","cu":"true","utm_source":"kong","utm_medium":"tuiguang","utm_campaign":"t_2011156376_","utm_term":"23f7b53d8c8d4392a3a93cd593b31bcd","abt":"3"}';
              ifr.style.cssText = 'display:none;border:0;width:0;height:0;';
              /*doc.body.appendChild(ifr);   
              

              */

              //document.getElementById('J-download-app')
              $('a.callApp').click(function (e) {
                     e.preventDefault();
                     //var href= $(this).attr('href');      
                     //ifr.src      = href;
                     doc.body.appendChild(ifr);

                     setTimeout(function() {
                            doc.body.removeChild(ifr);
                            //setTimeout回小于2000一般为唤起失败 
                            if (Date.now() - last < 2000) {
                                   if (typeof onFail == 'function') {
                                          //onFail();
                                          alert('Fail');
                                   } else {
                                          //弹窗提示或下载处理等
                                   }
                            } else {
                                   if (typeof onSuccess == 'function') {
                                          //onSuccess();
                                          alert('Success');
                                   }
                            }
                     }, 1000);
              })
       });
</script>

<br />
iframe方案的唤起原理是: 程序切换到后台时，计时器会被推迟(计时器不准的又一种情况)。如果app被唤醒那么网页必然就进入了后台，如果用户从app切回来，那么时间一般会超过2s;若app没有被唤起，那么网页不会进入后台，setTimeout基本准时触发，那么时间不会超过2s。

</body>
</html>

执行结果：QQ浏览器是正常唤醒APP，

而小米自带浏览器（中间那个），会先进入京东你那个推广页，再从京东网站唤醒APP，比如在京东网站选了鞋子放入购物车，再点购物车，就打开了最左边的APP结算页。

京东联盟如何在手机H5页面打开京东APP并跳到推广页

转载请注明本页网址：
http://www.vephp.com/jiaocheng/14669.html

标签：京东联盟 app 推广

PHP教程

WEB前端开发

数据库

WEB服务器

APP开发

LINUX学习

后端开发课程

前端开发课程

数据库课程

京东联盟如何在手机H5页面打开京东APP并跳到推广页

方式2：使用框架方式（不适合IOS）：

经测试，在安卓上，效果和直接用链接一样。小米自带的浏览器也是打不开APP：

因此，推荐全部使用链接方式，简单。

相关教程

同类教程排行

特辑教程