在vue2中如何在手机APP项目添加开屏广告
程序员文章站
2022-04-18 20:08:04
...
这篇文章主要为大家详细介绍了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)
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
以上就是在vue2中如何在手机APP项目添加开屏广告的详细内容，更多请关注其它相关文章！