uniappでランディングページを設定する方法

モバイル インターネットの徹底的な発展に伴い、ユーザー エクスペリエンスとブランド イメージを向上させるために独自の APP を構築することを選択する企業が増えています。開発コストを削減し、開発効率を向上させるために、多くの企業はクロスプラットフォーム開発フレームワークを使用して APP を構築することを選択していますが、Uniapp はその中でも優れたオープンソース フレームワークです。

Uniapp アプリケーションを構築するときは、アプリケーションの起動後に最初に読み込まれるページであるエントリ ページを定義する必要があります。通常、ランディング ページまたはホーム ページと呼ばれます。この記事では、Uniapp アプリケーションのランディング ページを作成および設定する方法について詳しく説明します。

ステップ 1: Uniapp プロジェクトの作成

Uniapp 公式 Web サイトから最新バージョンの Uniapp をダウンロードし、ローカル環境にインストールします。

$ npm install --global @vue/cli@3.0.0-beta.10
$ vue create -p dcloudio/uni-preset-vue my-project

コマンドライン、つまりユニアプリプロジェクトを作成できます。

ステップ 2: ランディング ページを作成する

src ディレクトリに、独自のホームページの vue ページを作成できます。作成するお気に入りのエディターを選択できます。ここでは、HbuilderX エディターを使用して、index.vue ファイルを作成します。コードは次のとおりです:

<template>
  <view class="container">
    <text class="text">这是我的Uniapp应用程序的落地页</text>
  </view>
</template>

<style>
  .container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .text {
    font-size: 24px;
  }
</style>

簡単に言うと、コンテナー タグとテキスト タグを作成しました。コンテナ テキストコンテンツを中央に配置し、中央に表示するために使用されます。ここではデモンストレーションの目的で、設定したテキスト コンテンツは単に「これは Uniapp アプリケーションのランディング ページです」です。

ステップ 3: ランディング ページを設定する

ランディング ページを作成した後、これがエントリ ページであり、pages.json で構成する必要があることを Uniapp アプリケーションに伝える必要があります。ファイル。 Pages.json ファイルを開き、次のコードを追加します。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "Uniapp落地页"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#000"
  }
}

この Pages.json ファイルでは、アプリケーションのすべてのページを定義します。作成したばかりの「インデックス」ページのみがあります。 「navigationBarTitleText」属性は、ナビゲーション バーのタイトル テキストを設定するために使用されます。さらに、グローバル ナビゲーション バーのスタイルも設定する必要があります。

ステップ 4: アプリケーションの起動ページを設定する

ランディング ページを設定しましたが、アプリケーションの起動ページが何であるかを Uniapp に伝える必要もあります。次のコンテンツを Pages.json ファイルに追加します。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "Uniapp落地页"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#000"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home-active.png"
      }
    ]
  },
  "launchPage": {
    "path": "pages/index/index"
  }
}

ここでは、tabBar 属性と launchPage 属性を使用します。 tabBar はアプリケーションの下部ナビゲーション バーを定義するために使用され、launchPage はアプリケーション起動ページを設定するために使用されます。起動ページを、作成したばかりの「インデックス」ページに設定します。

ここでは、アプリケーションの下部ナビゲーション バーのいくつかのプロパティも定義する必要があります。ここでは「ホームページ」を 1 つだけ定義します。他のページは必要に応じて定義でき、iconPath プロパティと selectedIconPath プロパティは次の目的で使用されます。ナビゲーションを定義します。バーに対応するアイコンとアクティブ状態のアイコン。

ステップ 5: アプリケーションを開始する

ランディング ページとスタートアップ ページを設定したので、アプリケーションを開始して効果を確認できます。コマンド コンソールに次のコマンドを入力して、アプリケーションを開始します。

$ npm run dev:%PLATFORM%

ここでの %PLATFORM% は、後で使用するプラットフォームを表します。これには、h5、app-plus、mp-weixin、その他のプラットフォームが含まれます。

これで、Uniapp アプリケーションのランディング ページが正常に作成され、設定されました。 Web アプリケーションを構築する場合でも、クロスプラットフォームのモバイル アプリケーションを構築する場合でも、Uniapp は優れたアプリケーションを作成できる強力な開発フレームワークです。

以上がuniappでランディングページを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。