原理原理其实很简单，h5 页面在浏览器运行的过程就是解析 html 到渲染 dom 树的过程，然后提供一些 dom/bom 接口给 js 调用。那么在小程序中我们把这一套给模拟一遍就行了，方法很暴力，但是却意外的有效：因为给 h5 页面提供了类似浏览器的环境，实现了最底层的适配，所以理论上来说那些通用的框架和库也能支持运行。上面的例子中就表明了 jQuery 是能够运行的，像 react、vue 也是可以做到支持的。
微信小程序是双线程的运行模式，视图层专注于渲染，逻辑层专注于逻辑。逻辑层是在一个纯净的 js 线程中跑，那里没有 dom/bom 接口，只能运行页面逻辑层的代码。要模拟浏览器环境，最基本的就是要在逻辑层里模拟出一棵 dom 树，本质上和建立一棵虚拟树类似，因为它并不是真实的 dom 树。整个流程简单来说是这样的：
不管是页面中的静态 html 内容还是使用 innerHTML 等接口动态插入的 html 内容都可以走上面的流程来进行 dom 树的创建。dom 树创建比较简单，只是细节比较多，此处的关键是将创建好的 dom 节点映射到微信小程序的自定义组件，利用自定义组件的特性可以轻易的将我们创建好的 dom 树给渲染出来。
如果你还不清楚微信小程序的自定义组件是什么的话，可以戳官方文档了解一下。 限制受限于微信小程序本身的运行环境，所以这个转换是无法做到非常完美的，比如动态执行 js 代码、动态插入修改 style 标签等，所以使用此工具后一定要检查转换出来的微信小程序是否符合预期。 尾声本文更多的是为介绍 h5-to-miniprogram 工具的使用，后续会有更多实现上的介绍，有兴趣的同学可以尝试一下，有什么好的建议可以在 issues 中提出，也欢迎推送 pull request 帮忙将此工具完善起来~
