AI 驱动开发实战：10分钟用 Cursor 从零构建「微信群相册」小程序并接入 TaoToken

1. 为什么我决定用 Cursor 重做一次「微信群相册」微信群里最让人头疼的场景之一就是每次活动结束几十上百张照片散落在聊天记录里想找某一张得往上翻半天。做一个「微信群相册」小程序让群友把照片传进同一个相册听起来是个很轻的需求但真从零手写页面骨架、上传逻辑、状态管理、样式适配加起来一个下午就没了。这次我换了个思路用 Cursor 作为主力编辑器把需求拆成几段自然语言描述让 AI 先把可运行的骨架生成出来我再做联调和细节修正。整个过程我实测下来从空文件夹到能在微信开发者工具里预览、能选图、能上传、能回显大概十分钟出头。这篇文章不聊虚的直接把项目初始化、页面骨架、图片上传逻辑、以及怎么把 TaoToken 的统一 Key 接进 Cursor 的 settings.json 全部摊开你照着做就能跑通第一个可预览版本。适合谁看会一点 JavaScript、装过微信开发者工具、但没怎么用过 AI 编程助手的人或者你已经用过 Cursor但还没把它和小程序开发流程串起来。核心检索词就三个Cursor、微信小程序、图片上传。下面按「先跑通再优化」的顺序来。2. 前置准备Cursor、微信开发者工具与 TaoToken 统一 Key2.1 三样东西先装好第一Cursor。它本质是 VS Code 的 AI 原生分支界面和快捷键你几乎不用重新学。官网下载安装即可登录后就能用内置的 AI 对话和行内补全。第二微信开发者工具。去微信官方文档下载稳定版安装后用微信扫码登录。注意个人主体也能注册小程序账号拿到 AppID 就行测试阶段用测试号也可以但测试号不支持真机预览上传后面会讲怎么绕。第三TaoToken 的 API Key。TaoToken 是一个统一的大模型调用入口你可以在一个地方拿到 Key然后让 Cursor 通过兼容接口去调用 Claude 等模型。对写小程序这种「需要理解框架约定」的任务Claude 系列在代码结构和 API 选型上表现比较稳。2.2 为什么要在 Cursor 里接 TaoTokenCursor 自带模型额度有限重度使用会不够。把 TaoToken 作为自定义模型提供方接进去好处是一个 Key 管所有模型调用切换模型不用改代码计费和用量在一个控制台里看得清楚团队协作时不用每个人各自去申请一堆账号。你需要先去控制台创建一个 API Key然后拿到接入地址。地址是https://taotoken.net/api注意这个地址后面不加任何查询参数。Key 的创建入口在控制台的 API Keys 页面模型对话入口可以用来先验证 Key 是否可用。提示Key 只显示一次创建后立刻复制保存。不要把它写进会提交到 Git 的代码里后面我会讲怎么用环境变量隔离。3. 可复制配置Cursor settings.json 接入 TaoToken 骨架3.1 找到并编辑 settings.jsonCursor 的配置文件和 VS Code 一样用CtrlShiftPMac 是CmdShiftP打开命令面板输入Open User Settings (JSON)回车。你会看到一个 JSON 文件。在里面加入自定义模型提供方的配置。下面是一段可直接复制的骨架把你的_API_KEY替换成真实 Key{ cursor.ai.customProviders: [ { name: taotoken, baseUrl: https://taotoken.net/api, apiKey: 你的_API_KEY, models: [ { name: claude-sonnet, displayName: Claude Sonnet (TaoToken) } ] } ], cursor.ai.defaultModel: claude-sonnet }保存后重启 Cursor在模型选择下拉里就能看到Claude Sonnet (TaoToken)。如果没出现检查 JSON 是否有语法错误逗号、引号最容易出问题。3.2 用环境变量替代硬编码把 Key 直接写进 settings.json 有个隐患如果你同步配置或者截图分享Key 就泄露了。更稳妥的做法是用环境变量。在系统里设置TAOTOKEN_API_KEY然后配置里写{ cursor.ai.customProviders: [ { name: taotoken, baseUrl: https://taotoken.net/api, apiKey: ${env:TAOTOKEN_API_KEY}, models: [ { name: claude-sonnet, displayName: Claude Sonnet (TaoToken) } ] } ] }这样配置文件和 Key 就解耦了。团队里每个人自己设环境变量配置文件可以放心提交。3.3 小程序项目侧的 Key 隔离小程序本身如果也要调大模型比如做图片智能分类Key 绝对不能放在前端代码里会被反编译拿到。正确做法是小程序只调你自己的后端接口后端再去调 TaoToken。前端代码里只出现你自己的域名。这一点在后面的上传逻辑里我会再强调一次。4. 从零搭建项目初始化与页面骨架4.1 用 Cursor 生成项目结构新建一个空文件夹用 Cursor 打开。按CtrlL唤出 AI 对话输入第一段需求帮我创建一个微信小程序项目名称叫「微信群相册」。 需要三个页面首页展示相册列表、相册详情页展示图片并支持上传、创建相册页。 使用本地存储做数据管理不要用云开发。 生成 app.js、app.json、app.wxss 和 pages 目录下的完整文件。Cursor 会生成类似这样的结构wechat-album/ ├── app.js ├── app.json ├── app.wxss ├── project.config.json └── pages/ ├── index/ ├── album/ └── create/app.json里会注册三个页面路径app.js里会有一个globalData和几个操作本地存储的方法。这里有个坑AI 生成的project.config.json里的appid是占位符你要替换成自己的 AppID否则开发者工具打不开。4.2 数据管理层app.js 的关键方法AI 生成的app.js通常包含getAlbums、createAlbum、addPhotosToAlbum这几个方法。核心逻辑是用wx.getStorageSync和wx.setStorageSync读写本地数组。我建议你重点检查两点一是 ID 生成方式。用Date.now().toString()在快速连续创建时可能重复加上随机后缀更稳const genId () Date.now().toString() Math.random().toString(36).slice(2, 9)二是封面自动更新。当相册还没有封面时第一张上传的图片应该自动成为封面。这个逻辑 AI 一般会写但你要确认它是在addPhotosToAlbum里判断的而不是在页面里。4.3 首页骨架相册列表与空状态首页的 WXML 用wx:for渲染相册卡片用wx:if处理空状态。AI 生成的代码里空状态通常是一个居中的图标加一句引导文案。这里我建议你手动加一个细节卡片上显示图片数量角标让用户一眼看到哪个相册内容多。view classalbum-card wx:for{{albums}} wx:keyid bindtapgoToAlbum>wx.chooseMedia({ count: 9, mediaType: [image], sourceType: [album, camera], sizeType: [compressed], success: (res) { const paths res.tempFiles.map(f f.tempFilePath) // 调用 app.addPhotosToAlbum 保存 } })sizeType: [compressed]很重要原图上传慢且占存储。count: 9是单次上限用户想传更多可以多次操作。上传成功后用wx.showToast给反馈用wx.previewImage做预览。预览时传入所有图片的 URL 数组用户就能左右滑动切换。注意tempFilePath是临时路径小程序重启后就失效了。如果你只是做本地演示这没问题如果要持久化必须把图片上传到自己的服务器或对象存储拿到永久 URL 再存进本地。这一步涉及后端本文先跑通前端预览。5. 验证请求本地运行与接口联调5.1 导入项目并编译打开微信开发者工具选择「导入项目」目录指向你的wechat-album文件夹AppID 填自己的。导入后工具会自动编译如果app.json配置正确你会看到首页。第一次编译常见的问题是路径大小写不一致。Windows 不区分大小写但小程序打包时区分pages/Index/index和pages/index/index会被当成两个页面。统一用小写。5.2 验证 TaoToken Key 是否可用在 Cursor 里新建一个测试文件输入一段注释然后让 AI 补全。如果模型选择的是Claude Sonnet (TaoToken)补全正常返回说明 Key 和地址都通了。如果报 401检查 Key 是否复制完整如果报连接超时检查baseUrl是否写成了https://taotoken.net/api不要多加斜杠或路径。你也可以直接在模型对话入口发一句「你好」验证这是最快确认 Key 有效的方式。5.3 验证图片上传流程在开发者工具里点进相册详情页点上传按钮选择本地图片。预期结果出现 Loading 提示然后 Toast 显示「已添加 N 张图片」页面图片列表刷新封面如果是空的会自动填上第一张。如果选图后没反应打开调试器的 Console 看报错。最常见的是addPhotosToAlbum里findIndex没找到对应相册说明传进去的albumId类型不匹配字符串 vs 数字。统一用字符串比较。6. 本篇常见错排查6.1 编译报错「app.json 未找到」检查文件是否真的在根目录且文件名全小写。有时候 Cursor 生成时会写成App.jsonWindows 下能跑但打包会失败。6.2 图片不显示image组件的src如果是本地临时路径在开发者工具里能显示但真机上可能因为权限问题不显示。确认app.json里没有配置奇怪的permission限制。另外mode属性不写默认是scaleToFill会拉伸变形建议显式写aspectFill。6.3 上传后列表不刷新这是setData的经典问题。addPhotosToAlbum返回的是新数组但如果你直接改this.data.album.photos而不调setData视图不会更新。正确做法const updated app.addPhotosToAlbum(this.data.albumId, paths) if (updated) { this.setData({ album: updated }) }6.4 Cursor 模型调用报 429说明请求频率超了。TaoToken 控制台里能看到用量如果是免费额度用完去控制台看是否需要调整。另外Cursor 的行内补全和对话是分开计量的补全触发频繁时更容易撞限流可以适当调低补全的触发灵敏度。6.5 真机预览提示「测试号不支持」测试号只能模拟器预览。要真机体验必须注册正式小程序账号拿到 AppID然后在开发者工具里上传代码提交审核前可以先把体验版二维码发给朋友。体验版不需要审核通过就能用但需要把对方加为体验成员。7. 下一步把统一 Key 用在长期编码里跑通这个相册小程序之后你会发现 Cursor 加 TaoToken 的组合真正省时间的地方不在「生成一次代码」而在「持续迭代」。比如你想加一个「按时间倒序排列」的功能直接在对话里说「把相册详情页的图片列表改成按 createTime 倒序」AI 会精准改那一处不用你翻文件。如果你打算长期用这套组合做多个项目建议把 Key 管理、模型切换、用量监控固定成一套流程。API Keys 页面负责创建和吊销 Key接入文档里有不同语言和工具的配置示例Coding Plan 适合需要连续多轮对话、跑 Agent 任务的场景。模型对话入口可以随时验证某个模型当前是否可用避免在 Cursor 里配了半天发现是模型侧的问题。我自己的习惯是新项目先在模型对话里把需求聊清楚确认模型理解无误再回到 Cursor 里生成代码。这样比直接在编辑器里反复试错要快。相册这个项目从空文件夹到可预览中间只改了两次 AI 生成的代码一次是 ID 生成加随机后缀一次是setData的刷新逻辑。其余部分基本一次过。最后留一个实用技巧把常用的项目结构描述存成 Cursor 的「Rules」或片段下次新建小程序时直接调用连需求描述都能省一半。工具的价值不在于它多聪明而在于你把重复劳动交给它之后自己能腾出时间想更重要的架构问题。