微信小程序開發系列 (二) ：微信小程序的單步調試和控制器實現步驟概述详情 - 微信,微信小程序,微信開發,微信公眾平台,sap 註銷日志

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

本系列的前一篇文章：微信小程序開發系列 (一) ：開發環境搭建和微信小程序的視圖設計與開發, 我們介紹了微信小程序的開發環境搭建，並且從一個 Hello World 級別的例子，瞭解了微信小程序 MVC 架構中 View 即視圖層的設計基礎知識。

本文我們首先來學習微信小程序如何單步調試。

微信小程序的單步調試步驟

在上一篇微信小程序視圖源代碼的講解裏，我們通過逐行講解代碼的方式，介紹了微信小程序視圖的基本開發思路。但是學習控制器 index.js 的實現，僅僅採取靜態的代碼走查還不夠，我們需要將微信小程序啓動起來，通過單步調試的方式逐行講解，通過控制器的調用上下文能對微信小程序的控制器實現有更深入的瞭解。

為此我們先要學會微信小程序的調試方法。

打開微信開發者工具，點擊工具欄的 調試器按鈕：

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

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

在調試器裏打開我們的控制器 index.js, 單擊行號 3 , 然後行號 3 自動被高亮，説明第 3 行已經成功設置好了一個斷點。

點擊 編譯 按鈕，我們的小程序自動啓動，設置在控制器裏的斷點就自動觸發了。這樣我們就可以通過單步調試的方式來學習微信小程序控制器的調用上下文了。

微信小程序的調試器在手機上仍然可以打開。在手機上訪問微信小程序，點擊屏幕右下角的 vConsole 按鈕。

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

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

然後可以在手機的調試器上看到輸出的 Jerry：

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

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

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

大家熟悉了微信小程序的調試器，就能繼續進行微信小程序控制器的學習了。

微信小程序的控制器實現

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

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

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

//獲取應用實例
const app = getApp();

getApp是微信框架的方法，返回當前小程序的應用實例。通常情況下這是微信小程序控制器執行的第一行代碼：

這個應用實例的創建是在我們小程序控制器的訪問範圍之外由微信框架創建的，然後直接在getApp 函數裏返回創建好的 app 實例：

為什麼這個 app 實例如此重要，以至於放到控制器的第一行代碼來創建呢？我們直接在調試器裏輸入 app 然後回車，能看到這個 app 對象裏包含了 globalData 這個屬性和很多有用的方法。

有了 app 實例後，下一步需要創建的就是 Page 實例了。這個實例代表當前小程序頁面，通過構造函數 Page 進行創建。

我們同樣可以在微信小程序調試器裏輸入 Page 然後回車查看這個構造函數的源代碼，

或者直接單步調試進去學習。下圖就是 Page 構造函數單步執行的情況，輸入參數 e 為一個Json 對象：

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

我們控制器 index.js 裏實現的一個 json 對象，名稱為 data（作為當前微信小程序頁面的數據模型，即 MVC 中的 M），如下圖紅色下劃線所示。
我們控制器 index.js 裏實現的三個 JavaScript 函數，用於響應小程序上用户點擊事件。

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

調用微信小程序框架提供的標準函數 getApp，獲得一個小程序實例。
調用微信小程序頁面構造函數 Page，初始化頁面實例。我們在控制器內主要的編碼邏輯，主要集中在傳入這個 Page 構造函數的輸入參數，即一個 JSON 對象。

而這個 JSON 對象包含的屬性也只有兩類：

第一類是另一個 JSON 對象，作為 MVC 中的 M，即數據模型。這個 JSON 數據模型的字段被綁定到微信小程序視圖的某個 UI 元素，比如 Text, Image 的對應屬性，這樣就自動把數據模型裏的字段顯示到 UI 上了。
第二類是我們自己開發的 JavaScript 函數，用於響應微信小程序的用户輸入，比如視圖上的按鈕點擊事件等等。

本系列的下一篇文章會詳細介紹如何用 JavaScript 函數響應微信小程序的用户點擊事件。