在vue2中如何在手机APP项目添加开屏广告

这篇文章主要为大家详细介绍了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: 1px solid #ccc; }
  

登录后复制

然后我们需要单独写一份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  {  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  {  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  { require('./main.js');}, 300)

登录后复制

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

立即学习“前端免费学习笔记（深入）”；

在AngularJS中如何实现拖拽功能

使用socket.io如何实现聊天室

使用nodejs如何操作mongodb的填删改查模块

使用js如何实现从新赋值

在JS中如何实现验证码倒计时

以上就是在vue2中如何在手机APP项目添加开屏广告的详细内容，更多请关注【创想鸟】其它相关文章！