- 微信小程序開發零基礎入門
- 周文潔
- 2390字
- 2020-07-06 18:06:30
2.2 小程序的目錄結構
小程序的目錄結構主要包含項目配置文件、主體文件、頁面文件和其他文件。本節將基于2.1節創建的第一個小程序項目對代碼文件的構成展開分析。
2.2.1 項目配置文件
每個小程序在新建時都會自動生成一個項目配置文件project.config.json，該文件直接位于項目根目錄下，如圖2-17所示。其內部代碼可用來定義小程序的項目名稱、AppID等內容，如圖2-18所示。
圖2-17 項目配置文件project.config.json的位置
圖2-18 項目配置文件project.config.json的代碼
2.2.2 主體文件
小程序主體文件同樣直接位于項目根目錄下，如圖2-19所示。
圖2-19 app系列文件的位置
由圖2-19可見主體文件名稱均為app，根據后綴名不同分為3種類型。
? app.json：必填文件，用于描述小程序的公共配置。
? app.js：必填文件，用于描述小程序的整體邏輯。
? app.wxss：可選文件，小程序公共樣式表。
1 app.json
app.json文件是小程序的全局配置文件，主要包含了小程序所有頁面的路徑地址、導航欄樣式等。當前該文件的內部代碼如圖2-20所示。
圖2-20 全局配置文件app.json的代碼
由圖2-20可見，本次小程序項目主要包含了pages和window兩個屬性。事實上，除了pages和window以外，app.json還可以配置tabBar、networkTimeout及debug等屬性，這些屬性的具體說明如表2-1所示。
表2-1 全局配置文件app.json的屬性
1）pages屬性
pages屬性對應的值是數組形式，數組的每一項都是以字符串形式記錄小程序頁面的路徑地址。例如之前圖2-20中pages屬性的相關代碼就表示當前共有兩個頁面，分別是index和log頁面，并且其中的index頁面被默認為小程序的初始頁面。
由于默認數組中的第一個元素就是小程序的初始頁面，開發者也可以臨時手動調整數組中元素的順序，以便快速查看不同頁面的模擬器預覽效果。
如果新建頁面，app.json中的pages屬性會自動更新代碼，將新增頁面的路徑記錄到數組中的最后一行。需要注意的是，如果對頁面進行刪除或者在硬盤中直接添加新頁面，則不會觸發代碼自動更新效果，而需要手動修改app.json中的pages屬性值。
2）window屬性
window屬性對應的值是對象形式，其中包括了小程序頁面頂端導航欄的背景顏色、標題文字內容以及文字顏色等屬性，具體可以包含的對象屬性如表2-2所示。
表2-2 app.json文件中的window屬性值
注意：標記類型為HexColor的屬性值只支持十六進制顏色表示方式。例如#ff0000表示紅色，也可簡寫為#f00，并且大小寫不限。
這里不妨對app.json進行簡單修改，修改后的代碼如圖2-21所示。
圖2-21 小程序全局配置文件app.json的代碼
對比原先的代碼，對修改內容說明如下。
? 第8行：將導航欄背景顏色從白色改為紅色（#f00）。
? 第9行：將導航欄文字內容從“WeChat”改為“測試”。
? 第10行：將導航欄文字顏色從黑色改為白色（white）。
修改后的預覽效果如圖2-22所示。
圖2-22 修改app.json文件中的window屬性后的預覽圖
開發者可以根據實際需要重新修改定義window屬性中的各種樣式效果。
3）tabBar屬性
如果小程序是一個多tab應用（客戶端窗口的底部有tab欄可以切換頁面），可以通過tabBar配置項指定tab欄的表現，以及tab切換時顯示的對應頁面。
tabBar的屬性值如表2-3所示。
表2-3 app.json文件中的tabBar屬性值
其中，list接收一個數組，只能配置最少兩個、最多5個tab。tab按數組的順序排序，每項都是一個對象，其屬性值如表2-4所示。
表2-4 list屬性值
注意：當position屬性值為top時iconPath和selectedIconPath屬性無效，不顯示圖標。
圖2-23有助于讀者更好地理解tabBar和list屬性值的作用區域。
圖2-23 tabBar屬性值的對應關系
iconPath和selectedIconPath屬性不是必填內容，例如：
上述代碼表示聲明了帶有兩個頁面的tabBar效果，tab文字內容分別為首頁和例題。
4）networkTimeout屬性
app.json中的networkTimeout屬性可以用于設置各類網絡請求的超時時間，其屬性值如表2-5所示。
表2-5 app.json文件中的networkTimeout屬性值
例如：
上述代碼表示重新規定下載文件wx.downloadFile()方法的超時時間為5s。
5）debug屬性
用戶可以在微信web開發者工具中開啟debug模式。在開發者工具的控制臺面板中調試信息以info的形式給出，主要包括Page的注冊、頁面路由、數據更新、事件觸發等內容，可以幫助開發者快速定位一些常見的問題。
2 app.js
app.js文件是小程序的全局邏輯文件，代碼片段如圖2-24所示。
圖2-24 app.js文件的代碼片段
省略app.js中具體的函數內容后將得到以下代碼框架：
由此可見，所有內容都寫在App()函數內部，并且彼此之間用逗號隔開。App()函數的用法詳見3.1.1節“注冊程序”。
3 app.wxss
app.wxss文件是小程序的全局樣式文件，代碼如圖2-25所示。
圖2-25 app.wxss文件的代碼
app.wxss文件用于規定所有頁面都可用的樣式效果，語法格式見3.2.2節“WXSS”。該文件是可選文件，如果沒有全局樣式規定，可以省略不寫。
2.2.3 頁面文件
小程序一般會在根目錄下創建一個pages文件夾用于保存所有頁面文件，每個頁面有自己獨立的二級目錄，如圖2-26所示。
圖2-26 pages文件夾內容
由圖2-26可見，該項目當前由index和logs兩個頁面組成。每一個單獨的頁面基本上由4種文件構成，即wxml、wxss、js和json，說明如下。
? wxml文件：用于構建當前頁面的結構，包括組件、事件等內容，用戶最終看到的頁面效果就是由該文件顯示出來的。
? wxss文件：可選頁面，用于設置當前頁面的樣式效果，該文件規定的樣式會覆蓋app.wxss全局樣式表中產生沖突的規定，但不會影響其他頁面。
? js文件：可選頁面，用于設置當前頁面的邏輯代碼。
? json文件：可選頁面，用來重新設置app.json中window屬性規定的內容，新設置的選項只會顯示在當前頁面上，不會影響其他頁面。
注意：為了方便開發者減少配置項，建議直接在空白頁面文件夾上右擊選擇“新建”→Page，這樣可以一次性創建描述頁面的這4種文件，且它們會具有相同的路徑與文件名。
json文件的可用屬性如表2-6所示。
表2-6 json文件的屬性
例如：
上述代碼表示設置導航欄背景顏色為白色、導航欄標題顏色為黑色，并將導航欄標題更新為“這是新標題”。
注意：頁面的JSON文件只能設置與window相關的配置項，以決定本頁面的窗口表現，所以無須像app.json那樣專門寫window屬性。
2.2.4 其他文件
除了前幾節介紹的常用文件外，小程序還允許用戶自定義路徑和文件名創建一些輔助文件。例如在本章創建的第一個小程序項目中utils文件夾就是用來存放公共JS文件的，如圖2-27所示。
圖2-27 utils文件夾
該文件夾中的util.js保存了一些公共JavaScript代碼，可以被其他頁面的JS文件引用，具體的引用方式見3.1.4節“模塊化”。
除此之外，開發者還可以自定義資源文件夾用于存放其他文件。例如，在根目錄中創建images文件夾用于存放圖片等，這些文件夾可以根據實際需要自行創建。