谁说小程序不能‘养猫’？上线48小时获1200+收藏的「云吸猫日记」制作手记

作为重度云吸猫患者，我试过17个猫咪APP——要么广告多，要么猫图陈旧，要么要登录。直到上周，我在Cursor里对Claude Code说：

> “做一个微信小程序，用户输入‘今天很累’，AI立刻生成一张匹配情绪的拟人猫图（戴眼镜叹气/瘫沙发），并配上3行治愈系日记，支持保存到相册、分享朋友圈。”

今天它已上线（搜「云吸猫日记」），日均新增用户320+。更惊喜的是：整个后端逻辑，我用1个JSON配置+3个Prompt搞定，没碰Node.js一行。

以下是保姆级复刻指南，含避坑清单。

---

🔑 核心原理：前后端分离的AI流水线

前端（小程序）：收集文字 → 发送至「微信云开发」HTTP函数（免运维）

中间层（云函数）：接收文字 → 调用DALL·E API（OpenAI）生成图 → 调用Claude生成文案 → 返回图文组合

前端渲染：展示图片+文字+「保存图片」按钮（wx.canvasToTempFilePath）

> ✅ 优势：你只需配置云开发，无需买服务器、配Nginx、学Python Flask

---

🛠️ Step 1：开通云开发并创建HTTP函数

微信开发者工具 → 顶部「云开发」→「开通」（选择按量付费，0元起步）

云开发控制台 → 「云函数」→「新建函数」→ 名称填 genCatDiary → 运行环境选「Node.js 16」

粘贴以下代码（已封装DALL·E+Claude双调用）：

   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：

  <view class="container">
    <input bindinput="onInput" placeholder="比如：今天想辞职..." />
    <button bindtap="generate">☁️ 吸一口猫气</button>
    <image wx:if="{{imageUrl}}" src="{{imageUrl}}" mode="aspectFill" />
    <view wx:if="{{diary}}" class="diary">{{diary}}</view>
    <button wx:if="{{imageUrl}}" bindtap="saveImage">📥 保存到相册</button>
  </view>
  

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 })
      })
    }
  })
  

---

⚠️ 必看避坑清单

❌ DALL·E返回图URL是临时链接（1小时过期）→ 解决：云函数中用 wx.cloud.uploadFile 上传到云存储，返回永久链接

❌ Claude返回带换行符 → 解决：前端用 .replace(/\n/g, ' ') 清洗

❌ 图片太大导致保存失败 → 解决：wx.downloadFile 后用 wx.compressImage 压缩

---

🌈 延伸玩法（1个Prompt升级）

想增加「语音朗读日记」？在Prompt里加一句：
> “同时生成TTS可读的纯文本，不含emoji和特殊符号”
然后前端调 wx.getRecorderManager().start() 即可。

这个小程序证明：AI时代的小程序开发，核心不再是‘怎么实现’，而是‘怎么定义体验’。你描述情绪，AI负责具象化——这才是真正的人人可编程。