在開(kāi)發(fā)我們的小程序之前請(qǐng)先仔細(xì)看完以下參考文檔
小程序代碼構(gòu)成
我們通過(guò)開(kāi)發(fā)者工具快速創(chuàng)建了一個(gè) QuickStart 項(xiàng)目。你可以留意到這個(gè)項(xiàng)目里邊生成了不同類型的文件:
.json? ?后綴的?JSON?配置文件
.wxml? 后綴的?WXML?模板文件
.wxss? 后綴的?WXSS?樣式文件
.js? ? ? ? 后綴的?JS?腳本邏輯文件
接下來(lái)我們分別看看這4種文件的作用
JSON配置
JSON 是一種數(shù)據(jù)格式，并不是編程語(yǔ)言，在小程序中，JSON扮演的靜態(tài)配置的角色。
我們可以看到在項(xiàng)目的根目錄有一個(gè)?app.json?和?project.config.json，此外在?pages/logs?目錄下還有一個(gè)?logs.json，我們依次來(lái)說(shuō)明一下它們的用途。
小程序配置 app.json
app.json?是當(dāng)前小程序的全局配置，包括了小程序的所有頁(yè)面路徑、界面表現(xiàn)、網(wǎng)絡(luò)超時(shí)時(shí)間、底部 tab 等。
QuickStart 項(xiàng)目里邊的?app.json?配置內(nèi)容如下：
{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/index1/index",
"pages/home/home",
"pages/my/my" ],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black" },
"tabBar": {
"list": [
{ "pagePath": "pages/index/index","text": "首頁(yè)" },
{ "pagePath":"pages/logs/logs","text": "日志" }]
},
"networkTimeout": { "request": 10000, "downloadFile": 10000 },
"debug": true,
"style": "v2",
"sitemapLocation": "sitemap.json"}
}
我們簡(jiǎn)單說(shuō)一下這個(gè)配置各個(gè)項(xiàng)的含義:
pages字段 —— 用于描述當(dāng)前小程序所有頁(yè)面路徑，這是為了讓微信客戶端知道當(dāng)前你的小程序頁(yè)面定義在哪個(gè)目錄。
window字段 —— 定義小程序所有頁(yè)面的頂部背景顏色，文字顏色定義等；不同頁(yè)面有時(shí)需要不同配置，只能設(shè)置window屬性，無(wú)須寫(xiě)window這個(gè)鍵
配置窗口狀態(tài)：
? ??????backgroundColor：窗口的背景色，使用十六進(jìn)制的RGB
? ? ? ? backgroundTextStyle：下拉背景字體、loading圖的樣式，目前只支持設(shè)置為"dark" or "light
? ? ? ? enablePullDownRefresh：是否開(kāi)啟下拉刷新
? ? ? ? navigationBarBackgroundColor：導(dǎo)航欄背景顏色
? ? ? ? navigatonBarTextStyle：導(dǎo)航標(biāo)題顏色，目前只支持black and white
? ? ? ? navigationBarTitleText：導(dǎo)航欄標(biāo)題文字內(nèi)容
配置窗口底部tabBar：
如果小程序是一個(gè)多 tab 應(yīng)用（客戶端窗口的底部或頂部有 tab 欄可以切換頁(yè)面），可以通過(guò) tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn)，以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁(yè)面。
? ??????colorHexColor：tab上的文字默認(rèn)顏色，僅支持十六進(jìn)制顏色
? ??????selectedColorHexColor：?tab上的文字選中時(shí)的顏色，僅支持十六進(jìn)制顏色
? ??????backgroundColorHexColor:：tab的背景色，僅支持十六進(jìn)制顏色
? ??????borderStylestring：上邊框的顏色， 僅支持?black?/?white
? ??????listArray：tab 的列表，詳見(jiàn)?list?屬性說(shuō)明，最少 2 個(gè)、最多 5 個(gè) tab
? ??????position：tabBar 的位置，僅支持?bottom?/?top
? ??????custom：自定義 tabBar，見(jiàn)詳情
小程序配置 ?project.config.json
小程序開(kāi)發(fā)者工具在每個(gè)項(xiàng)目的根目錄都會(huì)生成一個(gè)project.config.json，在工具上做的任何配置都會(huì)寫(xiě)入到這個(gè)文件，當(dāng)重新安裝工具或者換電腦工作時(shí)，只要載入同一個(gè)項(xiàng)目的代碼包，開(kāi)發(fā)者工具就自動(dòng)會(huì)幫你恢復(fù)到當(dāng)時(shí)你開(kāi)發(fā)項(xiàng)目時(shí)的個(gè)性化配置，其中會(huì)包括編輯器的顏色、代碼上傳時(shí)自動(dòng)壓縮等等一系列選項(xiàng)。
可以在項(xiàng)目根目錄使用project.config.json文件對(duì)項(xiàng)目進(jìn)行配置。
（1）compileType 有效值：
（2）setting 中可以指定以下設(shè)置：
（3）scripts 中指定自定義預(yù)處理的命令：
（4）packOptions：
packOptions用以配置項(xiàng)目在打包過(guò)程中的選項(xiàng)。打包是預(yù)覽、上傳時(shí)對(duì)項(xiàng)目進(jìn)行的必須步驟。
目前可以指定packOptions.ignore字段，用以配置打包時(shí)對(duì)符合指定規(guī)則的文件或文件夾進(jìn)行忽略，以跳過(guò)打包的過(guò)程，這些文件或文件夾將不會(huì)出現(xiàn)在預(yù)覽或上傳的結(jié)果內(nèi)。
packOptions.ignore為一對(duì)象數(shù)組，對(duì)象元素類型如下：
其中，type可以取的值為folder、file、suffix、prefix，分別對(duì)應(yīng)文件夾、文件、后綴、前綴。
示例配置如下：
{
? "packOptions": {
? ? "ignore": [{
? ? ? "type":"file",
? ? ? "value":"test/test.js"? ? }, {
? ? ? "type":"folder",
? ? ? "value":"test"? ? }, {
? ? ? "type":"suffix",
? ? ? "value":".webp"? ? }, {
? ? ? "type":"prefix",
? ? ? "value":"test-"? ? }]
? }
}
注:value字段的值不支持通配符、正則表達(dá)式。若表示文件或文件夾路徑，以小程序目錄 (miniprogramRoot) 為根目錄。
（6）debugOptions：
debugOptions用以配置在對(duì)項(xiàng)目代碼進(jìn)行調(diào)試時(shí)的選項(xiàng)。
目前可以指定debugOptions.hidedInDevtools字段，用以配置調(diào)試時(shí)于調(diào)試器 Sources 面板隱藏源代碼的文件。
hidedInDevtools的配置規(guī)則和packOptions.ignore是一致的。
當(dāng)某個(gè) js 文件符合此規(guī)則時(shí)，調(diào)試器 Sources 面板中此文件源代碼正文內(nèi)容將被隱藏，顯示為：
// xxx.js has been hided by project.config.json
注：配置此規(guī)則后，可能需要關(guān)閉并重新打開(kāi)項(xiàng)目才能看到效果。
（7）項(xiàng)目配置示例：
{
? "miniprogramRoot":"./src",
? "qcloudRoot":"./svr",
? "setting": {
? ? "postcss": true,
? ? "es6": true,
? ? "minified": true,
? ? "urlCheck": false
? },
? "packOptions": {},
? "debugOptions": {}
}
目錄結(jié)構(gòu)
小程序包含一個(gè)描述整體程序的?app?和多個(gè)描述各自頁(yè)面的?page。
一個(gè)小程序主體部分由三個(gè)文件組成，必須放在項(xiàng)目的根目錄，如下：
文件必需作用
app.js是小程序邏輯
app.json是小程序公共配置
app.wxss否小程序公共樣式表
一個(gè)小程序頁(yè)面由四個(gè)文件組成，分別是：
文件類型必需作用
js是頁(yè)面邏輯
wxml是頁(yè)面結(jié)構(gòu)
json否頁(yè)面配置
wxss否頁(yè)面樣式表
注意：為了方便開(kāi)發(fā)者減少配置項(xiàng)，描述頁(yè)面的四個(gè)文件必須具有相同的路徑與文件名。
允許上傳的文件格式
在項(xiàng)目目錄中，以下文件會(huì)經(jīng)過(guò)編譯，因此上傳之后無(wú)法直接訪問(wèn)到：.js、app.json、.wxml、*.wxss（其中 wxml 和 wxss 文件僅針對(duì)在 app.json 中配置了的頁(yè)面）。除此之外，只有后綴名在白名單內(nèi)的文件可以被上傳，不在白名單列表內(nèi)文件在開(kāi)發(fā)工具能被訪問(wèn)到，但無(wú)法被上傳。具體白名單列表如下：
.wxs
.png
.jpg
.jpeg
.gif
.svg
.json
.cer
.mp3
.aac
.m4a
.mp4
.wav
.ogg
.silk
持續(xù)更新中...
