ミニプログラムでのグローバル構成の詳細な分析-ミニプログラム開発-php.cn

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

青灯夜游

リリース： 2022-01-25 10:54:03

転載

2731 人が閲覧しました

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

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

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

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

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

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

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

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

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

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

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

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

tabBar

tabBar とは

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

- 注:
- tabBar で設定できるのは、最小 2 つ、最大 5 つのタブのみです。

##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	現在のページでのプルダウン読み込みのスタイルは、ダーク/ライトのみをサポートします