这篇文章主要为大家详细介绍了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)
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在angularjs中如何实现拖拽功能
使用socket.io如何实现聊天室
使用nodejs如何操作mongodb的填删改查模块
使用js如何实现从新赋值
在js中如何实现验证码倒计时
以上就是在vue2中如何在手机app项目添加开屏广告的详细内容。