vue2手机APP项目添加开屏广告或者闪屏广告

vue2手机APP项目添加开屏广告或者闪屏广告

一般项目里，有的会在启动的时候加开屏广告或者闪屏广告。我们是在index.html通过定位来做的。如下：

然后我们需要单独写一份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)

这样就完成了。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。