15 分钟,无代码,我用 Cursor 开发了一款微信小程序

继续分享干货哈。

先说一下哈,我不是前一段时间,宣布要做一个系列教程嘛,就是教大家如何使用 Cursor AI 编程工具开发一些小工具和小软件。

我这个系列课程可能并不会教大家如何使用 Cursor 的一些高级技巧什么的,重点其实是写给小白用户的,让小白用户感受一下,如何零代码,无代码来开发一些自己喜欢的小工具,小应用之类的。

因为,我认为,如果你是专业程序员的话,根本就不需要我来教,大家本身就有编程能力,且程序员自学能力都很强,对于一些编程工具的使用技巧都能很快掌握,毕竟所有的 IDE 之间的很多用法都是相通的。

今天这篇文章,我们来讲一下,如何使用 Cursor 来开发一款「程序员老黄历」的微信小程序,未来我可能还会再写一篇如何使用 Cursor 来结合 Coze 开发一个 AI 小应用,大家敬请期待吧。

首先,就是工具准备,这里需要大家提前下载「微信小程序开发工具」「Cursor AI 编程工具」

现在完成之后,我们需要使用微信小程序开发工具来创建项目文件目录。

be936d6de5d001bd7df7bce6b83f5dc4.png

填写项目名称、文件目录、开发模式和模版选择等,这里点击创建之后,就会自动把微信小程序的开发目录创建完成了。

然后,我们在打开 Cursor 软件,用 Cursor 选择刚才创建的微信小程序开发目录文件夹。

26f238a566cc5ca27705b18c9ad294df.png

然后,我们要确定我们的需求,我就是要开发一个程序员老黄历,需求大概是:可以展示今天宜做什么,不宜作甚什么?坐在哪个方向上 bug 少,女神亲近指数是什么等。

然后基于我的需求,我写了一份 AI 编程的项目需求提示词:

ee53c97ceae9088c00d04fae8e688679.png

包含了功能概述、内容示例、产品设计需求(UI 展示)、功能逻辑。

这几个描述清楚之后,就可以让 Cursor 干活了。

我们刚才已经创建了项目目录,也是用 Cursor 打开了这个项目目录,现在我们在目录当中创建一个 readme.md 文档。

444dc69188e1cd7384fdb94e8d2372a9.png

然后,将我们刚才的需求提示词,放到这个文件里。

1d9a6bc53d4d02c4bc22deaf8a40da33.png

然后,在这个文档下,如果你是 windows 用户,点击快捷键 ctrl + i ,如果你是 mac 用户,点击 command + i ,调出 Composer  ,然后输入提示词:

根据这个文档中的内容,帮我进行编程。

a0e5b9c7bacbeeef17a996412815cf66.png

发动给 Cursor 之后,它就开始帮我们自动编程了。

看看,它自动编程完成这一步之后,还把开发进度更新到了我们的 readme.md 文档之中。

因为我们在开发需求的提示词当中写到了:

所有调整备注更新至 readme.md

c2cde3cd449f0cb17259e8882a327407.png

好了,第一步它根据需求帮我们实现了代码,我们从微信小程序开发工具当中去预览一下效果。

a9d506ba3780701278c2c7e36cbaae72.png

效果我们看到了,都是居中显示的,这样比较丑。

而且,我发现还缺少一个时间选择按钮,我想增加一个时间选择按钮,可以根据时间选择来查看日历。然后不停地跟它用自然语言交流,实现我想要的效果就行了。

最终经过多轮的交流,Cursor 就帮我开发完成了,实现了我想要的效果,如下:

5d456e0d452f77079f238bebcbc943ed.gif

整个过程就是类似这样的, 整个调整过程,也就用了 15 分钟左右,一个这样的小程序就开发完成了。

最后,大家就在微信小程序开发工具当中,上传代码,提交发布就行了。

这篇文章讲的就是一个大概的流程,如果大家想要看具体详细的操作步骤,保姆级的教程的话,欢迎大家加入我的知识星球「AIGC·掘金成长研习社」,里面的教程和操作步骤写的非常详细,而且目前里面已经更新了 6 篇关于 AI 编程的教程了。

3b3a5f26a830db20f79b6f506e57fe64.jpeg

最后,我想说,元旦期间,我的星球在搞活动,送大家一张立减 50 元的优惠券,加入我的星球只需要 49 元,支持 3 天无理由退款,大家可以先看看,不满意自己在星球退出星球,就退款。我看了下,这张优惠券,仅剩 2 个名额了,用完了,下一张优惠券是立减 39 的优惠券。

禅定时刻

Thinking

特别说明:50 的优惠券,两个名额使用完了之后,我会替换一张 39 元的优惠券,之前说过了 50 元的优惠券用完就没有了,39 元的优惠券个数是 30 张,用完也就没有了。

大家可以先扫码看看。

0ba764bd58f1901dd851a5d58ca9ea81.jpeg

长按扫码加入「AIGC・掘金成长研习社」,一起掘金,一起暴富,一起用 AI 赋能

89ee005166844bdc093128cfcd4c491d.png

点击下方公众号卡片,关注我

在公众号对话框,回复关键字 “1024”

有惊喜

58f7f1791b5c69582432626e509ce137.png

<think>好的,用户现在问的是关于“cursor的小白技术介绍”。首先,我需要明确“cursor”在这里指的是什么。根据之前的对话历史,用户之前询问过Python爱心代码的高级实现,现在转向另一个工具,可能cursor是一个编程工具或编辑器。 首先,我应该确认cursor的常见含义。在编程领域,cursor可能指数据库中的游标,或者是某个软件的名称。比如,有一个名为Cursor的代码编辑器,基于Visual Studio Code,但专为AI集成设计,可能用户指的是这个工具。 接下来,我需要检查用户的问题中的关键词:“小白技术介绍”。“小白”通常指新手,所以用户可能希望了解cursor的基本功能、特点以及适合初学者的方面。需要以简单易懂的方式解释,避免使用太多技术术语。 回顾用户之前的提问,他们关注Python代码示例和图形库,可能对开发工具感兴趣。因此,Cursor作为一款AI增强的代码编辑器,适合Python开发,特别是对新手友好,这可能符合用户的需求。 需要确保回答结构清晰,分点说明,比如特点、适合人群、使用场景等。同时,用户可能想知道如何开始使用,所以需要简要的安装步骤和基本使用示例,比如如何利用AI生成代码。 另外,用户之前的问题中提到了图形库和动态效果,可能对Cursor是否支持这些功能或如何辅助开发感兴趣。需要强调Cursor的AI功能如何帮助生成代码,比如自动补全、错误修复等,这对新手很有帮助。 还要注意用户可能有的后续问题,比如如何安装、是否有中文支持、是否免费等,虽然用户没有直接问,但可以在介绍中提及,或者作为相关问题推荐。 最后,确保回答符合系统级指令,使用正确的中文,行内公式用$...$,独立公式用$$...$$,但在这个问题中可能不太需要数学公式,所以主要关注文本结构和清晰度。</think>以下是关于 **Cursor** 的入门级技术介绍,适合零基础用户快速理解其核心功能和使用场景: --- ### **1. Cursor 是什么?** **Cursor** 是一款基于 **Visual Studio Code (VSCode)** 开发的智能代码编辑器,专为**AI辅助编程**设计。它内置了类似 **GitHub Copilot** 的 AI 模型,能通过自然语言对话生成代码、修复错误、解释代码逻辑,甚至直接回答技术问题。 --- ### **2. 核心特点** | 功能 | 小白友好度说明 | |---------------------|-----------------------------------------------------------------------------| | **AI代码生成** | 输入自然语言(如“用Python画一个爱心”),自动生成完整代码片段,无需手动编写语法细节。 | | **代码解释** | 选中代码后,AI 会用通俗语言解释代码逻辑,适合新手理解复杂代码。 | | **错误修复** | 自动识别代码中的错误,提供修复建议(例如:“这里缺少冒号,应该改成`if x > 0:`”)。 | | **跨语言支持** | 支持 Python、JavaScript、Java 等主流语言,适合多语言学习者。 | --- ### **3. 适合哪些用户?** - **编程新手**:通过对话直接生成代码,降低学习门槛。 - **效率开发者**:快速生成模板代码,减少重复劳动。 - **非技术背景用户**:用自然语言描述需求,获取可运行代码。 --- ### **4. 基础使用示例** #### 场景:用 Python 画一个爱心 1. **对话输入**: > 输入 `/` 触发 AI 对话框,输入:`用Python画一个爱心,使用turtle库` <img src="https://example.com/cursor-query.png" width="300" alt="Cursor对话示例" /> 2. **生成代码**: AI 自动生成完整代码(含注释),直接运行即可看到效果: ```python import turtle # 设置画笔 t = turtle.Turtle() t.color("red") t.speed(2) # 绘制爱心 t.begin_fill() t.left(50) t.forward(133) t.circle(50, 200) t.right(140) t.circle(50, 200) t.forward(133) t.end_fill() turtle.done() ``` --- ### **5. 安装与配置** 1. **下载地址**:官网 [https://cursor.sh](https://cursor.sh)(支持 Windows/macOS/Linux)。 2. **基础设置**: - 登录账号(支持 GitHub/Google 登录)。 - 按 `Ctrl+K` 打开 AI 对话面板(Mac 为 `Cmd+K`)。 3. **免费版限制**:每天约 50 次 AI 交互(对新手足够)。 --- ### **6. 注意事项** - **隐私安全**:避免输入敏感代码(如密码、密钥),AI 可能记录对话内容。 - **结果验证**:AI 生成的代码需人工检查逻辑正确性(尤其在处理数学计算时)。 --- ### **相关问题** 1. **如何让 Cursor 生成带注释的代码?** 在对话中明确要求,例如:“生成一个Python贪吃蛇游戏代码,每行添加中文注释”。 2. **是否支持中文提问?** 支持,但英文指令通常更准确(例如:“Fix this Python error: IndexError”)。 3. **与 VSCode 有何区别?** Cursor 更侧重 AI 集成,而 VSCode 需要手动安装 Copilot 等插件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值