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)
这样就完成了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。