微信小程序框架主體文件app.json+app.js+app.wxss
框架主體文件由app.json、app.js、app.wxss構(gòu)成，這3個(gè)文件必須放置在項(xiàng)目根目錄，一個(gè)小程序只有一份，它們負(fù)責(zé)小程序整體的配置:
app.json:小程序公共設(shè)置，配置小程序全局設(shè)置。
-app.js:小程序邏輯文件，主要用于注冊(cè)小程序全局實(shí)例，編譯時(shí)會(huì)和其他頁面邏輯文件打包成一份JavaScript文件。
-app.wxss:小程序公共樣式表，對(duì)所有頁面的布局文件都有效。
app.json和app.js是必須存在的，app.wxss不是必須創(chuàng)建的，可以根據(jù)項(xiàng)目情況進(jìn)行創(chuàng)建。接下來我們逐個(gè)分析每個(gè)文件。
1配置文件(app.json)
app.json是小程序配置文件，編寫時(shí)要嚴(yán)格遵循json的格式規(guī)范。app.json在程序加載時(shí)加載，負(fù)責(zé)對(duì)小程序的全局配置，其配置項(xiàng)有:
-pages:設(shè)置頁面路徑，必填項(xiàng)。-window:設(shè)置默認(rèn)頁面的窗口表現(xiàn)。-tabBar:設(shè)置tab的表現(xiàn)。
-networkTimeout:設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間。
-debug:設(shè)置是否開啟debug模式，默認(rèn)關(guān)閉。app.json文件內(nèi)容整體結(jié)構(gòu)如下:
{
Ⅱ頁面路徑設(shè)置"pages”: ,
默認(rèn)頁面的窗口設(shè)置"window"”:仍，
Ⅱ底部tab設(shè)置"tabBar":i,
設(shè)置網(wǎng)絡(luò)請(qǐng)求API的超時(shí)時(shí)間"networkTimeout":f，
l是否為debug模式"debug" : false
1.pages配置
pages負(fù)責(zé)注冊(cè)小程序頁面，必須填寫，value值為一個(gè)包含頁面路徑的數(shù)組，用來指定小程序由哪些頁面構(gòu)成，每一項(xiàng)由頁面“路徑+文件名”組成，如下所示:
"pages" : [
"mypages/indexlindex",
"mypages/page2/mypagefilename","otherpages/index/index"
]
pages數(shù)組中頁面路徑不需要填寫文件后綴名，渲染頁面時(shí)框架
會(huì)自動(dòng)尋找路徑.json，.js,，.wxml,.wxss四個(gè)文件進(jìn)行整合，如上文配置中“mypages/index/index”路徑，頁面加載時(shí)框架會(huì)自動(dòng)匹配尋找“mypages/index/index.json”、“mypages/index/index.js” ."mypages/index/index.wxml”、"mypages/index/index.wxss”這四個(gè)文件，路徑中的文件名可以和目錄名不一致，但在項(xiàng)目過程中，為了便于管理，建議文件名和目錄名保持一致。pages配置數(shù)組第一項(xiàng)代表小程序的初始頁面。小程序中增加、刪除頁面，都需要對(duì)pages進(jìn)行修改，并且重啟項(xiàng)目。
2.window配置
window負(fù)責(zé)設(shè)置小程序狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色等系統(tǒng)級(jí)樣式。屬性有:
- navigationBarBackgroundColor:導(dǎo)航欄背景顏色，值為HexColor (十六進(jìn)制顏色值)，如:“#ff83fa”，默認(rèn)值為#000000。
-navigationBarTextStyle:導(dǎo)航欄標(biāo)題顏色，僅支持black/white,默認(rèn)值為white。
-navigationBarTitleText:導(dǎo)航欄標(biāo)題文字內(nèi)容。
-backgroundTextStyle:下拉背景字體、Loading圖的樣式，僅支持dark/light。
-enablePullDownRefresh:是否開啟下拉刷新，默認(rèn)為false，開啟后，當(dāng)用戶下拉時(shí)會(huì)觸發(fā)頁面onPullDownRefresh事件。
配置項(xiàng)目如圖2-5所示。
3.tabBar配置
當(dāng)程序頂部或底部需要菜單欄時(shí)，我們可以通過配置tabBar快速實(shí)現(xiàn),tabBar是個(gè)非必填項(xiàng)目?？膳渲脤傩匀缦?/span>:
-color: tab上的文字默認(rèn)顏色，值為HexColor (十六進(jìn)制顏色值)，必填項(xiàng)。
-selectedColor: tab上的文字選中時(shí)的顏色，值為HexColor (十六進(jìn)制顏色值)，必填項(xiàng)。
-backgroundColor: tab的背景色，值為HexColor (十六進(jìn)制顏色值)，必填項(xiàng)。
-borderStyle: tabbar上邊框的顏色，僅支持black/white，默認(rèn)值為black。
-list: tab的列表，必填項(xiàng)，其值為一個(gè)數(shù)組，最少2個(gè)、最多5個(gè)tab，數(shù)組中每—項(xiàng)是一個(gè)對(duì)象，代表一個(gè)tab的相關(guān)配置，每項(xiàng)的相關(guān)配置如下:
-pagePath:頁面路徑，必須在pages中先定義，必填項(xiàng)。-text: tab上按鈕的文字，必填項(xiàng)。
-iconPath: tab 上icon圖片的相對(duì)路徑，icon大小限制為40kb，必填項(xiàng)。
-selectedlconPath:選中時(shí)圖片的相對(duì)路徑,icon大小限制為
40kb，必填項(xiàng)。
-position: tab在頂部或底部顯示，可選值為bottom、top，默認(rèn)值為bottom。
示例代碼見代碼清單2-1。代碼清單2-1app.json
"pages" : [
"mypages/index/index","mypages/list/list"
J
"tabBar" : {
"color": "#O0O000",
"selectedColor": "#ff7f50""backgroundColor": "#fffff","borderStyle" : "black",""list": [
{
"iconPath" : "images/home.png",
"selectedlconPath" : "images/home-selected.png","pagePath" : "mypages/index/index",
"text": "首頁"
},
{
"iconPath" : "images/search.png",
"selectedlconPath" : "images/search-selected.png","pagePath" : "mypages/list/list",
"text":"搜索"
,
{
"iconPath" : "images/list.png",
"selectedlconPath" : "images/list-selected.png","pagePath" : "mypages/listlist",
"text":"列表"
}
],
"borderStyle" : "bottom"}
}
配置后頁面效果如圖2-6所示。
4.networkTimeout配置
小程序中各種網(wǎng)絡(luò)請(qǐng)求APIl的超時(shí)時(shí)間只能通過networkTimeout
統(tǒng)一設(shè)置，不能在API中單獨(dú)設(shè)置，具體的網(wǎng)絡(luò)請(qǐng)求API可參考后面章節(jié)，networkTimeout支持的屬性有:
-request:設(shè)置wx.request的超時(shí)時(shí)間，單位毫秒。
- connectSocket:設(shè)置wx.connectSocket的超時(shí)時(shí)間，單位毫秒。
-uploadFile:設(shè)置wx.uploadFile的超時(shí)時(shí)間，單位毫秒。-downloadFile:設(shè)置wx.downloadFile的超時(shí)時(shí)間，單位毫秒。示例代碼如下:
"pages" : [
"mypageslindex/index"]
"networkTimeout" : {"request" : 60000,
"connectSocket" : 60000}
5.debug配置
此配置項(xiàng)控制是否開啟debug模式，默認(rèn)是關(guān)閉的。開啟debug
模式后，在開發(fā)者工具的控制面板，調(diào)試信息以info的形式輸出，如圖2-7所示。其中信息有Page的注冊(cè)、頁面路由、數(shù)據(jù)更新、事件觸發(fā)，可以幫助開發(fā)者快速定位一些常見問題。
示例代碼如下:
{
"pages" : [
"mypageslindex/index","mypages/list/list"
J,
"debug" : true}
以上便是app.json的5類配置項(xiàng)，這些配置項(xiàng)都是全局的，小程序中除了app.json這種全局配置文件還有頁面配置文件，當(dāng)路由到對(duì)應(yīng)頁面時(shí)，頁面配置文件的配置項(xiàng)將會(huì)覆蓋全局配置，頁面配置文件將在后續(xù)內(nèi)容中進(jìn)行詳細(xì)介紹。
您當(dāng)前瀏覽的文章：《微信小程序框架主體文件app.json+app.js+app.wxss》由小程序開發(fā)服務(wù)品牌九尾狐整理發(fā)布。
轉(zhuǎn)載請(qǐng)注明：http://www.jytsl.com.cn/shows/6/23.html
文章標(biāo)簽：
