小程序包含一個(gè)描述整體程序的 app (
所有全局的配置會(huì)寫(xiě)在app.json文件中,例如:決定頁(yè)面文件的路徑、窗口表現(xiàn)蒸矛、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置 tabbar等) 和 多個(gè)描述各自頁(yè)面的 page。
一.目錄結(jié)構(gòu)####
全局配置app中由三個(gè)文件
| 文件 | 作用 | 備注 |
|---|---|---|
| app.js | 邏輯部分 | 1.注冊(cè)一個(gè)小程序.2.接受一個(gè) object 參數(shù)陪毡，3.其指定小程序的生命周期函數(shù)等. |
| app.json | 全局 配置部分 | app.json文件來(lái)對(duì)微信小程序進(jìn)行全局配置，決定頁(yè)面文件的路徑勾扭、窗口表現(xiàn)毡琉、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等. |
| app.wxss | 全局樣式部分 | WXSS 用來(lái)決定 WXML 的組件應(yīng)該怎么顯示. |
自定義頁(yè)面由四個(gè)部分組成
| 文件 | 作用 | 備注 |
|---|---|---|
| js | 邏輯部分 | 在這里寫(xiě)邏輯代碼,跟app.js類似 |
| json | 配置部分 | 與app.json類似用于配置 |
| wxss | 樣式 | 決定組件的顯示樣式 |
| wxml | 組件 | 決定頁(yè)面結(jié)構(gòu) |
二.全局配置####
在app.json中來(lái)對(duì)微信小程序進(jìn)行全局配置.在這里可配置的大體有pages,window,tabBar,debug 這四樣.
1.pages(頁(yè)面顯示路徑配置)#####
(接受一個(gè)數(shù)組妙色，每一項(xiàng)都是字符串桅滋，來(lái)指定小程序由哪些頁(yè)面組成。每一項(xiàng)代表對(duì)應(yīng)頁(yè)面的【路徑+文件名】信息身辨，數(shù)組的第一項(xiàng)代表小程序的初始頁(yè)面丐谋。小程序中新增/減少頁(yè)面芍碧，都需要對(duì) pages 數(shù)組進(jìn)行修改。
"pages":[
"pages/index/index",//第一項(xiàng)為默認(rèn)初始頁(yè)面顯示路徑
"pages/test/test",//添加一個(gè)自定義頁(yè)面
"pages/logs/logs"
]
2.window(用于設(shè)置小程序的狀態(tài)欄号俐、導(dǎo)航條师枣、標(biāo)題、窗口背景色萧落。)
"window":{
"backgroundTextStyle":"light", //導(dǎo)航欄標(biāo)題顏色,僅支持 black/white
"navigationBarBackgroundColor": "green",//導(dǎo)航欄背景顏色
"navigationBarTitleText": "這里改變導(dǎo)航文字",//導(dǎo)航欄標(biāo)題
"navigationBarTextStyle":"white",//導(dǎo)航欄背景顏色
"enablePullDownRefresh":true,//下拉設(shè)置
"backgroundColor":"white"http://窗口背景顏色
},
3.tabBar#####
如果我們的小程序是一個(gè)多 tab 應(yīng)用（客戶端窗口的底部或頂部有 tab 欄可以切換頁(yè)面）践美，那么我們可以通過(guò) tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn)，以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁(yè)面找岖。
*tabBar 的 tab 的列表,最少2個(gè)陨倡、最多5個(gè) tab 每個(gè)tab用list表示
"tabBar": {
"selectedColor": "red",//被選中顏色
"backgroundColor":"yellow",//背景顏色
"borderStyle":"black",//邊框顏色
"position":"bottom",//tabbar顯示在上面還是下面
"list": [{
"pagePath": "pages/index/index",//關(guān)聯(lián)頁(yè)面路徑
"text": "首頁(yè)",//tab標(biāo)題
"iconPath": "pages/images/RedCalendar.png//tab圖片
"selectedIconPath": "pages/images/RedCalendar.png"http://被選擇tab圖片
},
{
"pagePath": "pages/test/test",
"text": "測(cè)試",
"iconPath": "pages/images/RedFriends@3x.png",
"selectedIconPath": "pages/images/RedFriends@3x.png"
}]
},
配置完成顯示頁(yè)面####
顯示結(jié)果
