Wie setzt uniapp die Funktion der Eröffnungsbildschirmanzeigen um?

Mit der rasanten Entwicklung des mobilen Internets ist Open-Screen-Werbung zu einer wichtigen Form der mobilen Werbung und des mobilen Marketings geworden. Als Begrüßungsseite der App können Open-Screen-Anzeigen nicht nur die Präsenz der App erhöhen, sondern auch dazu beitragen, das Image der Marke zu stärken und Benutzer zu binden.

Bei der Entwicklung mobiler Terminals kann mithilfe des Uniapp-Frameworks schnell eine Multi-Terminal-Anpassung implementiert werden, was die Arbeit der Entwickler erheblich erleichtert. Als Nächstes wird in diesem Artikel erläutert, wie Sie mithilfe des Uniapp-Frameworks die Funktion der Open-Screen-Werbung implementieren.

1. Anforderungsanalyse

Bevor wir Open-Screen-Anzeigen entwickeln, müssen wir die Entwicklungsanforderungen klären. Im Allgemeinen müssen Open-Screen-Werbung die folgenden Funktionen implementieren:

1. Anzeige eines Countdowns, um Benutzer über die Werbezeit zu informieren.
2. Benutzer können auf klicken, um Anzeigen zu überspringen und die Anwendung direkt aufzurufen.
3. Benutzer können auf die Anzeige klicken, um zur entsprechenden Webseite oder zum App Store zu springen.
4. Werbebilder müssen an die Bildschirmgröße angepasst werden, um eine normale Anzeige bei verschiedenen Auflösungen zu gewährleisten.

2. Implementierungsschritte

Basierend auf der obigen Bedarfsanalyse können wir das Uniapp-Framework kombinieren, um die Funktion von Open-Screen-Werbung zu realisieren.

1. Entwerfen Sie die Open-Screen-Werbeseite

Wir müssen ein neues Seiten-/Splash-Verzeichnis im Projektstammverzeichnis von Uniapp erstellen und dann eine Splash.vue-Datei erstellen. Auf der Seite muss ein großes Bild zur Anzeige der Werbung sowie ein Countdown-Logo gestaltet werden. Der Code lautet wie folgt:

<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. Legen Sie den Ad-Jump-Link fest

In der showAd()-Methode müssen wir die Anzeigendaten abrufen und die Anzeigenbildadresse festlegen. Nachdem wir die Werbedaten erhalten haben, müssen wir das Klickereignis des Werbebilds so einstellen, dass es zur entsprechenden Webseite oder zum entsprechenden App Store springt. Der Code lautet wie folgt:

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

Unter anderem wird die Methode uni.redirectTo() verwendet, um zur angegebenen Seite zu springen.

3. Werbe-Countdown implementieren

Um den Nutzern die Werbezeit verständlich zu machen, müssen wir eine Countdown-Funktion entwerfen. Verwenden Sie die Funktion setInterval() in der Methode startCountDown(), um jede Sekunde einen Countdown-Vorgang durchzuführen. Gleichzeitig wird während des Countdown-Vorgangs je nach verbleibender Zeit die Schaltfläche „Werbung überspringen“ angezeigt oder ausgeblendet. Wenn der Countdown abgelaufen ist, rufen Sie die Methode „skip()“ auf, um zur Anwendungshomepage zu springen. Der Code lautet wie folgt:

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

Verwenden Sie im Schaltflächenklickereignis die Methode uni.redirectTo(), um zur Anwendungshomepage zu springen.

4. Anpassung an unterschiedliche Bildschirmgrößen

Während des Entwicklungsprozesses müssen wir sicherstellen, dass sich die Werbebilder an unterschiedliche Bildschirmgrößen anpassen und unter verschiedenen Auflösungen normal angezeigt werden können. Wir können die von uniapp bereitgestellte Bildkomponente verwenden und das Modusattribut auf widthFix setzen, um die Bildbreite an die Bildschirmgröße anzupassen. Der Code lautet wie folgt:

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

Durch die oben genannten Schritte können wir die Open-Screen-Werbefunktion in uniapp schnell implementieren. Bei der Implementierung müssen Sie auf die Größe und Ladegeschwindigkeit von Werbebildern sowie auf die Rechtmäßigkeit und Sicherheit von Jumplinks achten. Zusätzlich zu den oben genannten Designs können wir natürlich auch einige Animationseffekte oder Übergangseffekte hinzufügen, um die Open-Screen-Anzeigen lebendiger zu gestalten.

Das obige ist der detaillierte Inhalt vonWie setzt uniapp die Funktion der Eröffnungsbildschirmanzeigen um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!