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

最新推荐文章于 2025-05-31 16:02:29 发布

赵海辛

最新推荐文章于 2025-05-31 16:02:29 发布

阅读量4.7k

点赞数

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

本文链接：https://blog.youkuaiyun.com/zhaohaixin0418/article/details/73485141

版权

本文介绍了在Vue2手机应用中如何实现开屏广告的功能。通过在index.html中利用定位技术设置广告，实现启动时展示广告的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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