重新定义小程序开发 — 补全篇
时间回退到春节前,当时计划是要写个微信小程序的,但当我着手准备时,却发现小程序开发的整个生态基本上都是 JavaScript,没有一点 TypeScript 的踪影。偶尔能在社区里找到几个 wx api 的 TypeScript 的定义,但那都不全,而且项目长期没有维护。
说实话,TypeScript 写多了会上瘾的,用 TypeScript 可以避免一些不必要的语法错误,还可以给你一个完善的自动补全机制,节省大量查看文档的时间,而且这种机制可以让你在入手一个新的框架或维护一个大型项目时更容易。
所以,在没有 TypeScript 的环境中,我的小程序计划是执行不下去了。我必须先给微信小程序的开发制造一个 TypeScript 的环境。
第一步就是要实现 wx api 的自动补全,自然就得去分析微信 api 文档了。好在官方 api 文档都是用 markdown 写的,也都写的比较规范,所以把它们爬取下来,并结构化的过程还算比较顺利,最后的产物就是生成了一个 wx.d.ts(这是TypeScript里的定义文件,TypeScript就是基于它来完成自动补全的)文件,生成的文件中包含了官方文档的各项数据,包括:函数描述,兼容版本,需要的参数,返回值等等,甚至包含了线上链接,点击你就可以直接在官网直接查看。
用过 wx api 的应该都知道,它的接口都是回调型的接口,正所谓 “callback hell”,这种形式已经是过去式了,现在都流行使用 Promise,尤其是在 async / await 中使用非常方便。所以我把文档中需要使用 callback 的接口全都 Promise 化,生成了一个 wxp.d.ts 的文件。
说完 api,再来说说另一大块:组件。
微信组件类似于 html 的标签,不同的组件有不一样的样式及功能,如果需要使用你可能需要去官方文档查看具体说明。对于小程序新手来说,要看小程序支持哪些组件,每个组件中又有哪些属性可配置,是没法离开官方的文档的,即使是老手也经常要查看下文档吧。
既然可以抓取出微信的 api,为什么不索性把它的组件也抓取出来生成结构化的数据,方便编辑器实现自动补全呢?好在组件文档和 api 文档在结构上没什么差距,所以大部分的爬取脚本都复用上了,就轻松获取到了组件的所有数据。而要用这些数据就都依靠编辑器的插件了,由于我自己长期使用 vscode,所以只提供了一个 vscode 的 wxml 自动补全的插件 minapp-vscode,其它编辑器要实现我觉得完全是可以用我提供的结构化的数据去实现的!
说完了 api 和组件,小程序开发的剩下两大块就是 wxss 样式和 json 配置了。其实样式没什么好说的,基本就是 css,只是阉割了一些功能,并实现了一个 rpx 的单位,所以写 wxss 基本上就可以说是写 css 了,完全可以用编辑器自带的补全机制;这里只是想稍微多说一下 json 配置文件。
小程序主要有三类 json 配置:
- 整个应用的配置 app.json ,里面可以配置小程序有哪些页面,以及小程序的风格等等
- 单个页面的配置 page.json,每个页面可以有一个对应的配置,主要配置些页面标题及使用了哪些自定义组件等等
- 单个自定义组件的配置 component.json
每类 json 中有哪些配置你都知道吗?你能把它们全写出来吗?我相信没几个人能做到吧,多多少少都要去找文档了!
不知道大家有没有发现,当你在 vscode 中编辑 package.json 时,它会有提示支持哪些字段,这个字段什么意思等等。这些提示是基于一些预定义好的元数据来的,我们只要在 json 文件中配个 $schema 字段,指到元数据的链接即可。如何定义元数据可以参考 http://json-schema.org/。我为微信的三类json文件写的元数据定义都在 schema 文件夹下 ,自动补全的效果如下:
好了,几个主要的语言自动补全功能都说完了。除了这些,我还写了一个集成了 mobx 的小程序开发框架,和集成了 webpack 的小程序编译器。下篇文章我计划推出关于它们的专题,欢迎大家到 minapp 官网查看以了解更多相关内容