vue 2携帯APPプロジェクトには、スクリーン広告やフラッシュ広告を追加します。
一般的なプロジェクトでは、起動時にスクリーン広告やフラッシュ広告を追加することがあります。私たちはindex.で位置を決めて作ったのです。以下のとおりです
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
<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)
これで完成です。以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。