How does uniapp implement the function of opening screen advertisements?

With the rapid development of mobile Internet, open-screen advertising has become an important form in the field of mobile advertising and marketing. As the app’s welcome page, open-screen ads can not only increase the app’s exposure, but also help build the brand’s image and retain users.

In mobile terminal development, using the uniapp framework can quickly implement multi-terminal adaptation, which greatly facilitates the work of developers. Next, this article will introduce how to use the uniapp framework to implement the function of open-screen advertising.

1. Requirements Analysis

Before developing open-screen advertising, we need to clarify the development requirements. Generally speaking, open-screen advertisements need to implement the following functions:

1. Display a countdown to let users know the advertising time.
2. Users can click to skip the advertisement and enter the application directly.
3. Users can click on the advertisement to jump to the corresponding web page or app store.
4. Advertising images need to adapt to the screen size to ensure that they can be displayed normally under various resolutions.

2. Implementation steps

Based on the above demand analysis, we can combine the uniapp framework to realize the function of open-screen advertising.

1. Design the open-screen advertising page

We need to create a pages/splash directory in the project root directory of uniapp, and then create a splash.vue file. The page needs to design a large picture to display the advertisement, as well as a countdown logo. The code is as follows:

<template>
  <div class="splash">
    <img :src="imgUrl" mode="widthFix" />
    <div class="time">{{countDown}}s</div>
    <div class="skip" v-if="showSkip" @click="skip">跳过广告</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        imgUrl: '', // 广告图片地址
        showSkip: false, // 是否显示跳过广告按钮
        countDown: 0, // 倒计时
      };
    },
    mounted() {
      this.showAd();
    },
    methods: {
      showAd() {
        // todo：获取广告数据并设置广告图片地址
        this.countDown = 10; // 设置倒计时时间
        this.startCountDown(); // 开始倒计时
      },
      startCountDown() {
        setInterval(() => {
          if (this.countDown > 0) {
            this.countDown--;
            if (this.countDown <= 3) {
              this.showSkip = true; // 显示跳过广告按钮
            }
          } else {
            this.skip();
          }
        }, 1000);
      },
      skip() {
        // 跳过广告，进入应用
      },
    },
  };
</script>

<style>
  .splash {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .splash img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .splash .time {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 14px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
    border-radius: 20px;
  }
  .splash .skip {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 12px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
    border-radius: 15px;
    cursor: pointer;
    z-index: 999;
  }
</style>

2. Set ad jump link

In the showAd() method, we need to obtain the ad data and set the ad image address. After obtaining the advertising data, we need to set the click event of the advertising image to jump to the corresponding web page or app store. The code is as follows:

showAd() {
  // todo：获取广告数据并设置广告图片地址
  this.imgUrl = 'http://xxx.xxx.xxx/xxx.jpg'; // 设置广告图片地址
  this.countDown = 10; // 设置倒计时时间
  this.startCountDown(); // 开始倒计时
  // 设置广告图片点击事件
  uni.redirectTo({
    url: '/pages/webview/index?url=http://xxx.xxx.xxx/xxx', // 跳转到网页
  });
},

Among them, the uni.redirectTo() method is used to jump to the specified page.

3. Implement advertising countdown

In order to let users understand the advertising time, we need to design a countdown function. Use the setInterval() function in the startCountDown() method to perform a countdown operation every second. At the same time, during the countdown process, the skip ad button is displayed or hidden depending on the remaining time. When the countdown ends, call the skip() method to jump to the application homepage. The code is as follows:

startCountDown() {
  setInterval(() => {
    if (this.countDown > 0) {
      this.countDown--;
      if (this.countDown <= 3) {
        this.showSkip = true; // 显示跳过广告按钮
      }
    } else {
      this.skip();
    }
  }, 1000);
},
skip() {
  // 跳过广告，进入应用
  uni.redirectTo({
    url: '/pages/home/index',
  });
},

In the button click event, use the uni.redirectTo() method to jump to the application homepage.

4. Adapt to different screen sizes

During the development process, we need to ensure that the advertising images can adapt to different screen sizes and ensure that they can be displayed normally under various resolutions. We can use the image component provided by uniapp and set the mode attribute to widthFix to make the image width adapt to the screen size. The code is as follows:

<template>
  <div class="splash">
    <img :src="imgUrl" mode="widthFix" />
    <div class="time">{{countDown}}s</div>
    <div class="skip" v-if="showSkip" @click="skip">跳过广告</div>
  </div>
</template>

Through the above steps, we can quickly implement the open-screen advertising function in uniapp. During the implementation process, you need to pay attention to the size and loading speed of advertising images, as well as the legality and safety of jump links. Of course, in addition to the above designs, we can also add some animation effects or transition effects to make the open-screen ads more vivid.

The above is the detailed content of How does uniapp implement the function of opening screen advertisements?. For more information, please follow other related articles on the PHP Chinese website!