AI编程实战：Cursor+Claude4，一口气生成uniapp小程序本期带你实测 Cursor + Claude 4

前言

年前介绍过 Cursor 助力小程序的开发实践，但那次分享细节不是太多，并且时间也有点久了。

正好，前几天 Claude 4 发布了，官网提到的 “7 个小时超长任务”还是很吸引人的。

今天，我们就通过一个实际案例，带大家看看现在的 Cursor + Claude 4 在 uniapp 开发中究竟能实现到什么程度。

项目介绍

这个应用主要是个人用于平时碎片化信息的记录，方便后续总结、整理成相关的文章、笔记。

同时，结合 AI 能力，将以上普通的功能进行升级改造，简化用户体验，提升应用智能化程度。

为了简化效果，不接入 API，直接使用小程序的本地存储。

项目环境初始化

项目基于 uniapp + uView2.0，所以需要分别进行配置。

uniapp 项目创建

HBuilderX 是 uniapp 团队开发的，支持肯定最好，我们直接使用图形化界面进行新项目创建。

注意选择合适的 Vue 版本，我们采用的 2.0。

引入uView2.0

1、依然采用 HBuilderX 的方式引入 uView2.0，直接在 DCloud 插件市场点击“下载插件并导入HBuilderX”即可。

需要注意，弹窗选择项目的时候，需要手动选择我们新建的项目。

2、引入uView主JS库。

在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。

// main.js
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

3、引入uView的全局SCSS主题文件。

在项目根目录的uni.scss中引入此文件。

/* uni.scss */
@import '@/uni_modules/uview-ui/theme.scss';

4、引入uView基础样式。

在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性。

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "@/uni_modules/uview-ui/index.scss";
</style>

到此，已经完成新项目的初始化。

我们可以运行到“微信开发者工具”上确认下。

应用生成

接下来就到了 AI 协同编程的重头戏了，之前的分享大多是生成单个页面或者单个模块，中间还需要我们进行连接，这一点都不够智能。

今天，借助 Cursor + Claude 4 的能力，我们来一次大胆的尝试。

提示词：

你是一个专业的uniapp+uview2.0开发专家。我正在开发一个名为"SelfGrowth"的跨平台应用，主要支持微信小程序。

业务功能：
应用的一个核心功能是一个类似待办的速记功能，每个速记包括内容、优先级、截止时间、重要程度，同时支持打标签，支持定时重复提醒。
另一个核心功能是AI对话，可以选择不同标签下的速记作为知识库建立对应的助手，并进行对话。各个助手除了被动进行对话外，支持定时设置，主动发送消息给用户。

界面布局：
参考截图样式，底部tab包括首页、事项、速记、助手、我的。
首页：
- 上部是助手头像列表，横向排布，头像右上角有消息小红点，头像下面有最新的一条消息。
- 下部是速记内容列表，展示内容、优先级、重要程度、截止时间、标签。
事项：
速记内容列表，支持搜索、下拉刷新、上拉加载更多。
速记：
该图标为快捷入口，点击后直接通过语音录入速记内容。
助手：
助手列表，类似微信对话列表，右上角是新增按钮，点击可以新增助手。
列表中的任一助手点击后进入助手的对话界面，右上角有设置按钮，点击可设置助手相关属性（提示词、配置等）。
我的：
个人中心页面，包括常见的头像、个人信息、设置、关于我们等入口。

技术要求：
- 暂时采用小程序本地存储数据的方式，不采用网络接口，但存储逻辑需要独立封装，方便后续切换后台API。
- 所有图标优先采用uView内置图标。
- 图片使用upsplash api获取合适图片。
- 整个项目采用vue2，禁止使用vue3的特性。

我们通过提示词将想要实现的功能和大体的布局一起告诉 AI，让它直出应用，看看效果如何。

结果：

整个过程耗时大概10多分钟。

由于我没有采用 yolo 模式，中间弹出了几次确认。

另外就是中间超出阈值一次，通过录入“继续”完成了输出。

可以说是几乎不需要人为参与。

为了更好的展示，我截了一个完整的长图。