微信小程式開發系列教程

微信小程式開發系列一：微信小程式的申請和開發環境的搭建

微信小程式開發系列二：微信小程式的檢視設計

微信小程式開發系列三：微信小程式的除錯方法

這個教程的前兩篇文章，介紹瞭如何用下圖所示的微信開發者工具自動生成一個Hello World的微信小程式，並講解了這個自動生成的微信小程式的檢視開發原理。

本文繼續介紹這個微信小程式的控制器index.js的實現, 即MVC設計理念的C-Controller-控制器。不過嚴格意義上說，按照微信小程式官方文件裡介紹的，微信小程式實際採取的是React和Vue的MVMM的設計思路，提倡把渲染和邏輯分離。簡單來說就是不要再讓 JS 直接操控 DOM，JS只需要管理狀態，然後再透過一種模板語法來描述狀態和介面結構的關係即可。

下面我們來逐行分析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函式響應微信小程式的使用者點選事件。

要獲取更多Jerry的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼: