vue2手机APP项目中，加入开屏广告或者闪屏广告

最新推荐文章于 2024-05-15 19:12:50 发布

赵海辛

最新推荐文章于 2024-05-15 19:12:50 发布

阅读量4.5k

点赞数

分类专栏： Vue2 文章标签： vuex axios vue2 es6 html5

本文链接：https://blog.csdn.net/zhaohaixin0418/article/details/73485141

版权

一般项目里，有的会在启动的时候加开屏广告或者闪屏广告。我们是在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;

最低0.47元/天解锁文章

赵海辛

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
vue2手机APP项目中，加入开屏广告或者闪屏广告

一般项目里，有的会在启动的时候加开屏广告或者闪屏广告。我们是在index.html通过定位来做的。如下：style media="screen"> #entry { width: 100%; height: 100%; z-index: 200; position: relative; } #entryAdv { display: non
复制链接

扫一扫