ユニアプリ入門（グローバルスタイル設定、ページ作成、タブバー設定）

ユニアプリエントリのグローバルスタイル構成

page.json

• これは、グローバルスタイルなどの構成を持つuniプロジェクトに関するページのグローバル構成ファイルです。
• グローバルスタイル設定ファイル公式ウェブサイト：グローバルスタイルglobalStyle
• グローバルスタイルは、page.jsonファイルのglobalStyleプロパティ

ユニナビゲーションバーの背景色を設定する

• NavigationBarBackgroundColor
• page.json-globalStyle

{
    
    
	"globalStyle": {
    
    
		"navigationBarBackgroundColor": "#7FFF00",
	}
}

ナビゲーションバーのタイトルの色

• NavigationBarTextStyle
• ナビゲーションバーのタイトルの色とステータスバーの前景色、黒/白のみをサポート

	"globalStyle": {
    
    
		"navigationBarTextStyle": "white",
	}

NavigationBarTitleText

• ナビゲーションバーのタイトルテキストコンテンツ

	"globalStyle": {
    
    
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "小渣亮",
	}

• 注：次の構成が影響するため、変更後、対応する効果が表示されない可能性があります
  • ページ内の構成navigationBarTitleTextが影響しますが、削除するだけです

{
    
    
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
    
    
			"path": "pages/index/index"
			// "style": { 
			// 	"navigationBarTitleText": "uni-app"
			// }
		}
	],
	"globalStyle": {
    
    
		"navigationBarTitleText": "小渣亮",
	}
}

• 最終効果
  

プルダウンリフレッシュを有効にして、プルダウンリフレッシュの背景色を設定します

• enablePullDownRefreshブール値
  • プルダウン更新を有効にするかどうかについては、ページのライフサイクルを参照してください。

	"globalStyle": {
    
    
		"backgroundColor": "#000000",
		"enablePullDownRefresh": true
	}

• WeChatアプレットで見られる効果

uni-appはじめにページの作成

page.json構成ファイル

• 公式サイト：公式サイト

新しいメッセージページパスを作成します

• ページファイルにpages/msg/msg.vueを追加する必要があります
• page.jsonファイルでパスを構成する必要があります
  • { "path": "pages/msg/msg" }

{
	"pages": [ 
		{
			"path": "pages/msg/msg"
		},
		{
			"path": "pages/index/index"
		}
    ],
}

現在追加されているページの別のスタイルを変更する

• { "path": "pages/msg/msg", "style":{} },
• スタイルで書かれています
• スタイル

		{
    
    
			"path": "pages/msg/msg",
			"style":{
    
    
					"navigationBarTitleText":"我是msg",
					"navigationBarBackgroundColor": "#007aff"
			}
		},

別のスタイルh5などを設定します。

• h5関連のスタイルを変更する
• h5ドロップダウン更新フォントの色を構成します（h5のみが有効になります）

		{
    
    
			"path": "pages/msg/msg",
			"style":{
    
    
					"h5":{
    
    
						"pullToRefresh":{
    
    
							"color":"#DD524D"
						}
					}
			}
		},

• 効果
  

uniのタブバーの構成

page.json統合構成ファイルで構成されます

• タブバー官ر

tabBarを実装する

{
    
    
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
    
    
			"path": "pages/msg/msg",
			"style":{
    
    
					"navigationBarTitleText":"我是msg",
					"navigationBarBackgroundColor": "#007aff",
					"h5":{
    
    
						"pullToRefresh":{
    
    
							"color":"#DD524D"
						}
					}
			}
		},
		{
    
    
			"path": "pages/index/index"

		},{
    
    
        "path" : "pages/about/about",	
				"style":{
    
    
					"navigationBarTitleText":"我是about",
					"navigationBarBackgroundColor": "#007afe"
			}
        }
    ],
	"globalStyle": {
    
    
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "小渣亮",
		"navigationBarBackgroundColor": "#7FFF00",
		"backgroundColor": "#000000",
		"enablePullDownRefresh": true,
		"backgroundTextStyle": "dark"
	},
	"tabBar":{
    
    
		"list":[
			{
    
    
				"text":"首页",
				"pagePath":"pages/index/index"
			},
			{
    
    
				"text":"关于",
				"pagePath":"pages/about/about"
			},
			{
    
    
				"text":"消息",
				"pagePath":"pages/msg/msg"
			}
		]
	}
}

• 効果
  

tabBarの他のプロパティ

• "color"： "#FFFFFF"、デフォルトフォント
• "selectedColor"： "＃ff0001"、選択されたフォント
• "backgroundColor"： "青"、背景色