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

发布时间:2023-08-04 15:30:57 作者:whs-72 阅读量:6172

在小程序开发中, App(...) 和 Page(...) 是我们最熟悉也是最常用的两个函数,今天我们就来分析一下它们的内部实现,以及调用时的初始化流程。

在微信开发者工具中,编译运行你的小程序项目,然后打开控制台,输入 document 并回车,就可以看到小程序运行时,WebView 加载的完整的 page-frame.html ,如下图:

通过分析这个 HTML 文件,我们可以得到小程序的启动执行流程大致如下:

此图来自上述文章,我们这里不再重复赘述这些流程,下面我们来看一下其中的 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)的属性说明如下:

此外,全局的 getApp() 函数可以用来获取到小程序实例,它的声明如下:

function getApp(): object

您可能感兴趣: 小程序开发
上一篇:京东小程序怎么装修(适用移动端) 下一篇:微信小程序封装get和post操作流程
***本网站图片,文字之类版权申明,因为网站可以由注册用户自行上传图片或文字,本网站无法鉴别所上传图片或文字的知识版权,如果侵犯,请及时通知我们,本网站将在第一时间及时删除。

我要评论

网友评论


评论时间:2024-05-24 09:00:03

6.网一个完整的app开发需要哪些技术 络营销南宁良庆区app制作

回复

评论时间:2023-12-08 01:00:03

一、选择合适的程序在这里我们要先了解一小程序转换app 个概念-自学麻将app开发多少钱 概念-自学

回复

评论时间:2023-12-05 10:27:04

同时,文章从三个层面阐述了济南APP研app外包平台找哪家好 发的必要性,即app制作平台收费标准 个层面阐述了济南APP研发的必要性,即“互联网+政务”时代到来带来的机遇,“智慧城市”背景下新媒体快速成长给济南APP行业带来的挑战

回复
秒制作
Catfish(鲶鱼) Blog V 4.7.3