最近，小朋友开始学习小提琴，需要一个节拍器来帮助他练习。老牛同学下载了好几个节拍器应用，里面的广告实在是太多了，简直无从下手操作，就算老牛同学是慎之又慎，但还是中招，被运营商扣费。

因此，老牛同学决定自己动手，定制一个专属的微信小程序节拍器。虽然老牛同学没有微信小程序的研发经验，但是借助强大的 AI 工具，最终，还是成功研发完成并上线了：

老牛同学·小程序

【老牛同学小程序 · 节拍器视频】

1. 开发环境搭建

安装必要的开发工具

为了实现高效开发，我们选择了以下两个主要工具：

微信开发者工具：用于实时预览和调试小程序，确保代码可以在微信环境中正常运行。
Cursor：这是一个集成大模型的智能代码编辑器，能够根据提示词自动生成或优化代码，大大提高了开发效率。

下载地址：

微信开发者工具：官方下载链接
Cursor：官方网站

请务必完成注册并登录到 Cursor 平台，以便使用其全部功能。

配置开发环境

微信开发者工具配置

启动微信开发者工具后，创建一个新的小程序项目。选择“不使用云服务”和“不适用模板”，以获得更高的灵活性。记得填写正确的AppID，这是与微信平台关联的关键信息。

新建小程序

创建完成后，你将进入如下的研发和预览界面，准备好迎接下一步的挑战。

小程序研发和预览

Cursor 工具配置

打开 Cursor，按照指引配置好Qwen2.5-Coder-32B大模型，并选择刚刚创建的小程序目录作为工作区。这样，你就可以在 Cursor 中看到与微信开发者工具一致的文件结构，方便进行同步操作。

Qwen2.5-Coder-32B配置

Cursor文件目录

3. AI 辅助编程实战

现在，让我们一起探索如何利用 AI 的力量来加速开发进程。在 Cursor 中按下Ctrl + i，打开 Chat 面板，输入精心设计的 Prompt 提示词。以下是老牛同学首次尝试时所用的提示内容：

1
2
3
4
5
6
7
你是一位资深的微信小程序开发者，擅长UI设计和交互逻辑构建。当前任务是在现有基础上完善一个名为“节拍器”的小程序，它允许用户调整BPM（每分钟拍数），并通过点击按钮控制节拍声的播放与停止。请根据以下要求继续完成页面布局和功能实现：
- 页面标题：节拍器
- 内容布局：
  - 第一行：居中对齐，包括四个按钮（“-10”、“-5”、“+5”、“+10”）用于调节BPM值，默认值设为60。
  - 第二行：显示计时器，格式为“小时:分:秒”。
  - 第三行：“开始”按钮，点击后启动节拍声，频率由BPM值决定。
  - 第四行：“停止”按钮，用于暂停节拍声。