文件結(jié)構(gòu)
配置-app.json
配置-page.json
文件結(jié)構(gòu)
- 主體部分有三個(gè)文件組成:
app.js(邏輯)
、app.json(公共設(shè)置)
、app.wxss(公共樣式表)
- 頁面由四個(gè)文件組成,分別是
js(頁面邏輯)
、wxml(頁面結(jié)構(gòu))
、wxss(頁面樣式表)
、json(頁面配置)
配置-app.json
- 使用
app.json
文件來對(duì)微信小程序進(jìn)行全局配置,決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。
app.json配置項(xiàng)列表.png
pages 接受一個(gè)數(shù)組,每一項(xiàng)都是字符串,來指定小程序由哪些頁面組成。每一項(xiàng)代表對(duì)應(yīng)頁面的【路徑+文件名】信息,數(shù)組的第一項(xiàng)代表小程序的初始頁面。小程序中新增/減少頁面,都需要對(duì) pages 數(shù)組進(jìn)行修改。
文件名不需要寫文件后綴,因?yàn)榭蚣軙?huì)自動(dòng)去尋找路徑
.json
,.js
,.wxml
,.wxss
的四個(gè)文件進(jìn)行整合。window 用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。
window設(shè)置.png
設(shè)置示例.png
- tabbar 如果我們的小程序是一個(gè)多 tab 應(yīng)用(客戶端窗口的底部或頂部有 tab 欄可以切換頁面),那么我們可以通過 tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn),以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁面。
- Tip: 通過頁面跳轉(zhuǎn)
wx.navigateTo
或者頁面重定向wx.redirectTo
所到達(dá)的頁面,即使它是定義在 tabBar 配置中的頁面,也不會(huì)顯示底部的 tab 欄。tabBar 是一個(gè)數(shù)組,只能配置最少2個(gè)、最多5個(gè) tab,tab 按數(shù)組的順序排序。
tabbar屬性列表.png
list屬性列表.png
示例說明.png
- networkTimeout 可以設(shè)置各種網(wǎng)絡(luò)請求的超時(shí)時(shí)間。
networkTimeout屬性說明.png
- debug 可以在開發(fā)者工具中開啟 debug 模式,在開發(fā)者工具的控制臺(tái)面板,調(diào)試信息以 info 的形式給出,其信息有Page的注冊,頁面路由,數(shù)據(jù)更新,事件觸發(fā) 。 可以幫助開發(fā)者快速定位一些常見的問題。
配置-page.json
- page.json 每一個(gè)小程序頁面也可以使用.json文件來對(duì)本頁面的窗口表現(xiàn)進(jìn)行配置。 頁面的配置比app.json全局配置簡單得多,只是設(shè)置 app.json 中的 window 配置項(xiàng)的內(nèi)容,頁面中配置項(xiàng)會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)。
- 頁面的.json只能設(shè)置 window 相關(guān)的配置項(xiàng),以決定本頁面的窗口表現(xiàn),所以無需寫 window 這個(gè)鍵
page.json配置.png