MUI webAPP中投放广告方法

原创 2017年01月03日 14:07:36

 如下是百度联盟广告
 
<script type="text/javascript">
 
   mui.plusReady(function() {
 
    if (plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE) {
 
     mui.toast("当前网络不给力,无法加载广告");
 
    } else {
 
     //屏幕真实宽度
 
     var width = window.innerWidth;
 
     var height = window.innerHeight;
 
     //根据投放广告的比例,计算广告高度
 
     var adHeight = parseInt(width) * 3 / 20;
 
     //广告投放域名地址
 
     var ltu = encodeURIComponent('http://www.apizl.com');
 
     //投放广告的服务端页面标题
 
     var title = encodeURIComponent('爱资料');
 
     var url = 'http://pos.baidu.com/acom?adn=1&at=97&aurl=&cad=1&ccd=24&cec=UTF-8&cfv=18&ch=0&col=en-US&conOP=0&cpa=1&dai=1&dis=0&ltr=&lunum=6&n=99099160_cpr&pis=10000x10000&ps=0x0&qn=31f2f2a7de233256&rad=&rsi5=4&rss0=&rss1=&rss2=&rss3=&rss4=&rss5=&rss6=&rss7=&scale=20.3&skin=mobile_skin_white_blue&td_id=2206321&tn=template_inlay_all_mobile&tpr=1436841400149&ts=1&xuanting=0&tt=1436841400136.14.87.89&dtm=BAIDU_DUP2_SETJSONADSLOT&dc=2&wt=1&distp=1001';
 
     url += '&conW=' + width + '&conH=' + adHeight + '&ltu=' + ltu;
 
     url += '&di=u888888'; //广告id
 
     url += '&pcs=' + width + 'x' + height;
 
     url += '&psr=' + width + 'x' + height;
 
     url += '&pss=' + width + 'x0';
 
     url += '&rsi0=' + width + '&rsi1=' + adHeight;
 
     url += '&ti=' + title;
 
     var adBottom = mui.os.ios ? ('-' + adHeight + 'px') : '0';
 
     var ad = plus.webview.create(url, 'ad', {
 
      height: adHeight + 'px',
 
      bottom: adBottom
 
     });
 
     //目前Android平台不支持子webview的setStyle动画,因此分平台处理;
 
     if (mui.os.ios) {
 
      //为了支持iOS平台左侧边缘滑动关闭页面,需要append进去;
 
      plus.webview.currentWebview().append(ad);
 
      ad.addEventListener('loaded', function() {
 
       ad.setStyle({
 
        bottom: '0',
 
        transition: {
 
         duration: 150
 
        }
 
       });
 
      });
 
     } else {
 
      ad.addEventListener('loaded', function() {
 
       ad.show('slide-in-bottom');
 
      });
 
     }
 
     ad.appendJsFile('_www/js/ad.js');
 
     //设置主页面的底部留白,否则会被遮住;
 
     document.querySelector('.mui-content').style.paddingBottom = adHeight + 'px';
 
    }
 
   });
 
  </script>
版权声明:本文为博主原创文章,未经博主允许不得转载。

让那些烦人的广告,滚出我们的APP!

1-现像 最近越来越多的用户向客服反映,在使用我们的App过程中,会莫名其妙的在底部出现广告,甚至黄色信息。这些信息不但困扰了用户,影响用户的使用,最关键是使得用户散失对我们公司的信任,觉得我...

HBuilder实现WebApp,总结MUI使用过程中的坑和方法

MUI尝过的坑和重要知识点总结1:自带的各种标签的 样式权重过高,重写不方便(和BootStrap比较来说,BootStrap更加灵活) 2:链接跳转。常规的a标签 加href是无法跳转的,浏览器有效...

WebApp mui&H5+ 用户头像处理之拍照并剪切(Native.js for Android)

拍照后裁剪照片(调用原生安卓) mui官方文档http://www.html5plus.org/doc/zh_cn/android.html var cmr = plu...

[webAPP项目]基于MUI框架开发APP功能点开发详解大纲

前言由于自己平时做项目(自己做或者帮朋友做的移动APP,webAPP,机器学习算法类)比较多,做的东西大多没有整理成文档,现在就把之前做的项目整理成文档分享给大家,好大家以后做相关项目有个参考! ...

webapp mui & HTML5+ (四) 之 窗口(页面初始化、跳转、传参)

在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,mui将该事件封装成了mui.plusReady()方法,涉及到HTML5+的api,建议都写在mui....

HBuilder webApp开发(十五)MUI增加自定义icon图标

前段时间有朋友问我,MUI里面怎么添加字体图标。后来下班后给他做了一个小的Demo,其实这个看卡MUI的文档就有。mui如何增加自定义icon图标。 其实这个不仅限于MUI,其他项目比如PC项目也可...

手机webApp触摸左右滑动切换轮播图片广告

今天给小伙伴们分享一个好东西,webApp轮播效果,支持手机上用手左右滑动的效果, 因为手机的触摸事件和PC端用鼠标操作的事件是不同的,所以我就需要针对移动端的设备触摸事件做相应的轮播特效。大家可以去...

[webAPP项目]基于MUI框架webAPP开发功能流程之引导图制作详解01

前言 我们在构建一个APP时,少不了APP运行前的开机引导图,现在来详细介绍一下MUI框架关于这一操作的详细步骤! 原理 如果用户第一次下载使用该软件,就显示引导图;如果非第一次使用,则跳过这...

MUI——创建页面的三种方法

第一种:初始化时,使用mui.init()创建子页面 一般情况下,目标页面分为主页面和内容页,两者是组合在一起的。在主页面中写好主页面的结构,就可以在初始化时创建子页面了。 mui.init({ ...

HTML5第8次课堂笔记( 模拟form表单提交数据,xml的解析,jQuery的Ajax方法使用, mui的ajax)

HTML5第8次课堂笔记   1.  模拟form表单提交数据:(get方式)   body>   form method="get"action="DataTest7">   input type=...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:MUI webAPP中投放广告方法
举报原因:
原因补充:

(最多只允许输入30个字)