给文档加了个小程序的功能

接手文档项目后，想看看用户对文档有什么反馈，除了一部分错误的反馈外，还收到一部分有价值、但是不「善良」的反馈。

这个点，也是我一直想做的，能不能让文档的展示形态更加丰满些？

在进行小程序开发时，基础库提供了大量灵活的组件可提供给开发者使用，并且配套了一些详细的文档内容。现在的体验还停留在贴图、贴代码上，为了提供更高的文档体验，这里提供了在文档内实现 demo preview 的效果，在看组件代码时，也能同步了解该组件具体呈现的效果。

除了内部提供的内置组件外，在小程序生态内部还有众多优秀的组件库，有些组件库会选择使用 H5 来呈现效果，另外一些更细致的开发者会额外申请一个小程序来体验组件库。

为了服务这部分开发者，提高其自定义组件库的可用性，后期也会朝着可预览 ➕ 可编译 的小程序 playground 来实现。

一个完整的文档预览小程序，需要几块工作量：

• 编译工具
• runtime 容器预览
• 文档预览结构

编译工具

现在小程序内部编译工具是以 wcc 和 wscs 为核心，然后外层自定义独立小程序编译代码的内容拼接。

在开始做小程序编译工具时，问了周围的同事，能了解细节的人，真的没几个人。而实现小程序编译工具的人，都在另外一个组，那时候，真逼的我没办法，实现了 《心在六组，人在八组》的状态。我曾以为，我是不是真的是在八组。

写一个编译工具，就技术难度来说，还是有点的。主要思路就是 词法分析、语法分析。而我，其实并不需要做的太细，因为 wcc 和 wscs 都是现成的，我主要需要实现一个组件的依赖树。

runtime 内容预览

runtime 项目搭建是基于已有项目，本着程序员的基本道德标准之一 「不重复造轮子」。runtime 原有基本架构是基于 react + iframe 通信的结构，对标微信开发者工具，而文档预览的架构有些许不同，需要自定义小程序解包，增强 runtime 加载基础库文件的性能。

整个过程做下来，文档预览 runtime 的大致模样也基本定了。

文档预览结构

在编译工具和 runtime 内容预览两个大头工作量搞定之后，剩下主要是如果结合文档来进行编译的耦合实现。

这个块工作量不难，内嵌一个 iframe，将 /xcode 对应小程序代码，放进去差不多就大功告成了。

到这里，预览一期的大致内容差不多搞定啦！

有兴趣的小程序员，可以打开文档尝鲜体验下：

https://developers.weixin.qq.com/miniprogram/dev/component/button.html