三天用 Claude Kimi 完成一个微信小程序完整流程全记录背景与动机在 AI 编程工具井喷的当下Claude 和 Kimi 代表了两种不同范式的代码辅助Claude 擅长深度推理与长上下文理解Kimi 则以其庞大的知识库和精准的 API 调用能力见长。本文记录了我如何利用这两款工具在三天内从零构建一个「AI 驱动的个人记账本」微信小程序。这不是一个简单的 Hello World而是一个包含云开发、图表可视化、自然语言分类的完整应用。### Day 1需求拆解与架构设计Claude 主导第一天的工作重点是需求分析和架构设计。我向 Claude 描述了核心需求用户通过自然语言输入消费记录如“昨天中午和同事吃火锅花了280”小程序自动解析金额、类别、时间并存储到云数据库。Claude 给出了一个令人惊喜的架构建议前端微信小程序原生 ↓云函数Node.js 18 ↓AI 解析层调用 Kimi API ↓云数据库NoSQL关键设计决策是将 AI 解析放在云函数中而非客户端。这样既保护了 API Key又避免了小程序包体积膨胀。Claude 还生成了初始的项目结构并指出了微信小程序云开发的认证机制wx.cloud.init需要配置环境 ID。Claude 生成的数据库 Schema 设计javascript// cloudfunctions/addRecord/index.jsconst cloud require(wx-server-sdk)cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV })const db cloud.database()// 记录集合结构设计// { _id: 自动生成, openid: 用户唯一标识, // amount: 280.00, category: 餐饮, // description: 和同事吃火锅, // createdAt: Date.now() }exports.main async (event, context) { const wxContext cloud.getWXContext() const { parsedData } event // 数据校验金额必须为正数 if (typeof parsedData.amount ! number || parsedData.amount 0) { return { code: 400, msg: 金额格式错误 } } // 写入数据库并关联用户 openid const result await db.collection(records).add({ data: { ...parsedData, openid: wxContext.OPENID, createdAt: db.serverDate() } }) return { code: 200, id: result._id }}### Day 2AI 解析模块集成Kimi 主导第二天的核心任务是实现自然语言解析。这里 Kimi 发挥了巨大作用。我需要一个能够从任意中文句子中提取结构化数据的函数。Kimi 建议使用函数调用Function Calling能力而非简单的提示词工程。Kimi 提供的云函数实现javascript// cloudfunctions/parseExpense/index.jsconst axios require(axios)// 调用 Kimi API 进行语义解析async function callKimi(rawText) { const API_KEY process.env.KIMI_KEY const response await axios.post(https://api.moonshot.cn/v1/chat/completions, { model: moonshot-v1-8k, messages: [ { role: system, content: 你是一个记账助手。请从用户输入中提取金额、类别、时间。类别限定为餐饮、交通、购物、居住、娱乐、其他。格式化为JSON。 }, { role: user, content: rawText } ], // 关键使用 JSON 模式保证输出格式 response_format: { type: json_object }, temperature: 0.3 }, { headers: { Authorization: Bearer ${API_KEY} } }) const content response.data.choices[0].message.content return JSON.parse(content)}exports.main async (event, context) { const { text } event if (!text) return { code: 400, msg: 缺少文本 } try { const aiResult await callKimi(text) // 后处理确保金额是数字类型 const amount parseFloat(aiResult.amount) const category aiResult.category || 其他 const description aiResult.description || text return { code: 200, parsedData: { amount, category, description } } } catch (err) { console.error(Kimi 解析失败, err) // 降级方案正则表达式兜底 const fallback text.match(/(\d(\.\d)?)/) return { code: 200, parsedData: { amount: fallback ? parseFloat(fallback[0]) : 0, category: 其他, description: text } } }}这一天的关键突破是解决了Kimi 的 JSON 输出稳定性问题。最初直接使用提示词要求返回 JSON但偶尔会出现前后缀文字。通过response_format参数强制 JSON 模式后成功率提升至 99%。### Day 3前端开发与联调Claude Kimi 协同最后一天主要完成小程序前端界面。这里 Claude 负责生成页面骨架Kimi 负责细节调试。Claude 生成的首页逻辑javascript// pages/index/index.jsPage({ data: { inputText: , loading: false, records: [], totalAmount: 0 }, // 实时监听输入 onInput(e) { this.setData({ inputText: e.detail.value }) }, // 提交并解析 async submit() { const text this.data.inputText.trim() if (!text) return wx.showToast({ title: 请输入内容, icon: none }) this.setData({ loading: true }) try { // 调用云函数解析 const parseRes await wx.cloud.callFunction({ name: parseExpense, data: { text } }) // 保存到数据库 const addRes await wx.cloud.callFunction({ name: addRecord, data: { parsedData: parseRes.result.parsedData } }) if (addRes.result.code 200) { wx.showToast({ title: 记账成功, icon: success }) this.setData({ inputText: }) this.loadRecords() // 刷新列表 } } catch (err) { console.error(完整错误栈, err) wx.showModal({ title: 出错了, content: JSON.stringify(err) }) } finally { this.setData({ loading: false }) } }, // 加载记录并计算总和 async loadRecords() { const db wx.cloud.database() const res await db.collection(records) .orderBy(createdAt, desc) .limit(50) .get() // 使用 reduce 计算总额避免浮点误差 const total res.data.reduce((acc, cur) { return Math.round((acc cur.amount) * 100) / 100 }, 0) this.setData({ records: res.data, totalAmount: total }) }})### 踩坑与优化1.云函数冷启动问题首次调用 Kimi API 常常超时超过 3 秒。解决方案是在云函数中启用固定 IP并设置更长的超时时间默认 3 秒 → 改为 10 秒。2.金额精度问题由于 JavaScript 浮点运算特性0.1 0.2 0.30000000000000004。统一使用Math.round(x * 100) / 100处理。3.并发控制当用户连续快速提交时云函数可能出现重复写入。加入防抖机制前端 500ms 内只允许一次提交。### 总结这次三天开发实践证明了 Claude 和 Kimi 的互补价值Claude 的长上下文能力使其成为优秀的架构师能够理解整个项目的全貌并生成高质量的基础代码Kimi 的 API 集成能力则像一位精通外部服务的工程师在具体功能实现上提供了精确的解决方案。核心经验有三点-明确分工让 Claude 做架构设计Kimi 做 API 集成效率最高-降级策略AI 服务不稳定时要有本地逻辑兜底-持续迭代通过实际测试数据反哺 AI优化提示词和参数最终项目不仅完成了核心记账功能还额外实现了月度趋势图表使用 echarts-for-weixin。AI 工具不会替代开发者但善用它们可以将开发效率提升 300% 以上。希望这份记录能为你的 AI 辅助开发之旅提供参考。
三天用 Claude Kimi 完成一个微信小程序完整流程全记录背景与动机在 AI 编程工具井喷的当下Claude 和 Kimi 代表了两种不同范式的代码辅助Claude 擅长深度推理与长上下文理解Kimi 则以其庞大的知识库和精准的 API 调用能力见长。本文记录了我如何利用这两款工具在三天内从零构建一个「AI 驱动的个人记账本」微信小程序。这不是一个简单的 Hello World而是一个包含云开发、图表可视化、自然语言分类的完整应用。### Day 1需求拆解与架构设计Claude 主导第一天的工作重点是需求分析和架构设计。我向 Claude 描述了核心需求用户通过自然语言输入消费记录如“昨天中午和同事吃火锅花了280”小程序自动解析金额、类别、时间并存储到云数据库。Claude 给出了一个令人惊喜的架构建议前端微信小程序原生 ↓云函数Node.js 18 ↓AI 解析层调用 Kimi API ↓云数据库NoSQL关键设计决策是将 AI 解析放在云函数中而非客户端。这样既保护了 API Key又避免了小程序包体积膨胀。Claude 还生成了初始的项目结构并指出了微信小程序云开发的认证机制wx.cloud.init需要配置环境 ID。Claude 生成的数据库 Schema 设计javascript// cloudfunctions/addRecord/index.jsconst cloud require(wx-server-sdk)cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV })const db cloud.database()// 记录集合结构设计// { _id: 自动生成, openid: 用户唯一标识, // amount: 280.00, category: 餐饮, // description: 和同事吃火锅, // createdAt: Date.now() }exports.main async (event, context) { const wxContext cloud.getWXContext() const { parsedData } event // 数据校验金额必须为正数 if (typeof parsedData.amount ! number || parsedData.amount 0) { return { code: 400, msg: 金额格式错误 } } // 写入数据库并关联用户 openid const result await db.collection(records).add({ data: { ...parsedData, openid: wxContext.OPENID, createdAt: db.serverDate() } }) return { code: 200, id: result._id }}### Day 2AI 解析模块集成Kimi 主导第二天的核心任务是实现自然语言解析。这里 Kimi 发挥了巨大作用。我需要一个能够从任意中文句子中提取结构化数据的函数。Kimi 建议使用函数调用Function Calling能力而非简单的提示词工程。Kimi 提供的云函数实现javascript// cloudfunctions/parseExpense/index.jsconst axios require(axios)// 调用 Kimi API 进行语义解析async function callKimi(rawText) { const API_KEY process.env.KIMI_KEY const response await axios.post(https://api.moonshot.cn/v1/chat/completions, { model: moonshot-v1-8k, messages: [ { role: system, content: 你是一个记账助手。请从用户输入中提取金额、类别、时间。类别限定为餐饮、交通、购物、居住、娱乐、其他。格式化为JSON。 }, { role: user, content: rawText } ], // 关键使用 JSON 模式保证输出格式 response_format: { type: json_object }, temperature: 0.3 }, { headers: { Authorization: Bearer ${API_KEY} } }) const content response.data.choices[0].message.content return JSON.parse(content)}exports.main async (event, context) { const { text } event if (!text) return { code: 400, msg: 缺少文本 } try { const aiResult await callKimi(text) // 后处理确保金额是数字类型 const amount parseFloat(aiResult.amount) const category aiResult.category || 其他 const description aiResult.description || text return { code: 200, parsedData: { amount, category, description } } } catch (err) { console.error(Kimi 解析失败, err) // 降级方案正则表达式兜底 const fallback text.match(/(\d(\.\d)?)/) return { code: 200, parsedData: { amount: fallback ? parseFloat(fallback[0]) : 0, category: 其他, description: text } } }}这一天的关键突破是解决了Kimi 的 JSON 输出稳定性问题。最初直接使用提示词要求返回 JSON但偶尔会出现前后缀文字。通过response_format参数强制 JSON 模式后成功率提升至 99%。### Day 3前端开发与联调Claude Kimi 协同最后一天主要完成小程序前端界面。这里 Claude 负责生成页面骨架Kimi 负责细节调试。Claude 生成的首页逻辑javascript// pages/index/index.jsPage({ data: { inputText: , loading: false, records: [], totalAmount: 0 }, // 实时监听输入 onInput(e) { this.setData({ inputText: e.detail.value }) }, // 提交并解析 async submit() { const text this.data.inputText.trim() if (!text) return wx.showToast({ title: 请输入内容, icon: none }) this.setData({ loading: true }) try { // 调用云函数解析 const parseRes await wx.cloud.callFunction({ name: parseExpense, data: { text } }) // 保存到数据库 const addRes await wx.cloud.callFunction({ name: addRecord, data: { parsedData: parseRes.result.parsedData } }) if (addRes.result.code 200) { wx.showToast({ title: 记账成功, icon: success }) this.setData({ inputText: }) this.loadRecords() // 刷新列表 } } catch (err) { console.error(完整错误栈, err) wx.showModal({ title: 出错了, content: JSON.stringify(err) }) } finally { this.setData({ loading: false }) } }, // 加载记录并计算总和 async loadRecords() { const db wx.cloud.database() const res await db.collection(records) .orderBy(createdAt, desc) .limit(50) .get() // 使用 reduce 计算总额避免浮点误差 const total res.data.reduce((acc, cur) { return Math.round((acc cur.amount) * 100) / 100 }, 0) this.setData({ records: res.data, totalAmount: total }) }})### 踩坑与优化1.云函数冷启动问题首次调用 Kimi API 常常超时超过 3 秒。解决方案是在云函数中启用固定 IP并设置更长的超时时间默认 3 秒 → 改为 10 秒。2.金额精度问题由于 JavaScript 浮点运算特性0.1 0.2 0.30000000000000004。统一使用Math.round(x * 100) / 100处理。3.并发控制当用户连续快速提交时云函数可能出现重复写入。加入防抖机制前端 500ms 内只允许一次提交。### 总结这次三天开发实践证明了 Claude 和 Kimi 的互补价值Claude 的长上下文能力使其成为优秀的架构师能够理解整个项目的全貌并生成高质量的基础代码Kimi 的 API 集成能力则像一位精通外部服务的工程师在具体功能实现上提供了精确的解决方案。核心经验有三点-明确分工让 Claude 做架构设计Kimi 做 API 集成效率最高-降级策略AI 服务不稳定时要有本地逻辑兜底-持续迭代通过实际测试数据反哺 AI优化提示词和参数最终项目不仅完成了核心记账功能还额外实现了月度趋势图表使用 echarts-for-weixin。AI 工具不会替代开发者但善用它们可以将开发效率提升 300% 以上。希望这份记录能为你的 AI 辅助开发之旅提供参考。
