浅析微信小程序 App() 和 Page() 函数的内部实现

—— 2018 ——

06/27

00:00

来源：

作者：未知

栏目：小程序开发

2018/6/27 0:00:00 来源：不详作者：未知

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

【本站声明】
1、本站文章中所选用的图片及文字来源于网络以及用户投稿，由于未联系到知识产权人或未发现有关知识产权的登记，如有知识产权人并不愿意我们使用，如果有侵权请立即联系。
2、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责，仅系客观性描述，如您需要了解该类商品/服务详细的资讯，请您直接与该类商品/服务的提供者联系。

KESION 科汛软件
KESION 科汛软件是国内领先的在线教育软件及私域社交电商软件服务提供商，长期专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。
公司核心产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化独立部署品牌网校和在线教育咨询等。
KESION 不断通过技术创新，提供产品和服务，助力企业向数字化转型，通过科技驱动商业革新，让商业变得更智慧！

▼点击进入科汛官网了解更多

热门标签

微信小程序 SaaS

上/下篇

微信小程序封装get和post操作流程

开发小程序时候，根据小程序的API，每发一次请求都要写一大串代码，而且都是重复的，所以可以封装一下，方便开发。 ...

微信小程序开发小程序SaaS 2018/6/27 0:00:00
京东小程序怎么装修（适用移动端）

618京东购物节，京东小程序占据了京东很大一部分下单量，那么如果要开发一个京东小程序商城，需要如何装修店铺，以下适用于移动端的装修导航。...

运营SaaS 2018/6/26 0:00:00