vue2手机APP项目添加开屏广告或者闪屏广告


Posted in Javascript onNovember 28, 2017

一般项目里,有的会在启动的时候加开屏广告或者闪屏广告。我们是在index.html通过定位来做的。如下:

<style media="screen">
 #entry {
 width: 100%;
 height: 100%;
 z-index: 200;
 position: relative;
 }
 #entryAdv {
 display: none;
 }
 #entryTim {
 position: fixed;
 width: 2.2rem;
 line-height: 0.68rem;
 font-size: 0.32rem;
 z-index: 400;
 text-align: center;
 border-radius: 2rem;
 top: 0.5rem;
 right: 0.5rem;
 border: 1px solid #ccc;
 }
</style>
<body>
<!-- 开屏广告 -->
<section class="adv" id="entryAdv">
 <img id="entry">
 <p id="entryTim"></p>
</section>
<!-- 入口元素 -->
<section id="app"></section>
</body>

然后我们需要单独写一份js文件,跟main.js是同级目录的,具体代码如下:

import api from './fetch/api'
import store from './store/index'
// 修改开屏广告图片尺寸
let advWidth = document.documentElement.clientWidth;
let advHeight = document.documentElement.clientHeight;
let entryEl = document.getElementById('entry');
entryEl.style.widht = advWidth + 'px';
entryEl.style.height = advHeight + 'px';
let queryURL = window.location.href.split('?')[1];
// 判断是否为分享页面
if (queryURL) {
 let queryArr = queryURL.split('&');
 let query = {};
 for (let i = 0; i < queryArr.length; i++) {
 query[queryArr[i].split('=')[0]] = queryArr[i].split('=')[1]
 }
 if (Number(query.showTitle)) {
 // 分享页面中 H5入口(我们项目中做了分享功能,若是从原生APP分享进入H5页面的,也需要加开屏广告)
 api.commonApi('后台接口', '传参数')
  .then(res => {
  let keyArr = [];
  for (let key in res.data) {
   keyArr.push(key);
  }
  if (keyArr.length == 0) {
   return;
  }
  openAdv(res);
  });
 } else {
 // 分享页面中 原生入口
 // 查看query中是否带有token,进行登录判断并将token存入vuex
 if (query.TOKEN != '' && query.TOKEN != 'null') {
  store.dispatch('storeToken', query.TOKEN);
 }
 }
} else {
 // 不是分享页面的入口
 api.commonApi('后台接口', '传参数')
 .then(res => {
  let keyArr = []
  for (let key in res.data) {
  keyArr.push(key);
  }
  if (keyArr.length == 0) {
  return;
  }
  openAdv(res);
 });
}
function openAdv(res) {
 entryAdv.style.display = 'block';
 document.body.style.overflowY = 'hidden';
 // 阻止滑动执行
 document.body.ontouchmove = function(ev) {
 ev.preventDefault();
 };
 let list = res.data.retList;
 if (list && list.length == 0) {
 entryAdv.style.display = 'none';
 document.body.style.overflow = 'auto';
 document.body.ontouchmove = function(ev) {
  ev.stopPropagation();
 };
 }
 let time = (res.data.SPJG || 5000) / 1000;
 // let time = res.data.SPJG;
 let ADV_list = [];
 let BCcontextPathSrc = store.state.common.BCcontextPathSrc;
 switch (res.data.ADV_TYPE) {
 // 开屏直接跳过
 case '1':
 {
  let ImgList = [];
  for (let i = 0; i < list.length; i++) {
  ImgList.push(BCcontextPathSrc + res.data.retList[i].ADV_IMG_URL);
  ADV_list.push(res.data.retList[i].ADV_URL);
  }
  let count_down = time / list.length;
  let ImgNum = 0;
  let timer = setInterval(() => {
  switch (ImgList.length) {
   case 1:
   break;
   case 2:
   {
   if (time % 3 == 0) {
    ImgNum++;
   }
   }
   break;
   case 3:
   {
   if (time % 2 == 0) {
    ImgNum++;
   }
   }
   break;
   case 4:
   {
   if (time % 1 == 0) {
    if (ImgNum > ImgList.length - 2) break;
    ImgNum++;
   }
   }
   break;
   default:
   {
   if (time % 1 == 0) {
    if (ImgNum > ImgList.length - 2) break;
    ImgNum++;
   }
   }
   break;
  }
  if (time <= 0) {
   clearInterval(timer);
   entryAdv.style.display = 'none';
   document.body.style.overflowY = 'auto';
   document.body.ontouchmove = function(ev) {
   ev.stopPropagation();
   };
  }
  entry.src = ImgList[ImgNum];
  entryTim.innerHTML = '跳过 ' + time + 's';
  entry.addEventListener('click', function() {
   window.location.href = ADV_list[ImgNum];
  }, false);
  time--;
  }, 1000);
  entryTim.addEventListener('click', function(ev) {
  ev.preventDefault();
  clearInterval(timer);
  entryAdv.style.display = 'none';
  document.body.style.overflowY = 'auto';
  document.body.ontouchmove = function(ev) {
   ev.stopPropagation();
  };
  }, false);
 }
  break;
 // 闪屏广告
 case '2':
 同上开屏广告,可根据贵公司要求来更改
 }
};
setTimeout(() => {
 require('./main.js');
}, 300)

这样就完成了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
文字幻灯片
Jun 26 Javascript
JavaScript日历实现代码
Sep 12 Javascript
js实现类似新浪微博首页内容渐显效果的方法
Apr 10 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
Oct 13 Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
Vue项目中添加锁屏功能实现思路
Jun 29 Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
详解vue 2.6 中 slot 的新用法
Jul 09 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 #Javascript
元素全屏的设置与监听实例
Nov 28 #Javascript
vue2实现数据请求显示loading图
Nov 28 #Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 #Javascript
ligerUI---ListBox(列表框可移动的实例)
Nov 28 #Javascript
基于vue2实现上拉加载功能
Nov 28 #Javascript
微信小程序模板和模块化用法实例分析
Nov 28 #Javascript
You might like
php minixml详解
2008/07/19 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
jquery css实现流程进度条
2020/03/26 jQuery
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
Python中内建函数的简单用法说明
2016/05/05 Python
Python进程间通信Queue实例解析
2018/01/25 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
《只有一个地球》教学反思
2014/02/14 职场文书
网络研修随笔感言
2014/02/17 职场文书
年终晚会主持词
2014/03/25 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
人身损害赔偿协议书
2016/03/22 职场文书