欢迎进入广州凡科互联网科技有限公司网站
全国服务热线
4000-399-000
北京抖音微信小程序_vue2手机APP项目添加开屏广告
时间: 2021-01-11 11:36 浏览次数:
vue2手机上APP新项目加上解屏广告宣传或是闪屏广告宣传 本文关键为大伙儿详尽详细介绍了vue2手机上APP新项目加上解屏广告宣传或是闪屏广告宣传的方式,具备一定的参照使用价值
vue2手机APP项目添加开屏广告或者闪屏广告       这篇文章主要为大家详细介绍了vue2手机APP项目添加开屏广告或者闪屏广告的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 <通过定位来做的。如下:
 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 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页面的,也需要加开屏广告)
 monApi('后台接口', '传参数')
 .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 {
 // 不是分享页面的入口
 monApi('后台接口', '传参数')
 .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 = mon.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)

这样就完成了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




Copyright © 广州凡科互联网科技有限公司 版权所有 粤ICP备10235580号
全国服务电话:4000-399-000   传真:021-45545458
公司地址:广州市海珠区工业大道北67号凤凰创意园