基于通用组件语言规范的声明式组件库，腾讯WeComponents正式开源

阳光穿透心脏的1/2处 2023-06-17 10:51 10阅读 0赞

![format_png][]

面对各类运营需求，微信游戏团队在B端开发实践中进行思考和提炼，创立了通用组件语言规范（CLS，Common Components Language Specification），对所有组件进行统一抽象，指引无终端依赖、无语言依赖、无框架依赖的标准化组件开发模式。并基于此规范实现了一套 Vue.js 的声明式组件库，以标准化JSON描述页面组成，写完JSON就完成了页面开发，以此来简化前端工作，提高开发效率。

**适用场景**

B端系统中最常见的需求包含表单、列表、图表。表单用来收集用户数据，列表用来呈现数据，图表用于数据可视化。解决了这三个场景，就解决了大部分的需求。

![format_png 1][]

来看一个常见的需求：需要提供一个搜索框，点击查询按钮后，展示结果列表，列表展示图标、描述等几个字段，需要支持翻页。

像产品经理提需求一样写代码，是什么样的体验？

首先，需要一个包含搜索框和查询按钮的表单，并在查询按钮点击后触发事件。

![format_png 2][]

然后，需要有一个列表支持对数据做回显，个别字段还需要进行格式化的转换，并支持翻页。在格式化时，第一列 icon 展示了图标；第二列 name 原样输出；第三列 size 涉及到数字做了右对齐，且带上了字节单位G；最后一列允许用户进行交互操作。

![format_png 3][]

最后，把查询到的数据设置为列表的值，就完成了开发。

![format_png 4][]

来看看最终的页面效果。

![format_png 5][]

这就是使用 WeComponents 组件库进行页面开发的过程，采用JSON作为载体，以统一的声明式结构，在组件粒度描述页面构成。在组件内对外屏蔽了产品规范、交互规范、设计规范、前端规范，开发时按照组件粒度组织页面，像产品经理一样聚焦业务逻辑本身，代码简洁易理解。

**特点**

WeComponents 在使用中具有以下的特点。

**1. 声明式**

WeComponents 是声明式编程的实践，不像命令式编程需要一步步告诉计算机该怎么做，而是描述最终需要的结果是什么样子，执行过程封装在组件内部以及组件机制内。JSON即是声明式编程的一种表述方式。

**2. 数据驱动**

MVVM的设计模式，使得程序员可以更关注数据本身的改变，弱化对界面展现的掌控。WeComponents 将这种模式实现得更加彻底，将所有组件分析抽象后，建立统一的数据结构，以通用的属性来描述组件构成，以通用方法来操作组件。

组件设计更关注数据结构，以数据描述组件，不受组件表现的影响。在同等结构下，组件的表现可以通过修改组件类型、属性、布局等，达到快速切换。

![format_png 6][]

**3. 开发者友好**

因 WeComponents 是对所有组件统一抽象下的表述，所以理解了组件模型就理解了整个组件库，不用依赖组件开发者自身素质差异产生不同的组件描述，免去频繁查阅不同组件的说明文档。也易于开发对应的可视化页面制作工具，维护构成页面的JSON。

**通用组件语言规范**

通用组件语言规范是将所有组件抽象为统一模型的一种标准描述方式，因采用JSON作为描述方式，天然是跨端的，可以按照需求，实现为具体运行环境下、具体语言、具体框架的组件库。

![format_png 7][]

通用组件语言规范对组件的抽象体现为属性和方法。属性是对组件的声明式描述，包含基础信息、实体属性、扩展属性；方法是外部对组件的操作，包含针对不同级别属性的get/set操作。

![format_png 8][]

详细可查阅：

https://tencent.github.io/WeComponents/\#/doc/principle/cls

**期待贡献**

借助通用组件语言规范CLS，微信游戏团队实现了 Vue.js 组件库 WeComponents，并使用此组件库降低了开发门槛，提升了开发效率。对于其他框架，如 React 暂未实现；对于其他优秀的组件库，还没有对接。真诚的期望通用组件语言规范能在不同框架、不同组件库得到支持，利用统一的思路简化组件使用，让开发更简单。

WeComponents 说明文档：https://tencent.github.io/WeComponents/

WeComponents 正式开源

Github 开源地址：

https://github.com/Tencent/WeComponents

（点击文末阅读原文直接访问）

请给 WeComponents 一个 Star !

欢迎提出你的 issue 和 PR！

WeComponents 国内镜像地址：

https://git.code.tencent.com/Tencent\_Open\_Source/WeComponents

（登录后才能访问公开项目）

![format_png 9][]

腾讯工蜂源码系统为开源开发者提供完整、最新的腾讯开源项目国内镜像

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9XN1c5SWdBUm1HOThvdlBnam9ibWxUVFdBb2JaaWFqcXp4SjZidzE2TEhqTXYzNjV3U2FmdUJEYlhDNHoyOWpUaWNLNVJUelZ2VEZIcjVxU203aWN1YTlhUS82NDA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9XN1c5SWdBUm1HOThvdlBnam9ibWxUVFdBb2JaaWFqcXpRTW1Ga1RRSEI2QXoyT3E1VFJxYWliU2VzaWNhVFMwY3JRa2RuaWNrNnE0eVExQ2paWWlhUGRrcm53LzY0MA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9XN1c5SWdBUm1HOThvdlBnam9ibWxUVFdBb2JaaWFqcXpQbm1jTTNpYWpxOUlFd09jVnM1R3dVaWNSQ2ljdFNGdjVpYTdiYkt0c0NqbEdjVGVERzlwemdoV0xBLzY0MA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9XN1c5SWdBUm1HOThvdlBnam9ibWxUVFdBb2JaaWFqcXpjMVg3SVpwT2J3NXNEUmljTHVCeko2OGFxbE5CTEVpYncxWDRMWUMxb3BtNHNMVHdxRndZRjJjZy82NDA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9XN1c5SWdBUm1HOThvdlBnam9ibWxUVFdBb2JaaWFqcXpEY3MwU08zZjNhdGhaVURNYnFqeUw3b2drMENXREFCQzk1UEZXWE41aWJ1TXdlVTJOZWIwZ1BBLzY0MA?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9XN1c5SWdBUm1HOThvdlBnam9ibWxUVFdBb2JaaWFqcXpDSlFXaWJiOTNWT1NhTk1iVndSN2p1T0U4czhUb0loWlZjQVhsZENydERpY3NadHM0dlMwaWFLZncvNjQw?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9XN1c5SWdBUm1HOThvdlBnam9ibWxUVFdBb2JaaWFqcXpvVHlwSTdNNjZIVU5jSmRDRWliZVpndE42bTFISnlhVEd1RDQ1MXo5Wm5pYlpxS3hueFpIclllUS82NDA?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9XN1c5SWdBUm1HOThvdlBnam9ibWxUVFdBb2JaaWFqcXpMaWJrVmdLTktDaWJuYkxvRmlhMHVhVWdWM0szNG1tZlloMjc4Tjh0ajdvbVJXVDFZdnlUbHhxM2cvNjQw?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9XN1c5SWdBUm1HOThvdlBnam9ibWxUVFdBb2JaaWFqcXo5REJDUjllNE5TRXJwUGliTEFIaWNLam5oMTR4OE5qNkpXeDkzVVFUdkQzcXNZVTNIdGNOMERVQS82NDA?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9XN1c5SWdBUm1HaWJpYU4ycllTcjdaZVZUcGlibmJzSWFyajFMWmR3M3B1UUpKOG5KdFdMZkFWVXY1eW8zUlRlV0tqelhwRWo0bXNrMTNpYWtKWnhrVXI2SXcvNjQw?x-oss-process=image/format,png