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

来源：动视网责编：小OO 时间：2020-11-27 19:35:19

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

一般项目里，有的会在启动的时候加开屏广告或者闪屏广告。我们是在index.html通过定位来做的。如下：-- 开屏广告 -->；<；section class="；adv"；id="；entryAdv"；>；<；img id="；entry"；>；<；p id="；entryTim"；>；<；/p>；<；/section>；<。-- 入口元素 -->；<；section id="；app"；>；<；/section>；<；/body>；

推荐度：

点击下载本文 文档为doc格式

导读一般项目里，有的会在启动的时候加开屏广告或者闪屏广告。我们是在index.html通过定位来做的。如下：-- 开屏广告 -->；<；section class="；adv"；id="；entryAdv"；>；<；img id="；entry"；>；<；p id="；entryTim"；>；<；/p>；<；/section>；<。-- 入口元素 -->；<；section id="；app"；>；<；/section>；<；/body>；

这篇文章主要为大家详细介绍了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中如何实现验证码倒计时