📱
📱
📱
📱

谁说小程序不能‘养猫’?我用AI做了个「云吸猫日记」,每天自动生成10张猫图+心情笔记

站长
2026年4月6日 · 阅读 998 · 点赞 74 · 预计 4 分钟
分享:

谁说小程序不能‘养猫’?上线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

  •   



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

    ---

    ⚠️ 必看避坑清单


  • ❌ 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负责具象化——这才是真正的人人可编程。

    站长
    人人都是程序员,站长
    分享: