微信小程序開發(fā)系列教程

微信小程序開發(fā)系列一：微信小程序的申請(qǐng)和開發(fā)環(huán)境的搭建

微信小程序開發(fā)系列二：微信小程序的視圖設(shè)計(jì)

微信小程序開發(fā)系列三：微信小程序的調(diào)試方法

這個(gè)教程的前兩篇文章，介紹了如何用下圖所示的微信開發(fā)者工具自動(dòng)生成一個(gè)Hello World的微信小程序，并講解了這個(gè)自動(dòng)生成的微信小程序的視圖開發(fā)原理。

本文繼續(xù)介紹這個(gè)微信小程序的控制器index.js的實(shí)現(xiàn), 即MVC設(shè)計(jì)理念的C-Controller-控制器。不過嚴(yán)格意義上說，按照微信小程序官方文檔里介紹的，微信小程序?qū)嶋H采取的是React和Vue的MVMM的設(shè)計(jì)思路，提倡把渲染和邏輯分離。簡單來說就是不要再讓 JS 直接操控 DOM，JS只需要管理狀態(tài)，然后再通過一種模板語法來描述狀態(tài)和界面結(jié)構(gòu)的關(guān)系即可。

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

//獲取應(yīng)用實(shí)例

const app = getApp()

getApp是微信框架的方法，返回當(dāng)前小程序的應(yīng)用實(shí)例。通常情況下這是微信小程序控制器執(zhí)行的第一行代碼：

這個(gè)應(yīng)用實(shí)例的創(chuàng)建是在我們小程序控制器的訪問范圍之外由微信框架創(chuàng)建的，然后直接在getApp函數(shù)里返回創(chuàng)建好的app實(shí)例：

為什么這個(gè)app實(shí)例如此重要，以至于放到控制器的第一行代碼來創(chuàng)建呢？我們直接在調(diào)試器里輸入app然后回車，能看到這個(gè)app對(duì)象里包含了globalData這個(gè)屬性和很多有用的方法。

有了app實(shí)例后，下一步需要?jiǎng)?chuàng)建的就是Page實(shí)例了。這個(gè)實(shí)例代表當(dāng)前小程序頁面，通過構(gòu)造函數(shù)Page進(jìn)行創(chuàng)建。

我們同樣可以在微信小程序調(diào)試器里輸入Page然后回車查看這個(gè)構(gòu)造函數(shù)的源代碼，

或者直接單步調(diào)試進(jìn)去學(xué)習(xí)。下圖就是Page構(gòu)造函數(shù)單步執(zhí)行的情況，輸入?yún)?shù)e為一個(gè)Json對(duì)象，

這個(gè)輸入?yún)?shù)e包含的內(nèi)容有：

我們控制器index.js里實(shí)現(xiàn)的一個(gè)json對(duì)象，名稱為data（作為當(dāng)前微信小程序頁面的數(shù)據(jù)模型，即MVC中的M），如下圖紅色下劃線所示。

我們控制器index.js里實(shí)現(xiàn)的三個(gè)JavaScript函數(shù)，用于響應(yīng)小程序上用戶點(diǎn)擊事件。

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

• 調(diào)用微信小程序框架提供的標(biāo)準(zhǔn)函數(shù)getApp， 獲得一個(gè)小程序?qū)嵗?/p>

• 調(diào)用微信小程序頁面構(gòu)造函數(shù)Page，初始化頁面實(shí)例。我們?cè)诳刂破鲀?nèi)主要的編碼邏輯，主要集中在傳入這個(gè)Page構(gòu)造函數(shù)的輸入?yún)?shù)，即一個(gè)json對(duì)象。

而這個(gè)json對(duì)象包含的屬性也只有兩類：

• 第一類是另一個(gè)json對(duì)象，作為MVC中的M，即數(shù)據(jù)模型。這個(gè)json數(shù)據(jù)模型的字段被綁定到微信小程序視圖的某個(gè)UI元素，比如Text, Image的對(duì)應(yīng)屬性，這樣就自動(dòng)把數(shù)據(jù)模型里的字段顯示到UI上了。

• 第二類是我們自己開發(fā)的JavaScript函數(shù)，用于響應(yīng)微信小程序的用戶輸入，比如視圖上的按鈕點(diǎn)擊事件等等。

這個(gè)系列的下一篇文章會(huì)詳細(xì)介紹如何用JavaScript函數(shù)響應(yīng)微信小程序的用戶點(diǎn)擊事件。

要獲取更多Jerry的原創(chuàng)技術(shù)文章，請(qǐng)關(guān)注公眾號(hào)"汪子熙"