平时经常会接收到企微群里机器人的推送消息，比如新闻推送、加班餐申请提醒等，作为一个程序员，秉着能用代码和工具代替的重复工作，坚决不用手的原则，我也打算玩玩企微机 器人。

初衷是开发没有测试环境的下的部署权限，以至于每次跟测时修改了代码，不能及时通知测试同学进行构建。而手动通知@某某测试，并手写工程和分支名，实在是一件重复的劳动， 能否自行配置一个模板，以后只需要在改动代码后，点击一个按钮就通知给测试呢？说做就做吧。

企微群机器人配置说明 (opens new window)

简单实现

• 在终端某个群组添加机器人之后，创建者可以在机器人详情页看的该机器人特有的 webhookurl。开发者可以按以下说明向这个地址发起 HTTP POST 请求，即可实现给该群组发送 消息。下面举个简单的例子. 假设 webhook 是：https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=693a91f6-7xxx-4bc4-97a0-0ec2sifa5aaa

可以看到，只需要在群右上角菜单中创建一个机器人，然后复制 webhook，然后发起 POST 请求就可以了。

乞丐版

顾名思义，这个版本功能简单，看上去很 low，但好在可以实现预期，保证在每次需要构建时，只需要点点按钮就行。

1. 复制 webhook 到 postman

2. 配置请求体

   {
     "msgtype": "markdown",
     "markdown": {
       "content": "代码构建，请测试同事注意。  @xxx\n> 工程名: <font color=\"warning\">git-project</font>\n> 分   支: <font color=\"warning\">feature/dev</font>\n> 改动点: <font color=\"comment\">bug修复</font>"
     }
   }
   

3. 点击发送

完整版

乞丐版仅自己可以用，如果别人也想用，只能将自己的请求体和 webhook 拷贝给 TA，因此计划新建一个项目来实现，之后将其部署到自己的服务器，为小伙伴们服务。

项目选型

既然是新项目，那么来点不一样的。最近团队在组织学习 react 框架，于是决定当做 react 练手项目。前期采用的是 modernjs+acro 框架进行开发，搞了两天结果页面老是报错， 而且 rspack 打包速度属实有点慢，2 个简单的页面启动都要 12 秒，对于用惯了 vite 的人来说简直如同蜗牛一样。

最终决定选型如下：

vite+react+react-router6+antd+zustand

• vite: 目前为止，最快的编译构建工具。
• antd: 国内与 element-ui 齐名的 UI 框架，界面简洁大方，star 高。
• zustand: redux 使用步骤非常复杂，pinia 又担心兼容性问题，而 zustand 使用非常简单，集合了持久化、immer 等中间件，star 高，因此采用它。

如何优雅地覆盖组件库样式 (opens new window)

谈谈复杂应用的状态管理（上）：为什么是 Zustand (opens new window)

功能设计

既然做一个网页，那就不止于表单提交发布，功能如下：

• 允许创建消息模板。基于模板可以直接发布消息，也可以编辑和生成新模板。
• 卡片式预览模板列表，包含基本的 CURD 功能。

可扩展 vs 用户体验

在开发和使用过程中，我一直在消息类型的可扩展性和当前用户操作体验上做权衡，因为他们无法统一。具体来说，是我要实现 3 个基本功能：

1. 用户可编辑
2. 用户可预览
3. 实际企微消息可渲染

• 版本1

企微消息类型包括文本，markdown，以及其他类型（暂时没有这方面需求，但是作为应用是否需要支持，打个问号）。企微发布消息的接口需要传入 json 格式，也就是说，只要 json 格式符合要求，可以发送所有支持的消息类型。

于是采用了vanilla-jsoneditor (opens new window)来处理 json 格式的编辑，功能可以实现。

然后是网页端的预览，如何将一串文本渲染成有格式的 html 段落？联想到这段文本可以在企微中渲染成 markdown 和文本格式，因此也可以将 markdown 格式的内容进行网页端渲染 ，这方面有成熟的markdown-it (opens new window)支持。

至此，正式功能已完成，打包后部署应用，如图。

这一版可以实现任意消息类型的发布，但缺点是用户频繁的修改消息内容时，需要自己在json编辑器中查找替换，编辑体验不太好。

• 版本2

基于此，同时考虑到目前的功能不需要支持图文和卡片消息，因此将其改造成只支持markdown格式，然后优化编辑和预览体验。

将文本使用2个for循环进行渲染，第一层表示行，第二层表示行内文本，然后使用几个辅助工具对文本进行渲染和分类，比如字体颜色选择器、switch勾选是否提及，switch勾选是否引用。操作界面如图。

至此，一个看上去还行的企微机器人编辑工具就完成了。