vue2手机APP项目添加开屏广告或者闪屏广告
一般项目里,有的会在启动的时候加开屏广告或者闪屏广告。我们是在index.html通过定位来做的。如下:
#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:1pxsolid#ccc; }
然后我们需要单独写一份js文件,跟main.js是同级目录的,具体代码如下:
importapifrom'./fetch/api'
importstorefrom'./store/index'
//修改开屏广告图片尺寸
letadvWidth=document.documentElement.clientWidth;
letadvHeight=document.documentElement.clientHeight;
letentryEl=document.getElementById('entry');
entryEl.style.widht=advWidth+'px';
entryEl.style.height=advHeight+'px';
letqueryURL=window.location.href.split('?')[1];
//判断是否为分享页面
if(queryURL){
letqueryArr=queryURL.split('&');
letquery={};
for(leti=0;i{
letkeyArr=[];
for(letkeyinres.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=>{
letkeyArr=[]
for(letkeyinres.data){
keyArr.push(key);
}
if(keyArr.length==0){
return;
}
openAdv(res);
});
}
functionopenAdv(res){
entryAdv.style.display='block';
document.body.style.overflowY='hidden';
//阻止滑动执行
document.body.ontouchmove=function(ev){
ev.preventDefault();
};
letlist=res.data.retList;
if(list&&list.length==0){
entryAdv.style.display='none';
document.body.style.overflow='auto';
document.body.ontouchmove=function(ev){
ev.stopPropagation();
};
}
lettime=(res.data.SPJG||5000)/1000;
//lettime=res.data.SPJG;
letADV_list=[];
letBCcontextPathSrc=store.state.common.BCcontextPathSrc;
switch(res.data.ADV_TYPE){
//开屏直接跳过
case'1':
{
letImgList=[];
for(leti=0;i{
switch(ImgList.length){
case1:
break;
case2:
{
if(time%3==0){
ImgNum++;
}
}
break;
case3:
{
if(time%2==0){
ImgNum++;
}
}
break;
case4:
{
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)
这样就完成了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。