主要介绍微信者工具如何编译小程序代码，如何实现小程序模拟器，如何调试小程序。
1 简介
虽然小程序在语言层面与传统网页没有太大区别：它们使用脚本语言编写逻辑代码，使用类似于的描述页面结构，使用类似于的描述节点的样式。但是由于小程序渲染的运行机制以及与传统网页的逻辑分离等原因，无法使用传统的调试工具。因此，我们使用了小程序生态的一站式——微信者工具。者可以使用微信者工具完成小程序的代码、编译运行、界面和逻辑调试、真机预览、发布版本提交等功能。
图1微信者工具
微信者工具基于.，使用.，系统实现底层模块，使用，等前端技术框架搭建用户交互层，实现同一套跨 和平台使用的代码。
图2微信者工具底层框架
2 代码编译
微信者工具和微信客户端不能直接运行小程序的源码，所以需要编译小程序的源码。代码编译过程包括本地预处理、本地编译和服务器编译。为了快速预览，微信者工具模拟器运行的代码只经过本地预处理和本地编译，没有服务器编译过程，而微信客户端运行的代码还要经过服务器编译。
1 编译
()是框架设计的一套标记语言，用来构造页面的结构。小程序渲染层的运行环境为一，无法直接理解标签，需要编译。
微信工具内置二进制编译器，接受一列代码文件，处理后输出代码。这段代码就是每个页面的结构生成函数。
图3 编译过程
编译过程将所有 代码变成一个函数，预先注入 .运行时确定页面路径后，将路径作为参数传递给该函数，即可获取页面的结构体生成函数。页面结构生成函数接受页面数据，输出一段描述页面结构的，最后通过小程序组件系统生成对应的页面。 。
清单1如何使用页面结构生成函数
//$ 是编译后得到的函数
//根据页面路径获取页面结构生成函数
= $('.')
//页面结构生成函数接受页面数据，得到描述页面结构的
= ({
: ''
})
/** == {
: ''，
: [{
: '',
: ['']
}]
}**/
//小程序组件系统在虚拟树对比后将结果渲染到页面上
.()
上传代码时，微信者工具直接将本地代码文件提交给后端，后端编译。后端编译器和者工具本地内置的编译器是由同一组代码生成的。
2 编译
( ) 是一种样式语言，用于确定应如何显示 组件。为了适应广大前端者，具备了的大部分特性。同时，为了更适合微信小程序的，对进行了扩展和修改。与 相比， 扩展的一些特性，包括 大小单位和样式导入语法，没有被直接理解。
微信者工具内置二进制编译器，接受文件列表，文件间引用关系，预处理，输出样式信息数组，如图4所示，每个文件 对应于这个数组中的一个项目。
图4 的编译过程
在运行时，根据当前屏幕宽度，计算1对应多少像素单元，然后将样式信息数组转换成最终样式添加到页面中。
由于微信客户端样式的兼容性问题小程序谁，为方便者，微信者工具提供了上传代码时样式自动补全的功能，用于预处理文件并自动添加样式前缀。
3 编译
微信客户端在运行小程序的逻辑层时只需要加载一个文件（我们称之为-.），而小程序框架允许者将代码写在不同的文件中，所以在代码之前上传时，微信者工具会对者的 文件做一些预处理，包括 6 到 5 以及代码压缩（者可以选择关闭预处理操作），并在服务器编译过程中将每个 文件的内容单独包装在，按照一定的顺序合并到-.中。页面 和 . 需要处于活动状态。
图5的编译过程
3.模拟器
小程序模拟器在微信客户端模拟小程序的逻辑和界面性能，方便者实时查看代码效果。由于系统差异和微信客户端特有的一些交互过程，少数无法在模拟器上模拟，但大部分在模拟器上都能显示正确的状态。同时微信者工具提供多种模型尺寸和自定义模型尺寸功能，方便者适配界面风格的模型。
图6小程序模拟器
2 逻辑层模拟
在微信客户端，运行小程序代码，在微信客户端，通过5解析小程序代码。在微信者工具上，我们使用隐藏逻辑运行环境来模拟小程序。
图7微信客户端小程序运行环境模型示意图
图8微信者工具小程序运行环境模型示意图
它是微信者工具上的一个标签。与标签不同，标签在不同的线程上运行。
用来模拟小程序逻辑层加载的链接是
我们在者工具底部搭建了一个本地服务器来处理小程序模拟器的网络请求。其中：
是者工具注入的脚本。
是小程序逻辑层的基础库。
者 代码。
在请求者的代码时，者工具读取代码并进行必要的预处理，返回处理结果，解析执行。 代码虽然没有在者工具上合并，但还是按照加载顺序解析执行。
图9内容
它是一个浏览器环境，但是一个简单的脚本解析器。浏览器中的 对象不能在其中使用。人员工具做得非常聪明。将者的代码封装在 中时，浏览器的 对象是局部可变的，这样在阶段就可以发现问题。
图10 对象局部变量化
3 渲染层模拟
微信者工具加载渲染层页面的标签，每个渲染层加载
