我妈说‘这小程序真灵’——我用AI做了个「广场舞曲库」,3天被27个阿姨群转发

我妈说‘这小程序真灵’——我用AI做了个「广场舞曲库」,3天被27个阿姨群转发

站长
2026年4月6日 · 阅读 2856 · 点赞 39 · 预计 5 分钟
分享:

妈妈说“这小程序真灵”:3天上线「广场舞曲库」小程序实录

上周五晚饭时,我妈边切黄瓜边念叨:“王姨她们跳舞老找不到新曲子,手机里存一堆MP3,点半天才出来一首……要是能像抖音那样一搜就播,多好。”

我放下筷子,掏出手机打开Cursor,对Claude Code说了一句:

> “生成一个微信小程序,首页是搜索框+热门曲库瀑布流,点击播放带进度条和收藏按钮,支持离线缓存前10首,UI清爽复古红金配色,适配中老年手指操作。”

23分钟后,扫码预览——曲库已可滚动,点开《最炫民族风》自动播放,收藏图标亮了,切到飞行模式再点播放,依然响!

这不是Demo,是真实上线的小程序(搜「舞曲快找」已通过审核)。今天分享零基础也能复刻的完整路径,连Git都不会按的阿姨级用户,照着做也能跑通。

---

✅ 第一步:准备环境(5分钟)


  • 安装 微信开发者工具(最新稳定版)

  • 安装 Cursor(选「Sign in with GitHub」,绑定免费Claude 3.5 Sonnet权限)

  • 微信公众平台注册「小程序账号」(邮箱注册→实名认证→获取AppID,全程免费)
  • > 💡小贴士:不用备案!个人类型小程序完全可发布,仅限体验版或正式版,无流量限制。

    ---

    ✅ 第二步:用Claude Code生成骨架(关键!)


    在Cursor新建文件夹 dance-music-app → 新建 prompt.md,粘贴以下Prompt(已实测优化):

    你是一个资深微信小程序架构师。请生成一套完整、可直接运行的微信小程序代码,要求:
    1. 使用原生小程序语法(wxml/wxss/js/json),不依赖任何框架
    2. 功能:首页搜索框(模糊匹配曲名/歌手)、热门曲库瀑布流(12条)、点击播放(使用wx.getBackgroundAudioManager)、长按收藏(本地storage)、下拉刷新更新列表
    3. UI:字体≥18px,按钮高度≥48rpx,红色主色(#d32f2f),金色点缀(#ffca28),所有交互区域留白充足
    4. 离线支持:首次加载后,自动缓存前10首音频URL及元数据到wx.setStorage
    5. 提供模拟数据:[{id:1,name:"最炫民族风",singer:"凤凰传奇",url:"https://xxx.mp3"},...]
    6. 输出结构:/pages/index/index.wxml, .wxss, .js, .json 四文件内容,无需解释
    

    按下 Ctrl+K(Windows)或 Cmd+K(Mac),等30秒——Claude Code会输出4个完整文件内容。全选 → 右键「Save As」→ 分别保存为对应路径(注意目录层级)。

    ---

    ✅ 第三步:微调 + 替换音频资源(10分钟)


  • 打开 index.js,找到 mockData 数组,把示例URL替换成你自己的音频(推荐用腾讯云COS免费桶上传MP3,获取外链;或先用免费BGM网站下载3首,拖进项目 /static/audio/ 目录)

  • 修改 index.wxml<audio> 标签的 src 绑定为 {{currentSong.url}}(Claude已写好,仅需确认)

  • index.wxss 末尾加一句:

  •   .song-item { padding: 20rpx 30rpx; }
      

    ——让阿姨们戳得更稳

    ---

    ✅ 第四步:调试 & 真机测试(重点!)


  • 微信开发者工具 → 顶部菜单「工具」→「构建npm」(勾选「使用npm模块」,虽未用npm但防报错)

  • 点击「编译」→ 出现二维码 → 微信扫码 → 立即试用

  • 测试三件事:

  • 1. 搜索“江南Style”,是否出现结果?
    2. 点击播放后,切后台再切回,音乐是否继续?
    3. 关掉WiFi,重复步骤2,是否仍可播放缓存曲目?✅

    若失败?90%是音频域名未配置:在「开发管理→开发设置→服务器域名」中,把你的COS域名或BGM网站域名填进 request合法域名downloadFile合法域名

    ---

    ✅ 第五步:提交审核(1分钟)


  • 开发者工具右上角「上传」→ 版本号填 1.0.0 → 备注“广场舞曲库v1,纯前端,无后端”

  • 公众平台 → 版本管理 → 提交审核 → 类目选「工具-生活工具」→ 描述写:“为中老年用户提供免安装、即搜即播的广场舞伴奏服务,所有音频经版权方授权使用”(我们用的是CC0协议免费音源,合规)
  • 平均审核时长:24小时。我妈昨天刚在群里发了小程序码,今天已有27个舞蹈队群主动索要链接。

    ---

    🌟为什么这个案例特别适合新手?


  • ❌ 不需要API密钥(没调用任何外部接口)

  • ❌ 不需要数据库(全部本地storage)

  • ❌ 不需要部署服务器(微信云开发非必须)

  • ✅ 全流程由自然语言驱动,改Prompt=改功能

  • ✅ 界面适配中老年,反而规避了复杂动效和响应式陷阱
  • 下次你想做「社区菜价播报」「老年大学课表」「医保报销指南」?复制本Prompt,替换关键词,再跑一遍——你不是在写代码,是在指挥AI搭积木

    > 文末彩蛋:我把本项目的Prompt模板、音频资源包、审核话术整理成PDF,关注「我是RD」公众号,回复【舞曲】自动获取。

    结语


    编程的终极形态,不是键盘敲出符号,而是把想法清晰翻译成AI能听懂的语言。我妈不会写JS,但她知道“要能搜、要大声、要关网也能放”——这就够了。人人都是程序员,从听懂需求开始。

    站长
    人人都是程序员,站长

    喜欢这条 tip?打赏作者一杯咖啡

    你的支持是持续更新的动力

    分享:

    📱 相关文章

    不写代码也能上线「广场舞教学跟练」小程序?我的3个微信原生能力作弊技巧

    避开复杂视频处理,用微信「视频号直播回放」+「进度条锚点」+「语音跟读」三招,零代码做出高互动广场舞小程序,阿姨们自发建群催更新。

    2026/4/8 · 阅读 3233

    深夜改完「自习室座位监控」小程序,凌晨2点收到3条微信:‘能加个‘考研倒计时’吗?’

    一个为自家考研党做的座位查询工具,因实时显示「距考研还有XX天XX小时」意外引爆需求——AI快速叠加功能的秘诀是「状态驱动Prompt」。

    2026/4/8 · 阅读 1863

    A vs B:手写「社区旧物置换」小程序 vs AI生成版——我赌赢了17小时,还顺手接了物业的改造单

    对比传统开发与AI生成的「社区闲置交换」小程序:从需求文档到上线,AI方案快17小时,且用户留存率高2.3倍——关键在「微信聊天式交互」设计。

    2026/4/8 · 阅读 2128

    5个让奶茶店老板抢着试用的「排队叫号」小程序模板(扫码即用,连WiFi密码都不用输)

    针对街边奶茶店「无电脑、无IT人员、怕复杂」痛点,5款零配置AI生成模板:手机扫码→自动绑定店铺→客人微信取号,全程无需输入任何账号密码。

    2026/4/8 · 阅读 3332

    为什么我改了3次‘宠物疫苗提醒’小程序,第4次才被兽医诊所主动采购?

    一个本想给自家猫狗做的小工具,意外成为本地3家宠物诊所的SaaS轻量版——关键在AI生成时埋入了‘服务留痕’和‘扫码即填’设计。

    2026/4/8 · 阅读 2881