Cursor + claude 3.5 + v0.dev 开发微信小程序

视频演示了如何结合 Cursor、Claude 3.5 和 v0.dev 等 AI 工具，通过自然语言交互实现零代码开发微信小程序的全过程。

UP主: 乱跑的风油精 · 时长: 17:57 · 🔗 B站原视频

发布: 2024-08-29 · 收录: 2024-09-04

标签: Cursor · AI编程 · 微信小程序 · v0.dev · UniApp

AI 编程工具最近又火了：用 Cursor 做个零代码小程序

最近 AI 的编程工具又火了一波，随着 Cursor 的出圈，我们又见识到了 AI 在编程方面非常强大的能力。下面来尝试一下：在不写一行代码的情况下，用 AI 的编程工具做一个简单的微信小程序。

我们来写一个备忘录。

第一个工具是 v0.dev，它是 Vercel 公司开发的、专门用来做前端界面的工具。大家可以登录注册账号，每天可以试用大概十条。

第一个提示词：希望用基于 Vue3 构建的 UniApp 框架来开发微信小程序。UniApp 是一个比较常用的开发框架，用来做微信小程序，可以打通小程序、App 还有 Web 界面。

我告诉它我要做一个备忘录，让它给我一个 UI 界面。它会报错，刷新一下，可能是网络原因。重试一次就 OK 了。

它开始写：备忘录、添加键、删除键。它应该是把备忘录的所有内容都写在同一个界面里，并且有标注。它对中文还挺友好的：一个标题、一个输入框、一个添加键。

我让它在页面里添加几个示例，这样更清楚一点。它用了 scroll-view，可滑动的界面，这个组件感觉应该是正确的，甚至增加了删除键。

我又补充：每个备忘信息可以编辑，并且显示提交的时间。它加了编辑键、删除键，也把时间增加上了。

这个工具强大的地方在于：它像 Claude 一样，左边是对话框，右边有一个类似 artefact 的窗口，可以实时显示正在构建页面的预览，对开发而言效率提升很大。这个界面就先用它了。

接下来用 HBuilder，这是 UniApp 官方的编辑器。先创建一个空项目，里面有一个空页面和 logo，你也可以预览一下。

这是一个 H5 预览，我选 iPhone X。

然后在 Cursor 里打开这个项目，找到主页面，进入对话模式，告诉它我们要做什么，并请它参考我提供的代码。我把 v0.dev 的代码直接复制粘贴进去，它就开始工作。

这里用的是 Claude 3.5 Sonnet，也是 Cursor 的默认模型。可以发现它在很多情况下在代码方面已经超过 GPT-4。

它写完之后点 Apply，会替换掉之前的内容，选择 Accept，然后保存。保存完去 HBuilder 里看，效果已经很好了：可以添加一二三，添加到最后，删除也可以。

我想再改一下：增加一个 checkbox，如果“已完成”就可以勾选，文字变成灰色。我直接用自然语言描述，看看它能不能理解。保存后可以看到 checkbox 确实加上去了，可以删除。

但编辑功能不生效，目前编辑键没有作用。到这里为止我都没有写一行代码，也没有尝试手动改它写的代码，只需要用自然语言描述你希望得到的效果。

网络实在不太好，不知道 Cursor 现在对网络是否有要求，大概率是有的。

我让它重新修复一次编辑功能。根据我的经验，像 Cursor 这样的工具更适合做这种局部组件的修改；你不能在同一个对话里塞太多内容，否则会很乱，而且一个 bug 如果迭代一两次修复不了，就得新建一个 chat 来修复，不然会越改越乱。

还有一点：由于每次修改你自己并不会去阅读它改了哪些内容，就很容易让整个代码变乱。所以更好的习惯是：每做好一个东西就做一次 Git commit，这样后面的修改都有记录。

修复完后再试编辑，还是有一点小问题：点击编辑框的时候会触发 checkbox。这个 bug 也可以继续让它改。

我希望再增加一些功能：目前备忘录只有一行，想把输入行改成支持多行；另外希望可以输入图片或者视频。

我给了两个要求：

它修改效率很高。Accept 后看效果：之前的功能还在，添加图片看起来不错；添加视频目前不能播放，组件点进去也不能播放，但无所谓，这个效果对我而言已经可以了。

差不多不到十分钟，就能做一个这样的 demo。可以想象的空间很大。确实可以发现，即使不懂一行代码、或者不写一行代码，也可以做一个还不错的微信小程序 App。

今天的视频就到这里。刚才只介绍了 Cursor 一个比较小的功能：对单文件进行修改。

最近 Cursor 还出了更强的功能 Composer，后面我会专门出一期视频介绍。它可以多文件编辑，对整个项目有更宏观的了解。包括 Cursor 的 Codebase 也是很重要的功能：它可以通读你的整个项目文件，并基于项目结构来做修改。

Cursor 真的是一个非常强大的 AI 编程工具，好过 Copilot，也好过现在的 GPT。现在的 GPT 实际上并不是一个编程工具。

谢谢大家，今天的视频就到这里，再见。