vue2手機APP項目添加開屏廣告或者閃屏廣告

更新時間：2017年11月28日 10:20:12 作者：趙海辛

這篇文章主要為大家詳細介紹了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('后臺接口', '傳參數(shù)')
  .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('后臺接口', '傳參數(shù)')
 .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';
 // 阻止滑動執(zhí)行
 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':
 同上開屏廣告，可根據(jù)貴公司要求來更改
 }
};
setTimeout(() => {
 require('./main.js');
}, 300)

這樣就完成了。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: