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)
这样就完成了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
详解基于vue的移动web app页面缓存解决方案
现在移动web app越来越热门了,许多公司开始尝试使用angular.react.vue等MVVM框架来开发单页架构的web app.但在开发web app时,如果希望页面的导航体验也接近原生应用,那一般都会遇到这两个问题: 识别前进后退行为 后退时恢复之前的页面 笔者开发了一个基于vue与vue-router的导航库vue-navigation,来帮助开发者来解决这些问题,下面是问题的解决思路. 识别前进后退 先说第一个问题.和原生app不一样,浏览器中主要有这几个限制: 没有提供前进后退的
-
vue实现app页面切换动画效果实例
因为需要实现类似APP页面切换的动画效果,百度google搜索比较少资料,所以自己写文档,希望对您有用 在router/index.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) Router.prototype.goBack = function () { this.isBack = true window.history.go(-1) } const router = new Router({
-
Vue-router结合transition实现app前进后退动画切换效果的实例
一丶首先配置路由并且修改路由配置 路由配置就不讲了重点,给VueRoute添加一个goBack方法,用于记录路由的前进后退状态 this.isBack = true VueRouter.prototype.goBack = function () { this.isBack = true window.history.go(-1) } 二丶监听路由变化(在路由变化时判断此时的路由状态是前进还是后退) <template> <div> 动态绑定路由动画,根据路由状态的不同绑定不同的路
-
vue中appear的用法
关于appear的用法和enter的用法相似,它只是在第一次渲染的时候才会起作用.看完整的代码: 别忘了引用vue.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>初始渲染的过渡</title> <script src="vue.js"></script>
-
vue.js移动端app实战1：初始配置详解
本系列将会用vue.js2制作一个移动端的webapp单页面,页面不多,大概在7,8个左右,不过麻雀虽小,五脏俱全,常用的效果如轮播图,下拉刷新,上拉加载,图片懒加载都会用到.css方面也会有一些描述,像不同分辨率的适配,flex布局以及scss来编写mixin来处理2x,3x图等. 初始工作: 通过vue-cli安装webpack模板后,会自动生成一大堆文件,通常我们只关心src/目录下的东西. 个人习惯在src下新建一个base目录,用来存放通用的css及js,比如样式重置css,一切js
-
巧用Vue.js+Vuex制作专门收藏微信公众号的app
本文一步一步教大家如何利用Vue.js + Vuex制作专门收藏微信公众号的app 项目地址: https://github.com/jrainlau/wechat-subscriptor 下载&运行 git clone git@github.com:jrainlau/wechat-subscriptor.git cd wechat-subscriptor && npm install npm run dev // run in dev mode cd backend-serv
-
vue.js移动端app之上拉加载以及下拉刷新实战
上拉加载以及下拉刷新都是移动端很常见的功能,在搜索或者一些分类列表页面常常会用到. 跟横向滚动一样,我们还是采用better-scroll这个库来实现.由于better已经更新了新的版本,之前是0.几的版本,更新了一下发现,现在已经是1.2.6这个版本了,新版本多了些 比较好用的api,所以我也重写了之前的代码,用新的api来实现上拉加载以及下拉刷新. 首先把基本的样式写好,这里就略过了,然后引入better-scroll库 import BScroll from 'better-scroll'
-
vue-router实现webApp切换页面动画效果代码
vue-router实现webApp切换效果 演示效果 快速集成 1.复制PageTransittion.vue到项目目录.2.修改router配置. Router.prototype.goBack = function () { this.isBack = true window.history.go(-1) } const router = new Router({ routes: [ { path: '/', name: 'PageTransition', component: PageT
-
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.68r
-
C#之Android手机App开发
目前Android在全世界市场上大约有75%的占有率,国人Android手机的持有比例更甚,甚至达到90%以上.因此搞计算机的一听说手机应用开发,一个个都像着了魔似的,既然有那么多人对它感兴趣,那咱也跟着玩一玩.但是,本模块不是介绍如何用Java开发,而是全部用C#去实现. 为什么用C#去实现?原因很简单,目前手机市场经过多年的你争我斗,现在就剩下Android.iOS.Windows Phone还能互相斗狠,其他的统统都被打趴下找不着北了.但是,学Android应用开发要用Java.学iOS应
-
Ionic如何创建APP项目
前面的章节中我们已经学会了ionic 框架如何导入到项目中. 接下来我们将为大家介绍如何创建一个 ionic APP 应用. ionic 创建 APP 使用 HTML.CSS 和 Javascript 来构建,所以我们可以创建一个 www 目录,并在目录下创建 index.html 文件,代码如下: 大家按照步骤在自己的编辑器上来认真的完成这个APP的创建吧. <!DOCTYPE html> <html> <head> <meta charset="ut
-
移动手机APP手指滑动切换图片特效附源码下载
这是一款效果非常炫酷的移动手机APP滑动手指切换图片特效.该APP特效在移动手机中用户可以通过手指的左右滑动来切换图片,在桌面设备中通过鼠标也可达到同样的效果. 效果演示 源码下载 使用方法 HTML结构 这个移动手机APP切换图片特效的HTML结构采用嵌套<div>的HTML结构,每一张图片卡片都包裹在div.demo__card中,里面放置了图片,描述信息和一些额外的图层. <div class="demo__card"> <div
-
vue项目添加多页面配置的步骤详解
公司使用 vue-cli 创建的 vue项目 在初始化时并没有做多页面配置,随着需求的不断增加,发现有必要使用多页面配置.看了很多 vue多页面配置 的文章,基本都是在初始化时就配置了多页面.而且如果使用这些实现,需要调整当前项目的目录结构,这点也是不能接受的. 最后,参考这些文章,在不调整当前项目目录结构实现了多页面的配置的添加.这里做下记录.总结,方便以后复用.如果还能有幸帮助到有同样需求的童鞋的话,那就更好了. 实现步骤 1.添加新增入口相关文件; 2.使用变量维护多入口: 3.开发环境读
-
MAC系统利用charles抓取微信小程序和手机APP数据包(http和https数据包)
本文中使用的是mac上的抓包工具charles进行抓包,手机是华为荣耀8 下载并安装Charles for Mac Charles for Mac(HTTP信息抓包工具) V4.2.5 苹果电脑版 要想抓取到微信小程序的数据首先要解决的第一个问题件就是如何通过charles抓取手机上的数据具体配置过程如下: MAC上的Charles设置 第一步,charles上通过proxy->proxy setting进入代理设置,入口如下图所示 点击后进入如下所示界面 记住此处的port,默认为8888,也
-
python利用appium实现手机APP自动化的示例
写这个东西也是自己喜欢研究些自动化的东西,以下全是自己的经验所得,由于开源的软件对于各版本以及操作系统要求很高,会经常碰到一些不兼容的问题,这个都属于正常的,换版本就对了. 如果你感觉学不会?莫慌,小编推荐大家加入群, 前面548中间377后面875,群里有志同道合的小伙伴, 互帮互助,还可以拿到许多视频教程! 本人的环境搭建都是在win10 64位上搭建的 1.环境准备 1.jdk1.8.0 (64位) 2.android-sdk_r24.4.1-windows 3.python:2.7(3.
-
python操作手机app的实现步骤
目录 一.下载Android SDK 二.添加环境变量 三.测试adb环境 四.adb详细命令 五.python操作app的思路 六.python如何使用adb命令 一.下载Android SDK 下载地址一:https://developer.android.google.cn/studio/releases/platform-tools 下载地址二:https://www.androiddevtools.cn 二.添加环境变量 将adb命令添加到环境变量 将解压后的目录,有adb.exe的目
-
用Python爬取某乎手机APP数据
目录 一.配置抓包工具 二.配置手机代理 三.抓取数据 四.总结 一.配置抓包工具 1.安装软件 本文选择的抓包工具:Fiddler 具体的下载安装这里不详细赘述!(网上搜Fiddler安装,一大堆教程),本文以实战为例,就不再这里浪费时间了! 2.配置Fiddler 安装好之后,接下来就开始配置Fiddler工具(这里是关键,仔细阅读!) 配置Connections 打开Fiddler后,点击Tools->Options 点击Connections 勾选上对应的选项 配置HTTPS 由于目
-
electron-vue 项目添加启动loading动画的实现思路
前言 electron-vue脚手架搭建的项目,在开发阶段可能你注意不到项目启动慢的问题,但是在build 生成的exe可执行文件,启动后,要反应很久才能进入到app.vue 中加载的页面,体验性很差. 正文 针对上诉问题,产生的原因是在渲染进程加载vue的时候,特别慢,为了提高用户体验,我们的项目可以在启动的时候添加一个loading动画,然后再进入app.vue的页面. 实现思路 我们可以通过一个单独的启动窗口来创建loading页面,在项目中其他准备工作未完成时出现在用户的视野中给用户一定