WeChat ミニプログラム開発の下部ナビゲーション

WeChat ミニ プログラム開発

はじめに:

ソフトウェア セットのアプリケーション アーキテクチャには、データ層、ビジネス ロジック層、サービスが含まれますレイヤー、コントロールレイヤー、プレゼンテーションレイヤー、ユーザーなど複数のレベルがあります。

メイン構成ファイル app.json:

メイン構成ファイル app.json はプロジェクトのホーム ディレクトリにあり、現在のプロジェクトをグローバルに構成するために使用されます。

コード例は次のとおりです:

{
  "pages": [
    "pages/index/index",
    "pages/new/new",
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "我的第一个小程序",
    "navigationBarTextStyle": "black"
  }
}

上記のコードには 2 つのページがあります。これは json オブジェクトです。属性のページは、ミニ プログラムのページを定義するために使用されます。上のコードは 2 つのページがあることを示しています。1 つは「index」という名前で「pages/index」の下にあり、もう 1 つは new という名前で「page/new」の下にあります。

pages 配列の最初の項目は、ミニ プログラムの最初のページ、つまりミニ プログラムの開始時に実行および表示されるページを表します。引き続きページを追加する場合は、ページ配列に追加できます。

構成ステータス:

backgroundColor: ウィンドウの背景色を設定するために使用されます。これは、HTML の色設定と同じです。設定するには、16 進数の rgb を使用します。色。デフォルトは白です。

backgroundTextStyle: ドロップダウンの背景フォントと読み込み画像スタイルを設定するために使用されます。「dark」と「light」の 2 つの値があります。

enablePullDownRefresh: プルダウンの更新を有効にするかどうかを設定するために使用されます。デフォルトは false です。

navigationBarBackgroundColor: ナビゲーション バーの背景色を設定するために使用されます。

navigationBarTextStyle: ナビゲーション バーのタイトルの色を設定します。

navigationBarTitleText: ナビゲーション バーのタイトルのテキスト コンテンツを設定します。

下部ナビゲーションの構成:

"tabBar": {
    "list": [
      {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/icon_HOME.png",
      "selectedIconPath": "images/icon_HOMEED.png",
      "lang":"pagePath显示的页面,text文本，iconPath未激活的图标，selectedIconPath激活的图标"
    }, 
    {
      "pagePath": "pages/new/new",
      "text": "广场",
      "iconPath": "images/icon_GUANGCHANG.png",
      "selectedIconPath": "images/icon_GUANGCHANGED.png",
      "lang":"pagePath显示的页面,text文本，iconPath未激活的图标，selectedIconPath激活的图标"
    },
    {
      "pagePath": "pages/userConsole/userConsole",
      "text": "设置",
      "iconPath": "images/icon_SET.png",
      "selectedIconPath": "images/icon_SETED.png",
      "lang":"pagePath显示的页面,text文本，iconPath未激活的图标，selectedIconPath激活的图标"
    }]
  }

tabBar は下部ナビゲーションです。上記のコードには 3 つの下部ナビゲーションがあります

色: タブを非アクティブに設定します状態 テキストの色。

selectedColor: タブのアクティブ化状態のテキストの色を設定します。

borderStyle: 下部のナビゲーション境界線を設定します。

backgroundColor: 下部ナビゲーションの背景色を設定します。

リスト: これは数値です。下部ナビゲーションの数を設定します。最小値は 2、最大値は 5 です。

text: ナビゲーションテキストを設定します。

pagePath、text テキスト、iconPath 非アクティブ アイコン、selectedIconPath アクティブ化アイコンによって表示されるページ。

以上がWeChat ミニプログラム開発の下部ナビゲーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。