超神学院游戏,东营市胜利第二中学,石家庄生活频道
一般项目里，有的会在启动的时候加开屏广告或者闪屏广告。我们是在通过定位来做的。如下：
我要评论
<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)
这样就完成了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论