本文將對微信小程序源文件結構及含義進行詳細講解，部分描述直接轉載於官方文檔，若有不明問題，可繼續查看小程序官方文檔，傳送門>>>
下面是基本的目錄和文件結構：
|--app.js
|--app.json
|--app.wxss
|--pages
|--index
|--index.js
|--index.wxml
|--index.wxss
|--index.json
|--project.config.json類型文件說明：
* .json 配置文件
* .wxml 模板文件
* .js javascript邏輯文件
* .wxss 樣式文件
以下將對每種類型文件進行詳細說明。
配置文件
小程序中存在三類配置文件，分別爲：
1. 小程序配置：根目錄下的app.json
2. 工具配置：根目錄下的project.config.json文件
3. 頁面配置：pages/index/目錄(具體頁面目錄)下的index.json
小程序配置文件app.json
app.json 是對當前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現、網絡超時時間、底部 tab 等。【摘自官方文檔】
app.json
{
"pages": [
"pages/index/index",
"pages/reward/reward"
],
"window": {
"navigationBarTitleText": "猜猜你的真實年齡",
"navigationBarBackgroundColor": "#000000",
"navigationBarTextStyle": "white",
"navigationStyle": "default",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false
},
"tabBar": {
"color": "#9ca0a3",
"selectedColor": "#00ae66",
"list": [
{
"pagePath": "pages/index/index",
"text": "首頁",
"iconPath": "asset/icon/home.png",
"selectedIconPath": "asset/icon/home_selected.png"
},
{
"pagePath": "pages/reward/reward",
"text": "打賞",
"iconPath": "asset/icon/reward.png",
"selectedIconPath": "asset/icon/reward_selected.png"
}
]
},
"networkTimeout": {
"request": 5000,
"connectSocket": 5000,
"downloadFile": 5000,
"uploadFile": 5000
},
"debug": true
}pages
接受一個數組，每一項都是字符串，來指定小程序由哪些頁面組成。每一項代表對應頁面的【路徑+文件名】信息，數組的第一項代表小程序的初始頁面。小程序中新增/減少頁面，都需要對 pages 數組進行修改。
文件名不需要寫文件後綴，因爲框架會自動去尋找路徑下 .json, .js, .wxml, .wxss 四個文件進行整合。
window
主要用於設置wxss中無法自定義的樣式，例如修改小程序的狀態欄、導航條、標題、窗口背景色等。
tabBar
設置小程序底部(或頂部)的tab欄的展示和切換時所展示的頁面。
networkTimeout
設置各種網絡請求的超時時間。
debug
設置是否開啓調試模式。
頁面配置index.json
每一個小程序頁面也可以使用.json文件來對項目app.json 中的 window 項進行配置，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。
項目配置文件 project.config.json
小程序開發者工具在每個項目的根目錄都會生成一個 project.config.json，你在工具上做的任何配置都會寫入到這個文件，當你重新安裝工具或者換電腦工作時，你只要載入同一個項目的代碼包，開發者工具就自動會幫你恢復到當時你開發項目時的個性化配置，其中會包括編輯器的顏色、代碼上傳時自動壓縮等等一系列選項。
詳細參數請參考官方文檔
wxml 模板
用來定義小程序頁面的結構，在wxml中我們可以：
- 使用小程序框架提供的豐富的web組件，提高開發效率；
- 支持wx:if流程控制，數據綁定等特性；
- DOM渲染和頁面邏輯分離(類似Vue);
WXSS 樣式
WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些擴充和修改。
- 新增了尺寸單位。在寫 CSS 樣式時，開發者需要考慮到手機設備的屏幕會有不同的寬度和設備像素比，採用一些技巧來換算一些像素單位。WXSS 在底層支持新的尺寸單位 rpx ，開發者可以免去換算的煩惱，只要交給小程序底層來換算即可，由於換算採用的浮點數運算，所以運算結果會和預期結果有一點點偏差。
- 提供了全局的樣式和局部樣式。和前邊 app.json, page.json 的概念相同，你可以寫一個 app.wxss 作爲全局樣式，會作用於當前小程序的所有頁面，局部頁面樣式 page.wxss 僅對當前頁面生效。
- 此外 WXSS 僅支持部分 CSS 選擇器。
JS 邏輯文件
- 頁面交互邏輯；
- API調用；
本章結尾
小程序基礎知識本系列文章只介紹這麼多，接下來將進行項目實戰，敬請關注！
更多內容請大家移步官方文檔：
下期預告
下篇文章將進行小程序實際開發講解，敬請期待。
微信交流羣
微信羣二維碼會定時失效，爲了方便更新，將入羣二維碼放到了Github上 傳送門>>>
