微信小程序開發系列四：微信小程序之控制器的初始化邏輯

微信小程序開發系列教程

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

微信小程序開發系列二：微信小程序的視圖設計

微信小程序開發系列三：微信小程序的調試方法

這個教程的前兩篇文章，介紹瞭如何用下圖所示的微信開發者工具自動生成一個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的原創技術文章，請關注公衆號"汪子熙"或者掃描下面二維碼: