Comment uniapp implémente-t-il la fonction d'ouverture des publicités sur écran ?

Avec le développement rapide de l'Internet mobile, la publicité sur écran ouvert est devenue une forme importante de publicité et de marketing mobile. En tant que page d’accueil de l’application, les publicités sur écran ouvert peuvent non seulement augmenter la visibilité de l’application, mais également contribuer à renforcer l’image de la marque et à fidéliser les utilisateurs.

Dans le développement de terminaux mobiles, l'utilisation du framework uniapp permet de mettre en œuvre rapidement une adaptation multi-terminal, ce qui facilite grandement le travail des développeurs. Ensuite, cet article expliquera comment utiliser le framework uniapp pour implémenter la fonction de publicité sur écran ouvert.

1. Analyse des exigences

Avant de développer des publicités sur écran ouvert, nous devons clarifier les exigences de développement. De manière générale, les publicités sur écran ouvert doivent mettre en œuvre les fonctions suivantes :

1. Afficher un compte à rebours pour informer les utilisateurs de la durée de la publicité.
2. Les utilisateurs peuvent cliquer pour ignorer les publicités et accéder directement à l'application.
3. Les utilisateurs peuvent cliquer sur la publicité pour accéder à la page Web ou à l'App Store correspondant.
4. Les images publicitaires doivent s'adapter à la taille de l'écran pour garantir un affichage normal à différentes résolutions.

2. Étapes de mise en œuvre

Sur la base de l'analyse de la demande ci-dessus, nous pouvons combiner le cadre uniapp pour réaliser la fonction de publicité sur écran ouvert.

1. Concevoir la page de publicité à écran ouvert

Nous devons créer un nouveau répertoire pages/splash dans le répertoire racine du projet d'uniapp, puis créer un fichier splash.vue. La page doit concevoir une grande image pour afficher la publicité, ainsi qu'un logo de compte à rebours. Le code est le suivant :

<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. Définissez le lien de saut publicitaire

Dans la méthode showAd(), nous devons obtenir les données publicitaires et définir l'adresse de l'image publicitaire. Après avoir obtenu les données publicitaires, nous devons définir l'événement de clic de l'image publicitaire pour accéder à la page Web ou à la boutique d'applications correspondante. Le code est le suivant :

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', // 跳转到网页
  });
},

Parmi eux, la méthode uni.redirectTo() est utilisée pour accéder à la page spécifiée.

3. Implémenter un compte à rebours publicitaire

Afin de permettre aux utilisateurs de comprendre la durée de la publicité, nous devons concevoir une fonction de compte à rebours. Utilisez la fonction setInterval() dans la méthode startCountDown() pour effectuer une opération de compte à rebours toutes les secondes. Dans le même temps, pendant le processus de compte à rebours, le bouton Sauter la publicité est affiché ou masqué en fonction du temps restant. Une fois le compte à rebours terminé, appelez la méthode skip() pour accéder à la page d'accueil de l'application. Le code est le suivant :

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',
  });
},

Dans l'événement de clic sur le bouton, utilisez la méthode uni.redirectTo() pour accéder à la page d'accueil de l'application.

4. S'adapter aux différentes tailles d'écran

Pendant le processus de développement, nous devons nous assurer que les images publicitaires peuvent s'adapter à différentes tailles d'écran et garantir qu'elles peuvent être affichées normalement sous différentes résolutions. Nous pouvons utiliser le composant image fourni par uniapp et définir l'attribut mode sur widthFix pour adapter la largeur de l'image à la taille de l'écran. Le code est le suivant :

<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>

Grâce aux étapes ci-dessus, nous pouvons rapidement implémenter la fonction de publicité sur écran ouvert dans uniapp. Pendant le processus de mise en œuvre, vous devez faire attention à la taille et à la vitesse de chargement des images publicitaires, ainsi qu'à la légalité et à la sécurité des liens de saut. Bien entendu, en plus des conceptions ci-dessus, nous pouvons également ajouter des effets d'animation ou des effets de transition pour rendre les publicités sur écran ouvert plus vivantes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!