微信小程序開發系列教程

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

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

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

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

總結

以上是生活随笔為你收集整理的微信小程序开发系列四：微信小程序之控制器的初始化逻辑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。