淺析微信小程序 App() 和 Page() 函數的內部實現

2018-06-27|HiShop

導讀：在小程序開發中， App(...) 和 Page(...) 是我們最熟悉也是最常用的兩個函數，今天我們就來分析一下它們的內部實現，以及調用時的初始化流程。...

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

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

淺析微信小程序 App() 和 Page() 函數的內部實現

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

淺析微信小程序 App() 和 Page() 函數的內部實現

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

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

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

本文以 1.9.94 基礎庫為例進行分析。 WAService.js 文件的結構如下：

;(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);

我們發現， WAService.js 中定義了 WeixinJSBridge 和 wx 這兩個基礎 API 集合，同時也包含的其他一些框架核心，如 exparser ， __virtualDOM__ ， __appServiceEngine__ 等。其中 __appServiceEngine__ 提供了框架最基本的對外接口，如 App，Page，Component，Behavior 等方法； exparser 提供了框架底層的能力，如實例化組件，數據變化監聽，View 層與邏輯層的交互等； __virtualDOM__ 則起著連接 __appServiceEngine__ 和 exparser 的作用，如對開發者傳入 Page 方法的對象進行格式化再傳入 exparser 的對應方法處理。（此段分析摘自上述文章）

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

App() 和 getApp() 函數

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

function App(options: _AppOptions): void

對于入參 object 對象（_AppOptions）的屬性說明如下：

淺析微信小程序 App() 和 Page() 函數的內部實現

此外，全局的 getApp() 函數可以用來獲取到小程序實例，它的聲明如下：

function getApp(): object

一级片大奶子_色又黄又爽18禁免费视频_热久久久久久久_久久久精品一区二区_日韩av不卡在线播放_精品国内自产拍在线观看视频

淺析微信小程序 App() 和 Page() 函數的內部實現

App() 和 getApp() 函數