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)
これで完成です。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。