那么包装是如何实现的呢？

这就涉及到这个编辑器的实现原理和方法了。 它本身也是基于WEB技术体系实现的，nwjs+，什么是nwjs：简单来说就是node+，node为我们提供了本地api能力，又为我们提供了web能力，两者的结合让我们可以使用JS +HTML实现本地应用。

既然有了，上面的封装选项中的功能就很容易实现了。

ES6 到 ES5：引入 -core 节点包

CSS补全：引入and的节点包（and的原理参见这里）

代码压缩：导入node包

注意：.x5 核心用于 . 对 ES6 的支持不佳。 为了兼容，请使用 ES5 语法或导入兼容的库。

打包后的文件夹结构

小程序的封装结构如下：

所有的小程序基本都是敲入上面的结构中

1. .js框架JS库。提供逻辑层基础的API能力

2..js框架的JS库提供了视图层的基本API能力

3..js框架JS库.

4、完成app-.js小程序的配置。包括我们在app.json中传入的所有配置，其中集成了默认的配置类型

5. app-.js 我们自己的JS代码，全部打包到这个文件中

6. page-.html 小程序视图的模板文件，所有页面都是使用这个加载渲染的。并且所有的WXML都被拆解成JS实现并封装在这里

7. 所有页面。 这不是我们之前的wxml文件，它主要处理WXSS转换，并使用js插入到区域中。

小程序架构

微信小程序的框架包括两部分，View视图层和App逻辑层。 View层用于渲染页面结构，View层用于逻辑处理、数据请求、接口调用。 它们在两个进程中执行（两个）。

视图层和逻辑层通过系统层进行通信，逻辑层将数据变化通知视图层，触发视图层的页面更新，视图层将触发的事件通知给逻辑层进行业务处理。

小程序架构图：

当小程序启动时，会从CDN下载小程序的完整包。 通常以数字命名，如：_-。

小程序技术实现

小程序的UI视图和逻辑处理是多个实现的，所有逻辑处理的JS代码都加载到一个中，所谓，整个小程序只有一个。 并且整个生命周期都驻留在内存中，所有视图（wxml和wxss）都是单独承载、调用的。 因此，一个小程序在打开时至少会有两个进程。 从形式上来说，每个视图都是一个独立的过程。 考虑到性能消耗，小程序不同意打开超过5级的页面。 当然，也是为了更好的体验。 。

可以理解为是一个简单的页面。 main功能是负责逻辑处理部分的执行。 底层提供.js文件来提供各种API接口，主要有以下部分：

消息通信封装为（开发环境是.，IOS下的用的是....）

1.日志组件的封装

2、wx对象下的api方法

3. 全局App、Page等全局方法

4.还有AMD模块规范的实现

然后整个页面加载了一堆JS文件，包括小程序配置，上面的.js（模式下有.js）。 剩下的都是我们自己写的js文件，一次性加载完毕。

在开发环境中

1.页面模板：app.nw/app/dist//tpl/.js

2、配置信息直接写入js变量中。 。

3.其他配置

线上环境

上线后，应用部分会被打包成两个文件，分别命名为app-.json和app-.js，然后微信就会打开并加载。 网上的部分应该是微信自己提供的对应模板文件，在压缩包中没有找到。

1..js（底层支持）

2.app-.json（应用程序配置）

3.app-.js（应用程序逻辑）

然后在引擎中执行。

这个可以理解为一个h5页面。 提供UI渲染，底层提供一个.js来提供底层功能。 详情如下所示：

1、消息通信封装为（开发环境是.，IOS下......）

2、日志组件的封装

3、wx对象下的api。这里的api和这里的不太一样。 有些功能和那里的几乎一样，但大部分都是与UI显示相关的方法。

4、小程序组件的实现与注册

5. Diff和UI实现

6.页面事件触发

在此基础上有一个html模板文件，通过该文件加载详细页面。 这个模板主要有一个方法$gwx，主要返回指定页面，并且在打包的时候会提前将所有页面的WXML转换成模板文件，微信已经写了两个工具wcc（WXML to）和wcsc （通过标签将WXSS转换为JS字符串）。

与视图通信

使用消息和机制来实现两者之间的通信，实现方法是统一封装一个对象。 不同环境下封装的接口是不同的。 具体实现的技术如下：

环境

通过。 （使用扩展接口注入一个.js。它封装了方法并实现了它们之间的通信。并且还提供了一个接口，可以通过..的方法直接操作原生方法）

发送消息：.(data, '*');。 // 在数据中指定

接收消息：.('', ); // 消息处理和分发，也支持原生调用nwjs的能力。

我看到里面有一句话。 确认也是通过一个实现来实现的。 实现原理与视图相同，但处理的业务逻辑不同。

'' === b ? (a) : '' === b && (a)

IOS

...NAME.的微信代码中实现了两个消息处理器：

：调用原生能力

：消息分发

通过。 实现，这是微信提供的供JS调用的接口（实现）

：调用原生能力

：消息分发

微信组件

在 .js 中有一个名为 . 它完全实现了小程序中的组件。 看详细的实现方法，思路与w3c web规范类似小程序开发图，但详细实现方式有所不同。 我们使用的所有组件都会提前注册并在替换组装时渲染。

有一个核心方法：

：注册组件的一些基本行为，供组件继承

：注册组件，与我们交互的接口主要是属性和事件

组件触发事件（用它），调用的接口，到。 然后分发到该层指定的Page注册事件处理方法。

总结

小程序底层依然是基于实现。 没有发明和创造新技术、整个框架体系。 相对清晰简单，基于Web规范，保证现有技能的最大价值，只需要了解框架规范就可以使用现有的Web技术进行开发。 易于理解和开发。

MSSM：逻辑和UI完全隔离。 这和现在流行的vue有本质的区别。 小程序和UI的逻辑完全在两个独立的内部执行，而后面的框架仍然在一个内部执行。 ，假设您愿意。 仍然可以直接操作 dom 对象进行 ui 渲染。

组件机制：引入组件机制，但不完全基于组件开发。 与 vue 一样，大部分 UI 仍然在模板中渲染。 组件机制的引入可以更好地规范开发模型，并且更容易升级和维护。

多重限制：同时打开的窗口不超过5个。 包文件不能大于1M，dom对象不能大于1等等，这些都是为了保证更好的体验。

小程序开发原理