---

一、項目步驟

1 新建一個無AppID的movie項目

2將準備好的底部標簽導航圖標拷貝到movie項目下面(將圖標文件夾image放到項目文件夾里）

image圖

3 打開App.json配置文件，在pages數組里添加4個頁面路徑:電影“pages/movie/movie”、影院“pages/cinema/cinema”、發現“pages/find/find”、我的“pages/me/me”，保存后會自動生成相應的頁面文件夾;刪除“pages/index/index”“pages/logs/logs”頁面路徑以及對應的文件夾

4 在window數組里配置窗口導航背景顏色為紅色(#D53E37)，導航欄文字為電影，字體顏色為白色(white)。

backgroundTextStyle（背景文本樣式）有light和dark
navigationBarBackgroundColor：導航欄背景顏色
navigationBarTitleText：導航欄標題文字
navigationBarTextStyle：導航欄文本樣式

5 在tabBar對象里配置底部標簽導航背景色為灰色(#f5f5f5)，文字默認顏色為白色(white)，選中時為紅色(#D53E37)，在list數組里配置底部標簽導航對應的頁面、導航名稱、默認時圖標、選中時圖標。

二 tabBar導航欄講解

tabBar 字段：定義小程序頂部、底部 tab 欄，用以實現頁面之間的快速切換，可以通過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面。

屬性	類型	必填	默認值	描述
color	HexColor	是		tab 上的文字默認顏色，僅支持十六進制顏色
selectedColor	HexColor	是		tab 上的文字選中時的顏色，僅支持十六進制顏色
backgroundColor	HexColor	是		tab 的背景色，僅支持十六進制顏色
borderStyle	string	否	black	tabbar 上邊框的顏色， 僅支持 black / white
list	Array	是		tab 的列表，詳見 list 屬性說明，最少 2 個、最多 5 個 tab
position	string	否	bottom	tabBar 的位置，僅支持 bottom / top

其中 list 接受一個數組，只能配置最少 2 個、最多 5 個 tab。tab 按數組的順序排序，每個項都是一個對象，其屬性值如下

屬性	類型	必填	描述
pagePath	string	是	頁面路徑，必須在 pages 中先定義
text	string	是	tab 上按鈕文字
iconPath	string	否	圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網絡圖片。當 position 為 top 時，不顯示 icon。
selectedIconPath	string	否	選中時的圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網絡圖片。當 position 為 top 時，不顯示 icon。

代碼示例app.json

{"pages":["pages/movie/movie","pages/cinema/cinema","pages/find/find","pages/me/me"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#D53E37","navigationBarTitleText": "電影","navigationBarTextStyle":"white"},"tabBar": {"selectedColor": "#D53E37","backgroundColor": "#f5f5f5","borderStyle": "white","list": [{"pagePath": "pages/movie/movie","text": "電影","iconPath": "images/bar/movie-0.jpg","selectedIconPath": "images/bar/movie-1.jpg"},{"pagePath": "pages/cinema/cinema","text": "影院","iconPath": "images/bar/cinema-0.jpg","selectedIconPath": "images/bar/cinema-1.jpg"},{"pagePath": "pages/find/find","text": "發現","iconPath": "images/bar/find-0.jpg","selectedIconPath": "images/bar/find-1.jpg"},{"pagePath": "pages/me/me","text": "我的","iconPath": "images/bar/me-0.jpg","selectedIconPath": "images/bar/me-1.jpg"}]}
}

三 頁面配置

小程序的頁面配置,也稱局部配置,每一個小程序頁面也可以使用自己的.json文件來對本頁面的窗口表現進行配置需要注意的是：頁面|配置文件的屬性和 全局配置文件中的 window 屬性幾乎一致,只不過這里不需要額外指定 window 字段,因此如果出現相同的配置項，頁面中配置項 會覆蓋全局配置文件中相同的配置項。

屬性	類型	默認值	描述
navigationBarBackgroundColor	HexColor	#000000	導航欄背景顏色，如 #000000
navigationBarTextStyle	string	white	導航欄標題、狀態欄顏色，僅支持 black / white
navigationBarTitleText	string		導航欄標題文字內容
navigationStyle	string	default	導航欄樣式，僅支持以下值：default 默認樣式；custom 自定義導航欄，只保留右上角膠囊按鈕。
homeButton	boolean	false	在非首頁、非頁面棧最底層頁面或非tabbar內頁面中的導航欄展示home鍵
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundColorContent	HexColor	#RRGGBBAA	頁面容器背景色
backgroundTextStyle	string	dark	下拉 loading 的樣式，僅支持 dark / light
backgroundColorTop	string	#ffffff	頂部窗口的背景色，僅 iOS 支持
backgroundColorBottom	string	#ffffff	底部窗口的背景色，僅 iOS 支持
enablePullDownRefresh	boolean	false	是否開啟當前頁面下拉刷新
onReachBottomDistance	number	50	頁面上拉觸底事件觸發時距頁面底部距離，單位為px。
pageOrientation	string	portrait	屏幕旋轉設置，支持 auto / portrait / landscape
disableScroll	boolean	false	設置為 true 則頁面整體不能上下滾動。只在頁面配置中有效，無法在 app.json 中設置
usingComponents	Object	否	頁面自定義組件配置
initialRenderingCache	string		頁面初始渲染緩存配置，支持 static / dynamic
style	string	default	啟用新版的組件樣式
singlePage	singlePage	否	單頁模式相關配置
restartStrategy	string	homePage	重新啟動策略配置
handleWebviewPreload	string	static	控制預加載下個頁面的時機。支持 static / manual / auto
visualEffectInBackground	string	否	切入系統后臺時，隱藏頁面內容，保護用戶隱私。支持 hidden / none，若對頁面單獨設置則會覆蓋全局的配置
enablePassiveEvent	Object或boolean	否	事件監聽是否為 passive，若對頁面單獨設置則會覆蓋全局的配置
renderer	string	否	渲染后端
rendererOptions	Object	否	渲染后端選項
componentFramework	string	否	組件框架

找到對應模塊的.json文件：不帶window

全局配置app.json