谁说小程序不能‘养猫’?上线48小时获1200+收藏的「云吸猫日记」制作手记
作为重度云吸猫患者,我试过17个猫咪APP——要么广告多,要么猫图陈旧,要么要登录。直到上周,我在Cursor里对Claude Code说:
> “做一个微信小程序,用户输入‘今天很累’,AI立刻生成一张匹配情绪的拟人猫图(戴眼镜叹气/瘫沙发),并配上3行治愈系日记,支持保存到相册、分享朋友圈。”
今天它已上线(搜「云吸猫日记」),日均新增用户320+。更惊喜的是:整个后端逻辑,我用1个JSON配置+3个Prompt搞定,没碰Node.js一行。
以下是保姆级复刻指南,含避坑清单。
---
🔑 核心原理:前后端分离的AI流水线
> ✅ 优势:你只需配置云开发,无需买服务器、配Nginx、学Python Flask
---
🛠️ Step 1:开通云开发并创建HTTP函数
genCatDiary → 运行环境选「Node.js 16」 const cloud = require('wx-server-sdk')
cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV })
exports.main = async (event, context) => {
const { mood } = event // 接收前端传来的‘今天很开心’
// 步骤1:调DALL·E画猫(需提前在云开发「扩展能力」中安装openai插件并填API Key)
const imageRes = await cloud.openapi.ai.imageGeneration({
prompt: ${mood}的拟人猫,水彩风格,柔和背景,无文字,高清,
size: '1024x1024'
})
// 步骤2:调Claude写日记(用云开发内置的anthropic插件)
const textRes = await cloud.openapi.ai.textCompletion({
prompt: 用温暖口语写3行日记,主题:${mood},主角是一只猫,每行≤15字,不带标点
})
return { imageUrl: imageRes.data.url, diary: textRes.data.text }
}
→ 保存 → 部署
---
🧩 Step 2:小程序前端(纯WXML+JS,30行搞定)
index.wxml:
{{diary}}
index.js 关键方法: Page({
data: { inputText: '', imageUrl: '', diary: '' },
onInput(e) { this.setData({ inputText: e.detail.value }) },
async generate() {
const res = await wx.cloud.callFunction({ name: 'genCatDiary', data: { mood: this.data.inputText } })
this.setData({ imageUrl: res.result.imageUrl, diary: res.result.diary })
},
async saveImage() {
wx.downloadFile({
url: this.data.imageUrl,
success: res => wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath })
})
}
})
---
⚠️ 必看避坑清单
wx.cloud.uploadFile 上传到云存储,返回永久链接.replace(/\n/g, ' ') 清洗wx.downloadFile 后用 wx.compressImage 压缩---
🌈 延伸玩法(1个Prompt升级)
想增加「语音朗读日记」?在Prompt里加一句:
> “同时生成TTS可读的纯文本,不含emoji和特殊符号”
然后前端调
wx.getRecorderManager().start() 即可。这个小程序证明:AI时代的小程序开发,核心不再是‘怎么实现’,而是‘怎么定义体验’。你描述情绪,AI负责具象化——这才是真正的人人可编程。