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

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

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

在进行小程序开发时,基础库提供了大量灵活的组件可提供给开发者使用,并且配套了一些详细的文档内容。现在的体验还停留在贴图、贴代码上,为了提供更高的文档体验,这里提供了在文档内实现 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

原文发布于微信公众号 - 前端小吉米(villainThr)

原文发表时间:2019-09-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券