vue2手機APP專案中，加入開屏廣告或者閃屏廣告
阿新 • • 發佈：2019-01-24
一般專案裡，有的會在啟動的時候加開屏廣告或者閃屏廣告。我們是在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然後我們需要單獨寫一份js檔案，跟main.js是同級目錄的，具體程式碼如下：; 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>
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)
這樣就完成了