淺析微信小程序 App() 和 Page() 函數(shù)的內(nèi)部實(shí)現(xiàn)
在小程序開(kāi)發(fā)中, App(...) 和 Page(...) 是我們最熟悉也是最常用的兩個(gè)函數(shù),今天我們就來(lái)分析一下它們的內(nèi)部實(shí)現(xiàn),以及調(diào)用時(shí)的初始化流程。
在微信開(kāi)發(fā)者工具中,編譯運(yùn)行你的小程序項(xiàng)目,然后打開(kāi)控制臺(tái),輸入 document 并回車(chē),就可以看到小程序運(yùn)行時(shí),WebView 加載的完整的 page-frame.html ,如下圖:
通過(guò)分析這個(gè) HTML 文件,我們可以得到小程序的啟動(dòng)執(zhí)行流程大致如下:
此圖來(lái)自上述文章,我們這里不再重復(fù)贅述這些流程,下面我們來(lái)看一下其中的 App() 和 Page() 的細(xì)節(jié)。這兩個(gè)函數(shù)在小程序框架 WAService.js 中定義,并在 app.js 和每個(gè)頁(yè)面的 page.js 中進(jìn)行調(diào)用實(shí)例化。
在微信開(kāi)發(fā)者工具的控制臺(tái)中執(zhí)行 openVendor() 方法,可以打開(kāi)小程序框架所在目錄,如下:
/Users/用戶(hù)名/Library/Application Support/微信web開(kāi)發(fā)者工具/WeappVendor/基礎(chǔ)庫(kù)版本號(hào)目錄
本文以 1.9.94 基礎(chǔ)庫(kù)為例進(jìn)行分析。 WAService.js 文件的結(jié)構(gòu)如下:
;(function(global) { // WeixinJSBridge 的定義和加載 // NativeBuffer 的定義和加載 // wxConsole 的定義和加載 // WeixinWorker 的定義和加載 // Reporter 的定義和加載 // __appServiceSDK__ 的定義和加載 wx = __appServiceSDK__.wx, // exparser 的定義和加載 // __virtualDOM__ 的定義和加載 // __appServiceEngine__ 的定義和加載 Page = __appServiceEngine__.Page, Component = __appServiceEngine__.Component, Behavior = __appServiceEngine__.Behavior, __webview_engine_version__ = .02, App = __appServiceEngine__.App, getApp = __appServiceEngine__.getApp, getCurrentPages = __appServiceEngine__.getCurrentPages, __createPluginGlobal = __appServiceEngine__.__createPluginGlobal, // __wxModule__ 的定義和加載 definePlugin = __wxModule__.definePlugin, requirePlugin = __wxModule__.requirePlugin; // define 方法的定義 // require 方法的定義 global.App = App; global.Page = Page; global.Component = Component; global.Behavior = Behavior; global.__webview_engine_version__ = 0.02; global.getApp = getApp; global.getCurrentPages = getCurrentPages; global.wx = wx; global.definePlugin = __wxModule__.definePlugin; global.requirePlugin = __wxModule__.requirePlugin; })(this);
我們發(fā)現(xiàn), WAService.js 中定義了 WeixinJSBridge 和 wx 這兩個(gè)基礎(chǔ) API 集合,同時(shí)也包含的其他一些框架核心,如 exparser , __virtualDOM__ , __appServiceEngine__ 等。其中 __appServiceEngine__ 提供了框架最基本的對(duì)外接口,如 App,Page,Component,Behavior 等方法; exparser 提供了框架底層的能力,如實(shí)例化組件,數(shù)據(jù)變化監(jiān)聽(tīng),View 層與邏輯層的交互等; __virtualDOM__ 則起著連接 __appServiceEngine__ 和 exparser 的作用,如對(duì)開(kāi)發(fā)者傳入 Page 方法的對(duì)象進(jìn)行格式化再傳入 exparser 的對(duì)應(yīng)方法處理。(此段分析摘自上述文章)
由上可知,本文要分析的全局函數(shù) App() 和 Page() 是對(duì) WAService.js 中定義的 __appServiceEngine__ 對(duì)象同名方法的引用。下面我們簡(jiǎn)要分析一下它們的內(nèi)部實(shí)現(xiàn)和初始化流程。
App() 和 getApp() 函數(shù)
根據(jù)微信小程序 開(kāi)發(fā)文檔 , App() 函數(shù)用來(lái)注冊(cè)一個(gè)小程序,接收一個(gè) object 對(duì)象參數(shù),其指定小程序的生命周期函數(shù)等。我們從微信開(kāi)發(fā)者工具的函數(shù)提示可以知道, App() 函數(shù)的聲明如下:
function App(options: _AppOptions): void
對(duì)于入?yún)?nbsp;object 對(duì)象(_AppOptions)的屬性說(shuō)明如下:
此外,全局的 getApp() 函數(shù)可以用來(lái)獲取到小程序?qū)嵗?,它的聲明如下?/p>
function getApp(): object