vue2手机APP项目添加开屏广告或者闪屏广告
更新时间：2017年11月28日 10:20:12 作者：赵海辛
这篇文章主要为大家详细介绍了vue2手机APP项目添加开屏广告或者闪屏广告的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
一般项目里，有的会在启动的时候加开屏广告或者闪屏广告。我们是在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)
这样就完成了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了如何使用ant-design-vue的Table组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
本篇文章主要介绍了深入解析Vue 组件命名那些事，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
vue-cli3项目生产和测试环境分包后文件名和数量不一致解决
这篇文章主要为大家介绍了vue-cli3项目生产和测试环境分包后文件名和数量不一致解决方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
AES算法是一种对称加密算法,用于加密和解密数据,下面这篇文章主要给大家介绍了关于Vue项目中实现AES加密解密的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-08-08
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
今天小编就为大家分享一篇vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue中如何通过函数传参数问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
Element-UI表格嵌入popover遇到的问题及解决方案
在表格中我们通常需要在每一行的一些单元格中显示popover,这篇文章主要给大家介绍了关于Element-UI表格嵌入popover遇到的问题及解决方案,需要的朋友可以参考下2023-11-11
Vue 图片监听鼠标滑轮滚动实现图片缩小放大功能(实现思路)
其实想要实现功能很简单，就是在一张图片上监听鼠标滑轮滚动的事件，然后根据上滚还是下滚实现图片的缩放，这篇文章主要介绍了Vue 实现图片监听鼠标滑轮滚动实现图片缩小放大功能,需要的朋友可以参考下2023-03-03
这篇文章主要为大家详细介绍了vue-model实现简易计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要介绍了vue路由分文件拆分管理详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
最新评论