UniApp実装スタートアップ図とガイダンス図の構成と使用ガイド

UniApp スタートアップ図とガイダンス図を実装するための構成と使用ガイド

はじめに:
UniApp は、Vue.js に基づくクロスプラットフォーム アプリケーション開発フレームワークであり、コードのセット、Android、H5、およびその他のプラットフォーム。モバイルアプリケーションの開発において、起動画像やガイダンス画像はユーザーエクスペリエンスを向上させるための重要な要素の1つです。この記事では、UniApp でスタートアップ図とガイダンス図を構成および使用する方法を詳しく紹介し、対応するコード例を添付します。

1. 構成の起動図

1. UniApp プロジェクトのルート ディレクトリで manifest.json ファイルを見つけてファイルを編集し、"app を見つけます- 「」フィールドに加えて、このフィールドの "splashscreen" 属性に起動画像の関連情報を設定します。

サンプル コードは次のとおりです。

"app-plus": {
  "splashscreen": {
    "image": "/static/splash.png",
    "autoclose": true,
    "duration": 3000,
    "delay": 0,
    "fadeout": "fadeOut"
  }
}

2. プロジェクトのルート ディレクトリに static という名前のフォルダーを作成し、起動イメージに ## という名前を付けます。 #splash.png を static フォルダーに配置します。

注:

起動画像のサイズは、各プラットフォームの要件を満たす必要があり、通常は 750*1334 ピクセルです。高解像度の画像を使用することをお勧めします。高解像度のぼやける問題がレートデバイスで発生するのを防ぎます。
• 「autoclose」属性は、起動イメージを自動的に閉じるかどうかを示します。デフォルト値は true です。
• 「duration」属性は、起動イメージが表示され続ける時間 (ミリ秒単位) であり、デフォルトは 3000 ミリ秒です。
• 「fadeout」属性は起動画像のフェード効果の名前です。オプションの値は「fadeOut」、「fadeScale」、「none」です。デフォルトは「fadeOut」です。

2. 構成ガイドの図

UniApp プロジェクトのルート ディレクトリで
1. manifest.json ファイルを見つけて、ファイルを編集し、## を見つけます# "app-plus" フィールドで、このフィールドの "launch_path" 属性にブート マップの関連情報を設定します。
サンプル コードは次のとおりです。

"app-plus": {
  "launch_path": "pages/guide/guide",
  "launch_showoption": {
    "titleNView": false,
    "popGesture": "none"
  }
}

UniApp の

pages
2. ディレクトリに guide という名前のフォルダーを作成します。そして、このフォルダーの下に guide.vue という名前のファイルをガイド画像ページとして作成します。
サンプル コードは次のとおりです。

<template>
  <view class="guide-container">
    <image class="guide-img" :src="imageList[currentIndex]"></image>
    <view class="guide-btn" @click="onButtonClick">进入应用</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,  // 当前引导图的索引
      imageList: [      // 引导图图片列表，可自行添加或删除
        "/static/guide1.png",
        "/static/guide2.png",
        "/static/guide3.png"
      ]
    }
  },
  methods: {
    onButtonClick() {
      // 点击“进入应用”按钮后的跳转逻辑，如跳转至首页
      uni.navigateTo({
        url: "/pages/index/index"
      });
    }
  }
}
</script>

<style scoped>
.guide-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.guide-img {
  width: 100%;
  height: 100%;
}

.guide-btn {
  width: 200rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #ccc;
  color: #fff;
  margin-top: 50rpx;
  border-radius: 40rpx;
}
</style>

注:

ガイド画像の画像サイズは起動画像と同様であり、次のサイズにする必要があります。各プラットフォームのサイズの要件に応じて適切に設定できます。

• ガイダンス マップ ページは、複数のガイダンス マップ ページの追加やカスタム操作の追加など、プロジェクトのニーズに応じてデザインできます。
• 概要:

上記の手順により、UniApp で起動イメージとガイド イメージを簡単に構成して使用し、ユーザー エクスペリエンスを向上させ、アプリケーションにプロフェッショナルな外観を追加できます。もちろん、上記のコード例は参照のみを目的としており、実際のプロジェクトのニーズに応じて調整および最適化できます。

参考リンク:

UniApp 公式ドキュメント: https://uniapp.dcloud.io/

1. UniApp 起動図構成: https://uniapp.dcloud .io/collocation/manifest?id=app-plus オブジェクトのスプラッシュスクリーン属性
2. UniApp ブート イメージの構成: https://uniapp.dcloud.io/collocation/manifest?id=app-plus オブジェクトの起動パスと titleNView属性

以上がUniApp実装スタートアップ図とガイダンス図の構成と使用ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。