使用Cursor快速开发微信小程序

type

status

date

summary

slug

背景

这两年大模型发展起来后，我自己一直都想做一个小工具试试水，但是受限于大模型的编程能力和我自己薄弱的前端知识，这个想法就一直停留在开始阶段，没有继续深入做下去。随着Cursor和一系列AI编程工具的出现，大幅降低了写代码的门槛，因此我又重拾起了做小工具的想法。

为什么做这款小程序呢，还是因为日常生活中，周末宅在家的时候，老是不知道中午吃啥或者晚上吃啥，因此想着做个小程序，让小程序帮我决策。

开发过程

前置准备

既然要开发微信小程序，那么微信开发者工具肯定是需要的，下载链接可见‣。然后呢，我们还需要使用Cursor帮助我们开发，所以需要下载Cursor客户端，下载链接见‣。注意，Curosr是收费的，订阅制，新注册账号有免费试用的额度。如果免费试用额度不够，可以考虑去淘宝上组个共享账号。（共享账号有跑路风险，需自己斟酌）。

初始化项目

初始化项目，使用微信开发者工具新建工程就可以了。

AppID可以先使用测试号（点击测试号即可）

后端服务这里，因为此次不涉及到后端服务，且后续如果接入后端服务，也没准备使用腾讯的服务器，所以这里选择的不使用云服务

模板选择，就选择了一个最简单的TS基础模板

最后点击创建就可以了。

项目初始化完成后，我们后续的开发工作都是通过Cursor实现的，微信开发者工具的主要作用就是预览和调试。

Cursor登场

下载后登录Cursor，使用Cursor打开我们的工程。Cursor也是基于VScode开发的，因此其前端界面和VScode非常像，在正式开发前，我们可以先看下Cursor主要功能。

Cursor左侧是整个工程目录，中间部分展示我们的文件内容，右侧是与AI大模型对话的窗口，我们就是通过对话的方式来进行代码开发的。在对话过程中，我们可以选择对话的大模型。这里，我还是建议大家一直使用Claude-3.5-sonnet-20241022这个模型，其编码能力是最强的。

正式开发

我们可以先在工程目录下新建一个Readme.md文件，描述下当前工程是做什么的，我的Readme.md文件内容如下：

后续在通过对话进行开发时，可以把这个Readme文件勾选上，这样可以避免对话内容过长时大模型忘记了我们最终要实现什么内容。

现在我们直接对话，让大模型帮我们开发这个小程序。

大模型很快就帮我们返回了结果，点击apply就可以直接生成这个文件（注意目录位置是否准确）。不过，由于我们没有勾选其他文件，大模型当前不知道app.ts等文件，微信开发者工具已经给我们创建好了，我们不需要重新创建，所以，我们可以重新发起一轮对话，该对话中可以选中一些已有的文件（尽量少让大模型改动无关文件，改动的越多，出错的机率越大）。

这次，我们让大模型修改我们工程中已有的index页面文件（index页面是官方模板中提供的一个默认登录页，打开小程序后就会直接展示该页面，我们这个小程序暂时不需要登录功能，因此我们让大模型直接修改这个页面即可）。修改完成后，我们可以把大模型生成的内容直接粘贴到原始文件中。PS：有的时候，大模型只生成了文件中需要修改的那部分，其余的没有直接给出，那么我们可以直接让大模型给出某个文件的完整内容即可。

将大模型生成的内容粘贴到原始文件后，我们像看下渲染效果，那么我们直接Ctrl+S保存当前生成的代码，然后打开微信开发者工具，就能看到实时渲染的结果了。如果觉得渲染结果不符合预期，我们也可以把这个页面截图给大模型，让他按照我们的要求继续修改。修改过程中，修改目的尽可能单一且明确，改动的文件越少，准确率越高。

注意：考虑到大模型生成的内容不一定完全准确，我们可以使用Git管理我们的代码仓库，以便回滚。

成品

当前小程序已经发布上线，整个过程中，开发耗时是最短的，半天的时间就OK了，反而是后续的备案、认证流程用了很多时间。大家可以在微信上搜索“瞅瞅今天吃什么”或者扫描下方二维码体验下小程序。当前小程序还比较简陋，大家有什么建议或者意见可以随时提出，欢迎讨论。

背景

开发过程

前置准备

初始化项目

Cursor登场

正式开发

成品

luxinfeng