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 相关文章推荐
JavaScript 新手24条实用建议[TUTS+]
Jun 21 Javascript
jQuery 学习6 操纵元素显示效果的函数
Feb 07 Javascript
JS中from 表单序列化提交的代码
Jan 20 Javascript
使用canvas及js简单生成验证码方法
Apr 02 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
vue中typescript装饰器的使用方法超实用教程
Jun 17 Javascript
es6中let和const的使用方法详解
Feb 24 Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 Javascript
JS中多层次排序算法的实现代码
Jan 06 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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
php 时间计算问题小结
2009/01/04 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
setAttribute 与 class冲突解决
2008/02/17 Javascript
jquery异步循环获取功能实现代码
2010/09/19 Javascript
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
Vue两个版本的区别和使用方法(更深层次了解)
2020/02/16 Javascript
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
python issubclass 和 isinstance函数
2019/07/25 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
python实现机器人卡牌
2019/10/06 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
python实现密码强度校验
2020/03/18 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
新浪网技术部笔试题
2016/08/26 面试题
十佳中学生事迹材料
2014/06/02 职场文书
法人代表证明书
2014/09/18 职场文书
2014年秘书工作总结
2014/11/25 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
三十年同学聚会致辞
2015/07/28 职场文书