ミニプログラムでのグローバル構成の詳細な分析

この記事では、ミニ プログラムのグローバル構成について説明し、ミニ プログラムの一般的な構成項目とページ構成ファイルについて学びます。

#グローバル構成ファイルと一般的に使用される構成項目

app.json (ルート ディレクトリ内)ミニ プログラム このファイルはアプレットのグローバル設定ファイルです。一般的に使用される構成は次のとおりです:

• pages: 現在のミニ プログラム
• window のすべてのページのストレージ パスを記録します。ミニ プログラム ウィンドウの外観をグローバルに設定します。
• tabBar: ミニ プログラム style## の下部にある
tabBar
• 効果を設定します。 #: 新しいバージョンのコンポーネント スタイルを有効にするかどうか [関連する学習の推奨事項: 小さなプログラム開発チュートリアル]

window

---

小さなプログラム ウィンドウのコンポーネント

ウィンドウ 共通の設定項目

#プロパティ名 タイプ ##navigationBarTitleTextStringStringナビゲーション バーのタイトル テキストの内容navigationBarBackgroundColorHexColor#000000ナビゲーション バーの背景色navigationBarTextStyleStringwhiteナビゲーションバーのタイトルの色。黒/白のみをサポートしますbackgroundColorHexColor#ffffffウィンドウの背景色backgroundTextStyleStringdarkドロップダウン読み込みのスタイル。ダーク/ライトのみをサポートしますfalse50

デフォルト値

説明

##enablePullDownRefresh

Boolean

プルダウン更新をグローバルに有効にするかどうか

onReachBottomDistance

Number

ページ下部へのプル イベントがトリガーされたときのページ下部からの距離 (px

単位) #

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

app.json -> window -> NavigationBarTitleText

ナビゲーション バーの背景色を設定します

app.json -> window -> NavigationBarBackgroundColor

##ナビゲーション バーのタイトル色の設定##app.json -> window ->enablePullDownRefresh

グローバルにプルダウン更新を有効にする (

#app.json<span style="font-size: 18px;"></span># でプルダウン更新機能を有効にし、各ミニ プログラム ページに適用されます)<span style="font-size: 18px;"></span>プルダウン更新: 画面上で指を下にスライドさせてページ データを再読み込みする動作<span style="font-size: 18px;"></span>app.json -> window ->enablePullDownRefresh

プルダウン更新時のウィンドウの背景色を設定します

プルダウン更新機能がグローバルに有効になっている場合、デフォルトのウィンドウ背景は白です。カスタム プルダウン更新ウィンドウの背景色を設定します。app.json -> window ->backgroundColor

読み込み時の読み込みスタイルを設定します。プルダウン更新

プルダウン更新機能がグローバルに有効になっている場合、デフォルトのウィンドウ読み込みは白になります。読み込みスタイルの効果を設定します。app.json -> window ->backgroundTextStyle

プルアップと下部の間の距離を設定します。

プルアップとボトムアウト: 画面上で指を上にスライドさせてさらにデータを読み込む行為app.json -> ウィンドウ - > ; onReachBottomDistance

tabBar

---

tabBar とは

tabBar は、モバイル アプリケーションで一般的なページ効果であり、複数のページをすばやく切り替えるために使用されます。ミニ プログラムでは 2 つのタイプに分けられます: Bottom tabBar

Top tabBar
• • 注:
  • tabBar で設定できるのは、最小 2 つ、最大 5 つのタブのみです。
上部の tabBar がレンダリングされると、アイコンは

##tabBar の 6 つの部分

##tabBar 共通設定項目

#tabBar コンポーネントの設定項目

属性

• タイプ
  必須デフォルト値Nobottombottom## のみをサポートします。 #borderStyleStringblackタブバーの上枠の色。 / color のみをサポートします##tabBar 上のテキストのデフォルトの色 (未選択)selectedColorHexColortabBar が選択されているときのテキストのデフォルトの色backgroundColorHexColor tabBarlistArraytabBar リスト、最小 2、最大 5属性

  説明			position	String
  tabBar の位置は、				No
  black	white			HexColorNo
  			No
  			No
  			の背景色は	のタブです
  			各タブ項目の構成オプション

  タイプ
• 必須
  説明#ページパス String は ページ パスであり、ページ textString で最初に定義する必要があります。 は タブ上のボタン テキストです。iconPathStringNo画像パス、アイコン サイズ制限は 40kb、推奨サイズは 81px * 81px、ネットワーク画像はサポートされていません selectedIconPathStringNoパスを選択したときの画像、アイコンのサイズは 40kb に制限されており、推奨サイズは 81px * 81px、ネットワーク画像はサポートされていません

  ---

  ページ構成ファイル

  ページ構成ファイルの役割

  アプレットでは、それぞれ各ページには独自の .json 構成ファイルがあり、現在のページのウィンドウの外観、ページ効果などを構成するために使用されます。

  ページ構成間の関係およびグローバル構成

  • ミニ プログラムでは、app.json の window ノードで各ページをグローバルに構成できます。ミニ プログラムのウィンドウ パフォーマンス

  • ミニ プログラムの特定のページに特別なウィンドウ パフォーマンスを持たせたい場合は、ページ レベルの .json# を変更する必要があります。 ## file

  • 注:
    ページ構成がグローバル構成と競合する場合、近接性の原則に基づき、最終的な効果はページ構成の影響を受けます

  ページ構成で一般的に使用される構成項目

  属性Typeデフォルト値説明navigationBarBackgroundColorHexColor #000000現在のナビゲーション バーの背景色navigationBarTextStyleStringwhite ナビゲーション バーのタイトルの色、黒/白のみをサポートしますnavigationBarTitleTextStringbackgroundColor backgroundTextStyle#enablePullDownRefreshBooleanfalse現在のページのプルダウン更新を有効にするかどうかonReachBottomDistanceNumber50ページ プルアップ ボトム イベント トリガーされたときのページの下部からの距離 (pxプログラミング関連の詳細)知識については、 プログラミング ビデオ

  		#現在のナビゲーション バーのタイトル テキスト コンテンツ
  HexColor	#ffffff	現在のウィンドウの背景色
  String	dark	現在のページでのプルダウン読み込みのスタイルは、ダーク/ライトのみをサポートします

  をご覧ください。 ！

以上がミニプログラムでのグローバル構成の詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。