uniappはオープニング画面広告の機能をどのように実装していますか?

モバイル インターネットの急速な発展に伴い、オープンスクリーン広告はモバイル広告とマーケティングの分野で重要な形式になりました。アプリのウェルカム ページとしてのオープンスクリーン広告は、アプリの露出を増やすだけでなく、ブランドのイメージを構築し、ユーザーを維持するのにも役立ちます。

モバイル端末開発においては、uniappフレームワークを利用することで多端末対応を迅速に実現でき、開発者の作業が大幅に楽になります。次に、uniappフレームワークを使用してオープンスクリーン広告の機能を実装する方法を紹介します。

1. 要件分析

オープンスクリーン広告を開発する前に、開発要件を明確にする必要があります。一般に、オープンスクリーン広告には次の機能を実装する必要があります。

1. ユーザーに広告時間を知らせるためにカウントダウンを表示します。
2. ユーザーはクリックして広告をスキップし、アプリケーションに直接アクセスできます。
3. ユーザーは広告をクリックして、対応する Web ページまたはアプリ ストアにジャンプできます。
4. 広告画像は、さまざまな解像度で正常に表示できるように、画面サイズに適応する必要があります。

2. 実装手順

上記の需要分析に基づいて、uniapp フレームワークを組み合わせて、オープンスクリーン広告の機能を実現できます。

1. オープンスクリーン広告ページのデザイン

uniapp のプロジェクト ルート ディレクトリに Pages/splash ディレクトリを作成し、splash.vue ファイルを作成する必要があります。ページには、広告を表示するための大きな画像とカウントダウン ロゴをデザインする必要があります。コードは次のとおりです:

<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. 広告ジャンプ リンクの設定

showAd() メソッドでは、広告データを取得し、広告画像のアドレスを設定する必要があります。広告データを取得したら、広告画像のクリックイベントを設定して、対応するWebページまたはアプリストアにジャンプする必要があります。コードは次のとおりです。

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

このうち、uni.redirectTo()メソッドは指定したページにジャンプするために使用されます。

3. 広告カウントダウンの実装

ユーザーに広告時間を把握させるために、カウントダウン機能を設計する必要があります。 startCountDown() メソッドで setInterval() 関数を使用して、1 秒ごとにカウントダウン操作を実行します。同時に、カウントダウン処理中は、残り時間に応じて広告スキップボタンが表示または非表示になります。カウントダウンが終了したら、skip() メソッドを呼び出してアプリケーションのホームページにジャンプします。コードは次のとおりです。

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

ボタン クリック イベントで、uni.redirectTo() メソッドを使用してアプリケーションのホームページにジャンプします。

4. さまざまな画面サイズに適応する

開発プロセスでは、広告画像がさまざまな画面サイズに適応し、さまざまな解像度で正常に表示できることを確認する必要があります。 uniapp が提供する画像コンポーネントを使用し、mode 属性を widthFix に設定して、画像の幅を画面サイズに合わせることができます。コードは次のとおりです。

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

上記の手順により、uniapp にオープンスクリーン広告機能をすぐに実装できます。実装プロセスでは、広告画像のサイズと読み込み速度、ジャンプリンクの合法性と安全性に注意を払う必要があります。もちろん、上記のデザインに加えて、アニメーション効果やトランジション効果を追加して、オープンスクリーン広告をより鮮やかにすることもできます。

以上がuniappはオープニング画面広告の機能をどのように実装していますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。