完全不懂前端开发的我,用Cursor仅用半天时间撸了一个微信小程序

在这里插入图片描述

~犬📰余~

“我欲贱而贵,愚而智,贫而富,可乎?
曰:其唯学乎”

作为一个纯前端小白,我一直觉得开发微信小程序是需要大量的时间成本去学习的,所以虽然很久之前就注册过了一个小程序账号,但一直没有着手进行尝试。直到前几天在群里知道了 Cursor 这个 AI 辅助编程工具,它仅用不到半天的时间就帮我完成了我的第一款打卡工具小程序的基本功能。今天就来分享下我是如何借助 Cursor 完成小程序开发的。

一、什么是 Cursor

Cursor 是一个基于 AI 的代码编辑器,它最大的特点就是可以通过自然语言对话来生成代码。对于我这样的前端新手来说,不需要记忆大量的语法和 API,只要用白话文描述需求,AI 就能给出相应的代码实现。当然,不仅仅是小程序,还有python、java等语言项目也都可以支持,因为Cursor本身不会编译你的代码,它只是通过自动编辑以及创建、删除你的本地文件来将它的代码编辑好,然后我们就可以通过IDEA、小程序开发工具等IDE来编译执行我们的代码了,这大大降低了Cursor的使用门槛。

二、AI 对话式开发

使用 Cursor 开发最大的不同在于,我不需要先去学习小程序的框架结构。比如要实现一个打卡页面,我只需要这样描述:
"我需要一个打卡页面,顶部显示日期,下面是打卡按钮,打卡后可以添加备注。"
Cursor 就会生成完整的 WXML 结构和对应的 JS 逻辑。不仅如此,它还会主动提醒一些容易忽略的细节,比如:

  • 数据持久化的处理
  • 页面生命周期的管理
  • 用户交互的体验优化

除了生成代码,Cursor 的实时代码补全也特别智能。它会根据上下文提供符合小程序开发规范的建议。这让我避免了很多因为不熟悉语法导致的错误。更让我惊喜的是,Cursor 会主动给出代码优化建议。比如:

  • 提醒我使用更优雅的状态管理方式
  • 建议更合理的组件拆分方案
  • 指出潜在的性能问题

三、Cursor的使用

3.1. 下载

访问cursor官方网站,下载cursor工具,官网地址:https://www.cursor.com/

3.2. 安装

下载好之后直接双击安装即可,如有需要,可以指定安装目录

3.3. 打开项目文件夹

依次点击File->Open Folder,然后选择要编辑的项目的根目录即可在cursor中打开项目文件夹
在这里插入图片描述

3.4. 对话

在cursor的对话框中,包含两个页签:char和composer,我没有查询这两个页签的具体作用,但按我的使用经验来讲,chat页签中的聊天可以回答我们的问题,给我们一些建议,但它并不会自己修改我们的代码文件,composer页签中的对话则会根据我们的需要自动生成或修改我们的代码,composer页签也是我使用最多的页签。
在这里插入图片描述
如果没有这个对话框,可以直接点击右上方的这个图标来唤出对话框:
在这里插入图片描述

四、开发实战

这里对于如何注册小程序账号,如何安装小程序开发平台以及如何进行小程序工程的搭建这些内容不做赘述,如果有感兴趣的小伙伴可以私信我聊一下相关内容。我的目标是开发一个目标管理小程序,主要功能包括:

  • 设置总目标
  • 设置阶段性任务
  • 设置周期性行动
  • 每日/每周打卡

这是我最初的提示词,用于告诉cursor我的开发目标“微信小程序”,以及小程序要实现的基础功能和页面风格:
在这里插入图片描述
cursor在接收了我的提示词之后,便迅速为我规划了完整的项目代码结构以及初始化的配置、代码等内容():
在这里插入图片描述
由于cursor会直接操作本地的代码文件,所以它为我们写好的所有代码都不需要我们再复制到我们的项目中去,比如下图,当我们打开小程序开发工具之后,就会发现所有代码已经修改并编译完成(以下截图是最新的代码结构,在cursor使用初期并没有截图):
在这里插入图片描述
当然,cursor修改的所有代码在提交到文件之前都会和我们进行确认,只有我们点击了确认之后才会将代码保存到文件中,当然,作为纯小白的我,当然是无脑确认的,甚至知道开发完成,我都不清楚我的工程中代码到底是什么样的😓
在这里插入图片描述
对于开发过程中的异常情况,甚至也不需要我们进行排查,只需要将编译器报出来的错误复制粘贴给cursor,cursor就会自动帮我们分析并修复BUG:
在这里插入图片描述
由于我本身对我的小程序的第一个版本并没有过多的要求,以及cursor实在是太好用了,以至于我和cursor的对话大部分都是我在说“继续”,cursor在大量输出:
在这里插入图片描述
最后,在我这个开发人员甚至还不了解我的代码结构的情况下,我的小程序V1.0.0就这么出来了,下面是一些效果图:
在这里插入图片描述在这里插入图片描述
在这里插入图片描述

五、总结

  • Cursor 让我体会到了 AI 辅助编程的强大。它不仅帮我完成了小程序的开发,更重要的是在这个过程中,我也在逐步积累前端开发的知识。对于想体验AI开发的朋友,强烈推荐试试 Cursor。当然,AI 再强大也只是辅助工具。要真正掌握开发技能,还是需要自己多思考、多实践。Cursor 最大的价值,是让这个学习过程变得更轻松、更有趣了。
  • 由于我还有一些其他的想法想要在这个小程序中实现,比如对接AI大模型,自动创建、分解任务目标,并为用户生成打卡计划等,所以目前这个小程序尚未发布,仅作为开发版供我个人测试以及使用,后续我将继续完善这个小程序,直到我觉得这个小程序已经基本实现了我预想中的所有功能之后,再把它发布出来,期望到时候能对大家有所帮助。如果大家有什么想法,欢迎留言或者私信我。

在这里插入图片描述

关注犬余,共同进步

技术从此不孤单
### 微信小程序 Cursor 使用教程 #### 安装与配置环境 为了开始使用Cursor开发微信小程序,需先确保已安装必要的开发工具。这包括下载并安装微信小程序开发软件[^1]。完成安装后,启动该软件并将项目初始化。 #### 初始化项目 当创建新项目时,在微信开发者工具中设置好项目的名称和其他必要参数。一旦项目初始化完毕,后续大部分开发工作将在Cursor内进行,而微信开发者工具主要用于预览和调试功能[^2]。 #### 配置Cursor 对于初次使用者来说,理解如何充分利用Cursor至关重要。由于Cursor的强大之处在于其内置的Claude 3.5支持,如果希望获得更长时间无限制地体验此工具,则可以考虑开通Cursor Pro服务或获取其他高级模型的支持密钥(sk-key)[^3]。 #### 开发流程概述 - **页面设计**:利用Cursor提供的可视化界面快速搭建应用结构。 - **逻辑编写**:采用WXML、WXSS以及JavaScript来定义交互行为。 - **组件化开发**:通过复用现有UI组件加快开发速度。 - **API调用**:集成第三方接口扩展应用程序的功能范围。 #### 调试与发布准备 在整个开发过程中,频繁地切换回微信开发者工具来进行实时预览是非常重要的一步。这样可以帮助及时发现潜在问题,并调整优化直至满意为止。最终版本确认无误之后就可以按照官方指南提交审核并上线发布了。 ```javascript // 示例代码片段展示如何连接服务器端口 const app = getApp(); Page({ data: { message: '' }, onLoad() { wx.request({ url: 'https://example.com/api', // 替换成实际的服务地址 method: 'GET', success(res) { this.setData({message: res.data}); }.bind(this), fail(err){ console.error('请求失败:', err); } }); } }) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值