文/明道云/薛晨

前言

明道云这两天发布的11.2版本推出了插件市场，开发者可以将自己开发的插件（目前指视图插件）发布到市场，定价销售。

什么是视图插件呢？

明道云的平台能力，也许可以满足用户95%的需求，但剩下5%的需求可能非常个性化，难以通过平台的需求迭代进行满足，而通过插件架构，明道云提供了这种个性化需求的满足能力。

视图插件又叫「自定义视图」，当HAP的表格、看板、层级、日历、画廊、详情、甘特图等系统视图不能满足用户视图展示需求的时候，开发者可以通过自己编写代码实现一个完全自定义的视图页面，用于展示工作表的记录数据。自定义视图支持搜索、筛选、统计、快速筛选和筛选列表等操作，还可以通过HAP公共Javascript接口实现调用系统组件，比如展示记录详情弹窗、调用新建记录窗口等等。

视图插件的开发是需要有一定的前端开发基础的，大多数明道云的普通用户可能都是业务人员，并不具备这样的开发能力，但通过本文的方法，哪怕你没有任何编程基础，也能够轻松地开发出满足自己需要的插件，甚至上架到明道云市场中，也许能够获得一定的收益。而对于技术人员，通过本文方法，也能更加高效地开发出自己想要的插件视图。

案例

我们先看几个例子，这三款插件均是通过本文方法，在1小时内开发出来的，并均已上架明道云市场。而我个人，没有任何编程基础，不会写一行代码。

录音视图

明道云的表单中并没有提供录音的字段，附件字段也只能上传现有的音频文件，虽然通过明道云的“自定义字段”功能也能够开发出录音字段来，但是受限于iframe权限的问题，需要跳转新窗口才能完成录音，在Web端还好，但APP上阻止了弹出窗口，无法给予权限，因此自定义字段开发的录音字段在移动端就没法用了（H5可以）。

通过插件开发的录音视图，不仅不需要跳转新窗口，在各端均可以使用，而且可以有更多的拓展空间。例如：

• 录音时，通过AI实时转录录音内容（通义听悟等均支持），在视图中显示一个文本窗口，以做会议纪要等用途；
• 录音完成后，通过AI提取录音内容，自动进行后续操作，如创建费用报销记录、创建采购表单等，并且将创建后的表单显示在视图中，供修改确认；

因时间关系，我并没有完成后续开发， 若有更多进展，会发布新的插件到明道云市场中，欢迎关注。

排行榜视图

根据表单内的数据，呈现一个人员排行榜的页面，用以表彰或激励。例如，根据销售订单表，显示销售业绩排名和销售部门排名；或者根据学习积分表，显示学习排行榜等。

Markdown编写视图

这是我同事李江开发的插件视图，同样是通过本文介绍的工具完成。

明道云主要用于构建企业中后端的业务管理系统，构建类似文档笔记一类的应用，使用体验并不算好，在明道云11.2版本中，文本字段支持了Markdown格式，配合此视图，我们可以大幅增强明道云在这方面的使用体验。

通过这款视图，我们可以直接在界面上撰写、编辑Markdown 格式的文字内容，并提供良好的呈现效果，还有显示大纲、导出为PDF，进行内容搜索等功能，在知识库、方案输出等场景都可以得到很好的应用。

步骤

接下来，我将详细为你介绍，以上三款插件是如何开发出来的，照着此方法，你也可以很快开发出类似的插件视图。

我们需要使用到一款工具：Cursor

Cursor 是一个将 AI 技术与代码编辑器深度融合的工具。它通过内置先进的 AI 模型（例如 OpenAI 的 ChatGPT 和 Anthropic 的 Claude），帮助开发者显著提升编程效率，为开发者提供智能代码补全、错误检测、代码优化等功能。与传统代码编辑器相比，Cursor 不仅是一个编写代码的平台，更是一个能够理解代码上下文并提供智能建议的编程伙伴。目前，Cursor 是使用 AI 编写代码的最佳方式之一。

简单来说，Cursor就是一款能够通过AI 自动生成代码，而且可以自动替我们完成相关程序操作的工具。虽然它满屏的代码看起来有一点心里压力，但我们只需要关心右侧和他的对话窗口即可。

一、下载安装Cursor

访问https://www.cursor.com/cn ，下载Cursor到本地完成安装。

打开Cursor后，在第一个弹出的界面这里，输入“中文”，后面Cursor与你的交流就会用中文回复你。然后一直下一步注册账号登陆。

二、完成明道云视图开发初始化

进入这个界面后，我们选择“Open Project”创建一个文件夹，开发的插件就会放进这个文件夹里。

这就是我们接下来开发视图插件的界面了，右边的对话框是一会儿我们和AI对话的窗口，但在让AI帮我们写插件之前，我们需要完成插件视图的开发准备。

使用Chrome浏览器，打开任意一个工作表，添加视图，选择“+开发视图插件”，会弹出如上界面。

我们首先需要选择一个插件模版，如果你对这些并不了解，选择默认的“React 基础示例模版”即可。

接着，复制界面中第一个黑色背景方框中的代码（安装插件开发专用的终端命令行工具），到Cursor 中粘贴，然后回车(Send)。

请注意，如果你是mac，需要在这个命令前加sudo，即：

sudo npm install -g mdye-cli

Cursor 会出现这样一个卡片，点击后，光标在“Password：“后高亮，此时输入电脑的开机密码进行授权。

注意：输入密码时，界面不会有任何显示，直接输入后回车即可。

等待一段时间，你应该能看到这样的界面。

此时复制明道界面中的第二命令（第二个黑色背景方框中的代码），到Cursor的聊天框中回车，即：

mdye –version

你可能会看到这样的报错，但没有关系，我们不需要考虑发生了什么问题，直接让Cursor帮我们处理即可。可以这样告诉Cursor：

无需询问我，自动尝试所有可能的方案，帮我解决这个问题。

Cursor会开始自己解决问题，最后显示如图这样的版本号，就代表“插件开发专用的终端命令行工具(CLI)”安装成功了。

接着，我们要逐一复制明道云界面中，第3步的4条命令到Cursor中，让他执行。首先复制第一条。

注意：不要复制我截图中的命令，复制你自己明道云界面中的命令，每一次这个命令都不一样。

当你看到如图这个界面后，点击这个命令行的卡片，然后回车。这一步的意思是，创建明道云插件视图的文件夹名称。

当你回车后，Cursor应该会开始自动执行后续的命令，最后帮你启动项目开发环境。但如果你的Cursor并没有自动执行后续步骤，你就自行复制明道云界面上，第3步的剩下几条命令到Cursor中执行即可。

将Cursor中显示的地址复制粘贴到明道云界面上，点击加载。一般都是

http://localhost:3000/bundle.js

当你看到这个界面，就代表视图插件开发的初始化已经完成了，接下来就让我们开始发挥我们的创意吧。

三、开发明道云插件视图

首先，你需要明确你的需求，比如：

开发一个录音的视图，允许用户调用浏览器的麦克风权限进行录音，录音后，能够回放录音内容，并且，自动创建一条当前工作表中的明道云记录，写入录音时间、录音人、录音文件。

其次，我们得让Cursor根据明道云插件视图的开发规则来开发，否则不一定能够应用上。而且，我们需要Cursor在上一步安装的明道云视图开发的环境中开发，不能让它新建一个环境，所以我们需要复制一下我们当前文件夹的路径给它。

参考明道云视图插件的开发文档https://help.mingdao.com/extensions/developer/view/ 在当前环境mdye_view_67d3c34a081928afc4c73c2a 下完成开发。

我们将需求整理后，贴在Cursor的对话框中进行回车。

当Cursor告诉你它开发完成后，如果它说已经“构建代码完成”、“文件上传成功”，代表着Cursor不仅帮我们完成了开发， 而且已经插件发布到了明道云上，我们已经可以使用了。

点击这个界面的“清除”。

选择一个“已提交”的代码。你就能看到你开发的插件视图了，可以试试效果。

但如果你的Cursor并没有帮你把插件发布到明道云，或者不知道发生了什么原因，你无法看到这样的界面，你可以直接告诉Cursor，“启动开发环境”、”提交发布代码“或者”我在界面上没看到任何效果“等等。总而言之，有任何问题，告诉Cursor，让他去帮你处理和分析。

此时界面并不好看，很可能也只实现了我们的部分需求，还可能有一些报错，别担心，继续与Cursor沟通，让它不断调整即可。

经过不断调整修改后的视图。

总结

通过Cursor，哪怕你和我一样，完全没有开发基础，完全看不懂一行代码也没关系，通过与它进行自然语言的对话，我们完全能够开发出满足我们需求的插件视图。但这里面也有一些需要注意的点。

比如Cursor 使用了不同的AI模型，不同模型的代码能力，解决问题的能力有差别也有差距，目前效果最好的是“Claude-3.7-sonnet”，在让Cursor帮你写代码的时候，需要注意你选择的模型。

还有Cursor并不是免费的，它有试用，但你达到一定的对话次数后，就需要付费了，Pro用户20美金/月。

最后就是和Cursor对话的技巧，虽然它很聪明，但我们最好把需求写得非常明确，而不是让它猜，如果你明确知道要调用哪个接口，告诉它接口地址和调用示例；或者让它把数据写到哪个字段，告诉它字段ID。实在不确定哪里出了问题，可以让它在界面上做一个日志区域，显示所有执行日志，方便排查问题。

随着明道云进一步开放插件能力，我们不仅能够开发出视图插件、字段插件，还能够开发工作流插件、图表插件等，在明道云现有的应用构建能力上，进一步拓展明道云的能力边界，实现更复杂的企业级应用系统。