淺析微信小程序 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