uniappでランディングページを設定する方法-uni-app-php.cn

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

PHPz

リリース： 2023-04-20 15:16:57

オリジナル

852 人が閲覧しました

モバイルインターネットの徹底的な発展に伴い、ユーザーエクスペリエンスとブランドイメージを向上させるために独自の 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: アプリケーションを開始する

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