微信小程序中控制器的初始化邏輯是什么

微信小程序中控制器的初始化邏輯是什么，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

下面介紹微信小程序的控制器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函數，用于響應微信小程序的用戶輸入，比如視圖上的按鈕點擊事件等等。

看完上述內容，你們掌握微信小程序中控制器的初始化邏輯是什么的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！