vue2手机APP项目添加开屏广告或者闪屏广告
时间:2019-04-10
本文章向大家介绍vue2手机APP项目添加开屏广告或者闪屏广告,主要包括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('后台接口', '传参数') .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)
这样就完成了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 【译】MySQL char、varchar的区别
- 【jfinal修仙系列】修改ShiroPlugin支持jfinal3.0
- MySQL二进制日志
- 【nginx启动】 97 Address family not supported by protocol
- jfinal 内置的handler功能
- JS 对指定iframe 全屏操作
- 【jfinal修仙系列】扩展CacheInterceptor支持Redis缓存
- 基于Redis的定时任务
- 【jfinal】扩展JFIANL 支持加载jar包中SQL模板
- 【jfinal修仙系列】扩展ShiroCacheManager 支持Redis缓存
- 【springboot】 springboot 整合mybatis-plus
- jfinal-swagger让你的应用接口更加简单
- 【springboot】 spring session 分布式会话共享
- 基于jfinal Template的Shiro 标签
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- php实现银联商务公众号+服务窗支付的示例代码
- php使用json-schema模块实现json校验示例
- 17个品牌,113款5G手机,5G离我们越来越近。
- PHP的cookie与session原理及用法详解
- Thinkphp5.0框架视图view的循环标签用法示例
- Thinkphp5.0 框架视图view的比较标签用法分析
- laravel 操作数据库常用函数的返回值方法
- laravel 验证错误信息到 blade模板的方法
- thinkPHP+LayUI 流加载实现功能
- Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
- laravel5.2表单验证,并显示错误信息的实例
- ThinkPHP 5.1 跨域配置方法
- PHP调用接口API封装的例子
- php-fpm超时时间设置request_terminate_timeout资源问题分析
- laravel框架添加数据,显示数据,返回成功值的方法