淺析微信小程序 App() 和 Page() 函數(shù)的內(nèi)部實現(xiàn)

在小程序開發(fā)中， App(...) 和 Page(...) 是我們最熟悉也是最常用的兩個函數(shù)，今天我們就來分析一下它們的內(nèi)部實現(xiàn)，以及調(diào)用時的初始化流程。

在微信開發(fā)者工具中，編譯運行你的小程序項目，然后打開控制臺，輸入 document 并回車，就可以看到小程序運行時，WebView 加載的完整的 page-frame.html ，如下圖：

通過分析這個 HTML 文件，我們可以得到小程序的啟動執(zhí)行流程大致如下：

此圖來自上述文章，我們這里不再重復贅述這些流程，下面我們來看一下其中的 App() 和 Page() 的細節(jié)。這兩個函數(shù)在小程序框架 WAService.js 中定義，并在 app.js 和每個頁面的 page.js 中進行調(diào)用實例化。

在微信開發(fā)者工具的控制臺中執(zhí)行 openVendor() 方法，可以打開小程序框架所在目錄，如下：

/Users/用戶名/Library/Application Support/微信web開發(fā)者工具/WeappVendor/基礎(chǔ)庫版本號目錄

本文以 1.9.94 基礎(chǔ)庫為例進行分析。 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 這兩個基礎(chǔ) API 集合，同時也包含的其他一些框架核心，如 exparser ， __virtualDOM__ ， __appServiceEngine__ 等。其中 __appServiceEngine__ 提供了框架最基本的對外接口，如 App，Page，Component，Behavior 等方法； exparser 提供了框架底層的能力，如實例化組件，數(shù)據(jù)變化監(jiān)聽，View 層與邏輯層的交互等； __virtualDOM__ 則起著連接 __appServiceEngine__ 和 exparser 的作用，如對開發(fā)者傳入 Page 方法的對象進行格式化再傳入 exparser 的對應(yīng)方法處理。（此段分析摘自上述文章）

由上可知，本文要分析的全局函數(shù) App() 和 Page() 是對 WAService.js 中定義的 __appServiceEngine__ 對象同名方法的引用。下面我們簡要分析一下它們的內(nèi)部實現(xiàn)和初始化流程。

App() 和 getApp() 函數(shù)

根據(jù)微信小程序 開發(fā)文檔 ， App() 函數(shù)用來注冊一個小程序，接收一個 object 對象參數(shù)，其指定小程序的生命周期函數(shù)等。我們從微信開發(fā)者工具的函數(shù)提示可以知道， App() 函數(shù)的聲明如下：

function App(options: _AppOptions): void

對于入?yún)?nbsp;object 對象（_AppOptions）的屬性說明如下：

此外，全局的 getApp() 函數(shù)可以用來獲取到小程序?qū)嵗?，它的聲明如下?/p>

function getApp(): object