一生爱亚雪1. 项目概述：AI记账助手微信小程序开发全流程
这个项目源于我在个人财务管理中遇到的痛点——传统记账App要么操作繁琐，要么分类不够智能。经过两个月的业余开发，我基于Claude Code和微信小程序原生框架，完成了一个能自动分类消费记录的AI记账助手"miaozhang"。
核心功能亮点在于：
- 通过拍照/截图自动识别账单关键信息（金额、商家、品类）
- 基于Claude Code的NLP能力实现智能分类（餐饮、交通、娱乐等12大类）
- 可视化报表支持按日/周/月多维分析
- 微信生态无缝衔接（支持聊天记录快速记账）
开发过程中踩过的坑包括：微信云开发数据库性能优化、Claude Code的API调用频次控制、iOS/Android端差异适配等。下面将完整分享从环境搭建到上线的全流程。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 开发环境与工具链配置
2.1 基础环境准备
推荐使用以下开发环境组合：
- 操作系统：macOS Monterey 12.6+ 或 Windows 11 WSL2
- 开发工具：VSCode 1.85+ 配合微信开发者工具稳定版
- Node.js环境：建议LTS版本（当前v18.16.0）
注意：微信小程序要求Node.js版本不得高于18.x，新版20.x存在兼容性问题
2.2 Claude Code接入配置
在项目根目录创建claude服务层：
bash复制mkdir -p services/claude && cd services/claude
npm install @anthropic-ai/sdk dotenv
环境变量配置示例（.env文件）：
ini复制CLAUDE_API_KEY=your_api_key_here
CLAUDE_MODEL=claude-3-sonnet-20240229
CLAUDE_MAX_TOKENS=4000
2.3 微信小程序项目初始化
使用微信官方模板初始化：
bash复制# 全局安装工具链
npm install -g @vue/cli @vue/cli-service-global
# 创建项目
vue create -p mpvue/mpvue-quickstart miaozhang
cd miaozhang && npm install
关键依赖版本锁定：
json复制"dependencies": {
"mpvue": "^2.0.0",
"flyio": "^0.6.14",
"dayjs": "^1.11.7",
"weui-miniprogram": "^1.2.3"
}
3. 核心功能模块实现
3.1 账单OCR识别模块
采用微信原生API+Claude Code多模态处理：
javascript复制// pages/scan/scan.js
wx.chooseImage({
success: async (res) => {
const file = res.tempFiles[0]
const base64 = await wx.getFileSystemManager().readFileSync(file.path, 'base64')
const response = await claude.analyzeImage({
model: 'claude-3-vision',
max_tokens: 1000,
messages: [
{
role: "user",
content: [
{
type: "image",
source: {
type: "base64",
data: base64,
},
},
{
type: "text",
text: "提取账单中的金额、商家、日期信息，JSON格式输出"
}
]
}
]
})
this.setData({ ocrResult: JSON.parse(response.content[0].text) })
}
})
3.2 智能分类算法
在Claude Code提示工程中设计分类规则：
python复制# services/claude/classifier.py
classification_prompt = """请根据以下消费记录判断分类（仅返回分类编号）：
1-餐饮 2-交通 3-购物 4-娱乐 5-住房 6-医疗
7-教育 8-转账 9-投资 10-收入 11-其他 12-还款
记录内容：{description}
分析思路："""
3.3 数据存储架构
采用微信云开发+本地缓存双写策略：
javascript复制// utils/db.js
const db = wx.cloud.database()
const cacheKey = 'miaozhang_cache'
async function syncToCloud(records) {
try {
await db.collection('bills').add({ data: records })
wx.setStorageSync(cacheKey, []) // 清空缓存
} catch (e) {
// 失败时存入本地缓存
const cached = wx.getStorageSync(cacheKey) || []
wx.setStorageSync(cacheKey, [...cached, ...records])
}
}
4. 性能优化实践
4.1 图片压缩方案
针对不同平台采用差异化处理：
javascript复制// utils/image.js
function compressImage(path) {
return new Promise((resolve) => {
if (wx.getSystemInfoSync().platform === 'ios') {
wx.compressImage({
src: path,
quality: 70,
success: resolve
})
} else {
// Android使用更激进的压缩
wx.compressImage({
src: path,
quality: 50,
success: resolve
})
}
})
}
4.2 Claude API调用优化
实现请求批处理和缓存：
javascript复制// services/claude/api.js
const cache = new Map()
async function batchClassify(descriptions) {
const cachedResults = descriptions.map(desc => cache.get(desc))
if (cachedResults.every(Boolean)) return cachedResults
const prompt = `批量分类：\n${descriptions.map((d,i) => `${i+1}. ${d}`).join('\n')}`
const res = await claude.completions.create({ prompt })
res.choices[0].text.split('\n').forEach((line, i) => {
cache.set(descriptions[i], line.trim())
})
return res.choices[0].text.split('\n').map(l => l.trim())
}
5. 部署上线全流程
5.1 微信小程序提审要点
必须完成的配置项检查清单：
- 隐私协议弹窗（需包含Claude API使用说明）
- 用户授权scope清单（相册、摄像头、存储）
- 内容安全域名配置（Claude API endpoint）
- 支付功能资质（若涉及会员体系）
5.2 服务端部署方案
推荐使用腾讯云开发TCB方案：
yaml复制# cloudbaserc.json
{
"envId": "your-env-id",
"functionRoot": "cloud/functions",
"functions": [
{
"name": "claude-proxy",
"timeout": 20,
"runtime": "Nodejs12.16",
"memorySize": 256
}
]
}
5.3 监控与运维
必备的监控指标：
- 日均API调用量（控制在Claude免费限额内）
- 图片识别成功率（需维持>85%）
- 分类准确率（通过人工抽样校验）
6. 典型问题排查指南
6.1 常见错误代码处理
markdown复制| 错误码 | 场景 | 解决方案 |
|--------|---------------------|-----------------------------------|
| 907501 | 验证码服务异常 | 检查短信模板是否审核通过 |
| 500101 | 云函数调用超时 | 增加TCB函数内存到512MB |
| 400113 | 图片尺寸过大 | 强制压缩到2000px以下 |
| 403001 | Claude API限流 | 实现指数退避重试机制 |
6.2 iOS特定问题处理
针对media_err_network视频加载错误：
javascript复制// app.js
wx.onNetworkStatusChange((res) => {
if (!res.isConnected) {
wx.showToast({ title: '网络已断开', icon: 'none' })
}
})
// 视频组件增加属性
<video
controls
enable-danmu
autoplay
muted
show-center-play-btn
></video>
7. 进阶优化方向
7.1 离线能力增强
实现IndexedDB本地存储方案：
javascript复制// utils/offline.js
const openDB = () => {
return new Promise((resolve) => {
const request = indexedDB.open('miaozhangDB', 3)
request.onupgradeneeded = (e) => {
const db = e.target.result
if (!db.objectStoreNames.contains('bills')) {
db.createObjectStore('bills', { keyPath: 'id' })
}
}
request.onsuccess = (e) => resolve(e.target.result)
})
}
7.2 大模型微调方案
使用Claude Code的fine-tuning API：
python复制# scripts/fine_tune.py
training_data = [
{
"input": "星巴克消费98元",
"output": "{\"category\":1,\"amount\":98,\"merchant\":\"星巴克\"}"
},
# 至少200条样本...
]
response = client.fine_tuning.create(
training_data=training_data,
model="claude-3-sonnet",
suffix="miaozhang-v1"
)
这个项目从技术选型到最终上线历时两个月，最大的收获是理解了如何在实际产品中平衡AI能力与移动端限制。有几个关键经验值得分享：
- 微信小程序的image组件在iOS上存在内存泄漏问题，需要手动调用
wx.releaseImage()释放资源 - Claude Code的vision模型对中文小票识别准确率约92%，但需要引导用户拍摄清晰照片
- 云开发数据库在超过1万条记录时查询性能明显下降，建议按月分表存储
完整项目源码已脱敏处理，可以关注我的GitHub仓库获取核心模块实现。对于想尝试AI+小程序开发的同行，建议先从简单的文本交互功能入手，逐步增加复杂度。