筆者由於工作需要，曾經參加過一個微信小程式同 SAP 系統整合的專案，因此從零開始學習了微信小程式的開發知識。這裡透過系列文章把自己所學分享出來，希望對相關學習者有所幫助。

本系列的前一篇文章：[微信小程式開發系列 (一) ：開發環境搭建和微信小程式的檢視設計與開發](https://xie.infoq.cn/article/4ca57a6eead2ab45914366874), 我們介紹了微信小程式的開發環境搭建，並且從一個 Hello World 級別的例子，瞭解了微信小程式 MVC 架構中 View 即檢視層的設計基礎知識。

![](https://img-blog.csdnimg.cn/img_convert/3759b85e4995736d5f3716a4fa6b9114.png)

本文我們首先來學習微信小程式如何單步除錯。

# 微信小程式的單步除錯步驟

在上一篇微信小程式檢視原始碼的講解裡，我們透過逐行講解程式碼的方式，介紹了微信小程式檢視的基本開發思路。但是學習控制器 index.js 的實現，僅僅採取靜態的程式碼走查還不夠，我們需要將微信小程式啟動起來，透過單步除錯的方式逐行講解，透過控制器的呼叫上下文能對微信小程式的控制器實現有更深入的瞭解。

為此我們先要學會微信小程式的除錯方法。

開啟微信開發者工具，點選工具欄的 `偵錯程式`按鈕：

![](https://img-blog.csdnimg.cn/img_convert/39b614e554c0acfcc1b38f1d1fe06a7d.png)

開發者工具右邊的區域現在從上到下一分為二：上面藍色區域還是程式碼編輯頁面，下面紅色區域就是微信小程式的除錯工具。

![](https://img-blog.csdnimg.cn/img_convert/1e970ad4d44a0b185c2820b73f7edbfe.png)

做過前端開發的朋友們，可以一眼就看出這其實就是 Chrome 開發者工具。

在偵錯程式裡開啟我們的控制器 index.js, 單擊行號 3 , 然後行號 3 自動被高亮，說明第 3 行已經成功設定好了一個斷點。

![](https://img-blog.csdnimg.cn/img_convert/5d0c6e95c8fcb9fc4440fde984ddae15.png)

點選 `編譯` 按鈕，我們的小程式自動啟動，設定在控制器裡的斷點就自動觸發了。這樣我們就可以透過單步除錯的方式來學習微信小程式控制器的呼叫上下文了。

![](https://img-blog.csdnimg.cn/img_convert/70088c6b2c1abb581beb3682a595f5b4.png)

微信小程式的偵錯程式在手機上仍然可以開啟。在手機上訪問微信小程式，點選螢幕右下角的 `vConsole` 按鈕。

![](https://img-blog.csdnimg.cn/img_convert/7abff17e365ae8bdc6a37bf502f78ea1.png)

接著整個手機螢幕就被微信小程式的偵錯程式充滿了。這個偵錯程式和電腦上安裝的微信開發者工具相比，僅僅能顯示日誌和執行一些簡單的 JavaScript 操作，但是不能像電腦上那樣，進行 JavaScript 程式碼的除錯。

![](https://img-blog.csdnimg.cn/img_convert/36ec1a93c3796c4e03f2414c5ff4c4e0.png)

我們注意到上圖的 `command...` 輸入框可以輸入一些簡單的 JavaScript 命令，比如console.log("Jerry")

![](https://img-blog.csdnimg.cn/img_convert/cd1bf1df65d6d43312f30ff4cac2a727.png)

然後可以在手機的偵錯程式上看到輸出的 Jerry：

![](https://img-blog.csdnimg.cn/img_convert/3676fd780fa047d2c7650b4fd4dd5d84.png)

System 標籤頁可以看到一些微信小程式效能相關的引數和效能引數，比如：

- MicroMessenger 版本號：6.6.6
- Wechat lib: 庫檔案版本2.0.9
- navigation: 3ms 跳轉時間 3 毫秒
- domComplete(domLoaded): dom 載入總共花費 19 毫秒

![](https://img-blog.csdnimg.cn/img_convert/2c329304df5a49b91876073ea3c99f6a.png)

WXML 標籤頁能顯示當前渲染好的檢視的明細：

![](https://img-blog.csdnimg.cn/img_convert/f26e0c115cb662f02dd5d3b0b0dcfc9f.png)

大家熟悉了微信小程式的偵錯程式，就能繼續進行微信小程式控制器的學習了。

# 微信小程式的控制器實現

嚴格意義上說，按照微信小程式官方文件裡介紹的，微信小程式實際採取的是 React 和 Vue 的 MVMM 的設計思路，MVVM 是 Model-View-ViewModel 的簡寫，本質上是 MVC 模式的改進版。MVVM 架構中，View 的狀態和行為被抽象化，從而將檢視 UI 和業務邏輯分開。

簡單來說就是不要再讓 JavaScript 直接操控 DOM，JavaScript 只需要管理狀態，然後再透過一種模板語法來描述狀態和介面結構的關係即可。

下面我們來逐行分析 index.js 的程式碼：

```javascript
//獲取應用例項
const app = getApp();
```
getApp是微信框架的方法，返回當前小程式的應用例項。通常情況下這是微信小程式控制器執行的第一行程式碼：

![](https://img-blog.csdnimg.cn/img_convert/f7ef88f7a4ad7c1590e0aaac70173b8f.png)

這個應用例項的建立是在我們小程式控制器的訪問範圍之外由微信框架建立的，然後直接在`getApp` 函式里返回建立好的 `app` 例項：

![](https://img-blog.csdnimg.cn/img_convert/135be3249ac2ce6aaad206c94674218b.png)

為什麼這個 `app` 例項如此重要，以至於放到控制器的第一行程式碼來建立呢？我們直接在偵錯程式裡輸入 `app` 然後回車，能看到這個 `app` 物件裡包含了 `globalData` 這個屬性和很多有用的方法。

![](https://img-blog.csdnimg.cn/img_convert/b3cd1f3a5a425d2fa1f39540d8f7763a.png)

有了 app 例項後，下一步需要建立的就是 Page 例項了。這個例項代表當前小程式頁面，透過建構函式 Page 進行建立。

我們同樣可以在微信小程式偵錯程式裡輸入 Page 然後回車檢視這個建構函式的原始碼，

![](https://img-blog.csdnimg.cn/img_convert/e85d57869e11696198b5e6ab65cb4055.png)

或者直接單步除錯進去學習。下圖就是 Page 建構函式單步執行的情況，輸入引數 e 為一個Json 物件：

![](https://img-blog.csdnimg.cn/img_convert/c8329a0536a8799425c0284956a67874.png)

這個輸入引數 e 包含的內容有：

- 我們控制器 index.js 裡實現的一個 json 物件，名稱為 data（作為當前微信小程式頁面的資料模型，即 MVC 中的 M），如下圖紅色下劃線所示。

- 我們控制器 index.js 裡實現的三個 JavaScript 函式，用於響應小程式上使用者點選事件。

![](https://img-blog.csdnimg.cn/img_convert/499840d38bae940fa544df9e0065494a.png)

總結一下，任何微信小程式，其控制器的邏輯只有兩步：

- 呼叫微信小程式框架提供的標準函式 `getApp`， 獲得一個小程式例項。
- 呼叫微信小程式頁面建構函式 `Page`，初始化頁面例項。我們在控制器內主要的編碼邏輯，主要集中在傳入這個 Page 建構函式的輸入引數，即一個 JSON 物件。

而這個 JSON 物件包含的屬性也只有兩類：

- 第一類是另一個 JSON 物件，作為 MVC 中的 M，即資料模型。這個 JSON 資料模型的欄位被繫結到微信小程式檢視的某個 UI 元素，比如 Text, Image 的對應屬性，這樣就自動把資料模型裡的欄位顯示到 UI 上了。

- 第二類是我們自己開發的 JavaScript 函式，用於響應微信小程式的使用者輸入，比如檢視上的按鈕點選事件等等。

本系列的下一篇文章會詳細介紹如何用 JavaScript 函式響應微信小程式的使用者點選事件。

# 總結

單步除錯技術是程式設計師學習幾乎任何一門技術時都必須掌握的基本技能。本文首先介紹了在微信開發者工具裡進行微信小程式單步除錯的步驟，接著繼本教程前一系列學習了微信小程式檢視設計後，繼續學習微信小程式的控制器實現。

本教程前一步驟的文章：[微信小程式開發系列 (一) ：開發環境搭建和微信小程式的檢視設計與開發](https://xie.infoq.cn/article/4ca57a6eead2ab45914366874)。

微信小程式開發系列 (二) ：微信小程式的單步除錯和控制器實現步驟概述

相關文章