微信小程序文檔框架部分導讀

項目結構

小程序包含一個描述整體程序的 app 和多個描述各自頁面的 page，一個典型的小程序項目結構如下：

├── app.js
├── app.json
├── app.wxss
└── page
    ├── index.js
    ├── index.wxml
    ├── index.json
    └── index.wxss

各文件說明如下：

文件	必填	作用
app.js	是	小程序邏輯
app.json	是	小程序公共設置
app.wxss	否	小程序公共樣式表
index.js	是	頁面邏輯
index.wxml	是	頁面結構
index.wxss	否	頁面樣式表
index.json	否	頁面配置

如果按照功能進行分類的話，這些文件可以分爲三類：

配置文件

包括各“.json”文件，它包括一些配置內容。其中頁面.json不是必須的（你的頁面配置可以直接寫在邏輯層，不需要單獨抽離出一個文件）；而app.json1是必須的，它決定頁面文件（page）的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。

邏輯層

微信小程序邏輯層結構如下：

圖中：

• app.js指定小程序的生命週期函數、全局數據等2。
• page.js（page指某個頁面名稱）指定頁面的生命週期、事件處理函數、頁面數據等3（此js會與視圖層進行數據綁定）。
• 其他模塊化js指定公共的邏輯

注意：

• 這些js文件可以通過微信小程序的“模塊化”接口進行代碼共享4
• 微信小程序框架通過場景值機制5通知app.js小程序的進入方式
• 微信小程序框架通過路由機制6管理頁面切換時頁面生命週期變化
• js文件可以調用微信原生 API7

小程序開發框架的邏輯層由 JavaScript 編寫。邏輯層將數據進行處理後發送給視圖層，同時接受視圖層的事件反饋。在 JavaScript 的基礎上，微信小程序框架有一些修改：

• 增加 App 和 Page 方法，進行程序和頁面的註冊。
• 增加 getApp 和 getCurrentPages 方法，分別用來獲取 App 實例和當前頁面棧。
• 提供豐富的 API，如微信用戶數據，掃一掃，支付等微信特有能力。
• 每個頁面有獨立的作用域，並提供模塊化能力。
• 由於框架並非運行在瀏覽器中，所以 JavaScript 在 web 中一些能力都無法使用，如 document，window 等。
• 開發者寫的所有代碼最終將會打包成一份 JavaScript，並在小程序啓動的時候運行，直到小程序銷燬。類似 ServiceWorker，所以邏輯層也稱之爲 App Service。

視圖層

框架的視圖層由 WXML 與 WXSS 編寫，將邏輯層的數據反映成視圖，同時將視圖層的事件發送給邏輯層。

其包括：

• WXML(WeiXin Markup language) 用於描述頁面的結構8。
• WXS(WeiXin Script) 是小程序的一套腳本語言，結合 WXML，可以構建出頁面的結構9。
• WXSS(WeiXin Style Sheet) 用於描述頁面的樣式10。
• 組件(Component)是視圖的基本組成單元11。

其他

另外，微信小程序框架支持自定義組件12、插件13、分包加載14等個性化需求，具體信息請看原始文檔。

微信小程序提供一個任務異步處理機制：worker機制15，具體信息請看原始文檔。

---

1. app.json的具體信息請看微信小程序app.json相關 ↩
2. app.js最重要的部分是App()函數，具體信息請看微信小程序app函數相關 ↩
3. page.js最重要的部分是Page()函數，具體信息請看微信小程序page函數相關 ↩
4. 微信小程序框架模塊化接口具體信息請看微信小程序數據、函數共享 ↩
5. 場景值機制的具體信息請看場景值 ↩
6. 路由機制的具體信息請看微信公衆號頁面路由 ↩
7. 微信原生API具體信息請看API ↩
8. WXML的具體信息請看微信小程序WXML ↩
9. WXS的具體信息請看WXS ↩
10. WXSS的具體信息請看WXSS ↩
11. 組件的具體信息請看組件 ↩
12. 自定義組件 ↩
13. 插件 ↩
14. 分包加載 ↩
15. worker機制 ↩