Heim > Artikel > Web-Frontend > So fügen Sie Open-Screen-Werbung zu mobilen APP-Projekten in vue2 hinzu

So fügen Sie Open-Screen-Werbung zu mobilen APP-Projekten in vue2 hinzu

亚连Original: 2018-06-23 17:52:483093Durchsuche

In diesem Artikel wird hauptsächlich die Methode zum Hinzufügen von Open-Screen-Werbung oder Splash-Screen-Werbung zu vue2-Mobile-APP-Projekten vorgestellt. Interessierte Freunde können sich auf

Allgemeine Projekte beziehen, einige werden Eröffnungen hinzufügen Bildschirmanzeigen oder Begrüßungsbildschirmanzeigen beim Starten. Dies erreichen wir durch die Positionierung in index.html. Wie folgt:

<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>

Dann müssen wir eine separate js-Datei schreiben, die sich im selben Verzeichnis wie main.js befindet. Der spezifische Code lautet wie folgt:

import api from &#39;./fetch/api&#39;
import store from &#39;./store/index&#39;
// 修改开屏广告图片尺寸
let advWidth = document.documentElement.clientWidth;
let advHeight = document.documentElement.clientHeight;
let entryEl = document.getElementById(&#39;entry&#39;);
entryEl.style.widht = advWidth + &#39;px&#39;;
entryEl.style.height = advHeight + &#39;px&#39;;
let queryURL = window.location.href.split(&#39;?&#39;)[1];
// 判断是否为分享页面
if (queryURL) {
 let queryArr = queryURL.split(&#39;&&#39;);
 let query = {};
 for (let i = 0; i < queryArr.length; i++) {
 query[queryArr[i].split(&#39;=&#39;)[0]] = queryArr[i].split(&#39;=&#39;)[1]
 }
 if (Number(query.showTitle)) {
 // 分享页面中 H5入口（我们项目中做了分享功能，若是从原生APP分享进入H5页面的，也需要加开屏广告）
 api.commonApi(&#39;后台接口&#39;, &#39;传参数&#39;)
  .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 != &#39;&#39; && query.TOKEN != &#39;null&#39;) {
  store.dispatch(&#39;storeToken&#39;, query.TOKEN);
 }
 }
} else {
 // 不是分享页面的入口
 api.commonApi(&#39;后台接口&#39;, &#39;传参数&#39;)
 .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 = &#39;block&#39;;
 document.body.style.overflowY = &#39;hidden&#39;;
 // 阻止滑动执行
 document.body.ontouchmove = function(ev) {
 ev.preventDefault();
 };
 let list = res.data.retList;
 if (list && list.length == 0) {
 entryAdv.style.display = &#39;none&#39;;
 document.body.style.overflow = &#39;auto&#39;;
 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 &#39;1&#39;:
 {
  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 = &#39;none&#39;;
   document.body.style.overflowY = &#39;auto&#39;;
   document.body.ontouchmove = function(ev) {
   ev.stopPropagation();
   };
  }
  entry.src = ImgList[ImgNum];
  entryTim.innerHTML = &#39;跳过 &#39; + time + &#39;s&#39;;
  entry.addEventListener(&#39;click&#39;, function() {
   window.location.href = ADV_list[ImgNum];
  }, false);
  time--;
  }, 1000);
  entryTim.addEventListener(&#39;click&#39;, function(ev) {
  ev.preventDefault();
  clearInterval(timer);
  entryAdv.style.display = &#39;none&#39;;
  document.body.style.overflowY = &#39;auto&#39;;
  document.body.ontouchmove = function(ev) {
   ev.stopPropagation();
  };
  }, false);
 }
  break;
 // 闪屏广告
 case &#39;2&#39;:
 同上开屏广告，可根据贵公司要求来更改
 }
};
setTimeout(() => {
 require(&#39;./main.js&#39;);
}, 300)

Das Obige ist, was ich Für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie die Drag-and-Drop-Funktion in AngularJS

So implementieren Sie einen Chatroom mit socket.io

So verwenden Sie NodeJS zum Betreiben des Füll-, Lösch-, Änderungs- und Prüfmoduls von Mongodb

So verwenden Sie JS zum Implementieren einer Neuzuweisung

in JS So implementieren Sie den Countdown für den Bestätigungscode

Das obige ist der detaillierte Inhalt vonSo fügen Sie Open-Screen-Werbung zu mobilen APP-Projekten in vue2 hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html JS mongodb

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So implementieren Sie benutzerdefinierte Vorlagen in WeChat-MiniprogrammenNächster Artikel：So implementieren Sie benutzerdefinierte Vorlagen in WeChat-Miniprogrammen

In Verbindung stehende Artikel

Mehr sehen