집 > 기사 > 웹 프론트엔드 > vue2의 모바일 APP 프로젝트에 공개 화면 광고를 추가하는 방법

vue2의 모바일 APP 프로젝트에 공개 화면 광고를 추가하는 방법

亚连원래의: 2018-06-23 17:52:483162검색

이 글에서는 주로 vue2 모바일 앱 프로젝트에 오픈스크린 광고나 스플래시 스크린 광고를 추가하는 방법을 자세히 소개하고 있습니다. 관심있는 친구들이 참고하면 좋을 것 같습니다.

일반 프로젝트에서는 일부 추가 오프닝에 있습니다. 시작할 때 화면 광고 또는 스플래시 화면 광고. 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>

그런 다음 main.js와 동일한 디렉터리에 있는 별도의 js 파일을 작성해야 합니다. 구체적인 코드는 다음과 같습니다.

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)

위 내용은 제가 모두를 위해 컴파일한 내용입니다. 앞으로는 모두에게 도움이 되세요.

AngularJS에서 드래그 앤 드롭 기능 구현 방법

socket.io를 사용하여 채팅방 구현 방법

mongodb 모듈 채우기, 삭제, 수정 및 확인 작업 방법 nodejs를 사용하여

js Re-sign을 사용하여 구현하는 방법

JS에서 인증 코드 카운트다운을 구현하는 방법

위 내용은 vue2의 모바일 APP 프로젝트에 공개 화면 광고를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

html JS mongodb

성명：

이전 기사：WeChat 미니 프로그램에서 사용자 정의 템플릿을 구현하는 방법다음 기사：WeChat 미니 프로그램에서 사용자 정의 템플릿을 구현하는 방법