👥
👥
👥
👥

为什么我的‘小区流浪猫喂养地图’小程序上线3天就被街道办转发?——原来Prompt里藏了这句‘请生成微信原生组件,不依赖云开发’

站长
2026年4月11日 · 阅读 527 · 点赞 129 · 预计 5 分钟
分享:

为什么我的‘小区流浪猫喂养地图’小程序上线3天就被街道办转发?

> “你这个小程序,连我们社区网格员手机上没装微信开发者工具都能直接扫码进后台改点位——太适合一线了。”
> ——上周五,朝阳区某街道办社工加我微信时的第一句话

这不是运气。是我在Claude Code的Prompt里,悄悄埋了一颗“微信原生锚点”。

今天这篇QA,不讲原理、不画架构图,只带你复刻一个真实接单场景:零基础学员小林(28岁,幼儿园老师),用1个下午+1次Prompt迭代,做出被3个社区自发收藏的‘流浪猫喂养点地图’小程序,并收到街道办定制需求报价单。

---

🔍 第一步:先问自己——用户真需要「地图」吗?

别急着写代码。打开Cursor,新建prompt.md,写下第一行:

作为一位社区工作者,我最怕什么?
  • 手机没装开发者工具

  • 不会上传云函数

  • 每次改一个喂食点要找人重发版本

  • 老人志愿者不会操作后台

  • → 这就是你的Prompt起点。

    很多新手一上来就让AI“生成带地图的小程序”,结果Claude Code默认调用高德/腾讯地图API + 云数据库 + 登录态校验——全错方向。街道办用不了,阿姨们更不会扫。

    ✅ 正确思路:把「微信原生组件」当唯一接口层。

    ---

    🛠️ 第二步:写出能触发微信原生能力的Prompt(关键!)

    在Cursor中新建app.js,光标悬停,按Cmd+K(Mac)或Ctrl+K(Win)唤出Claude Code,输入:

    请生成一个纯前端微信小程序,满足:
  • 所有数据存在本地storage,无需后端、无需云开发、无需登录

  • 使用微信原生map组件(),中心坐标设为北京市朝阳区三里屯街道(39.913,116.455)

  • 叠加5个可点击的图标,每个图标旁显示文字:「朝阳路7号」、「甜水园北里2栋后」等(共5个预设点)

  • 点击任一图标,弹出wx.showModal显示该点的喂食时间(如:每日早7:00 & 晚18:30)、联系人(张阿姨 138****5678)、注意事项(请勿投喂牛奶)

  • 页面顶部加一个按钮:「上报新点位」,点击后调用wx.chooseLocation()获取位置,再用wx.setStorageSync存入本地数组(key='feedPoints')

  • 输出完整wxml+wxss+js,所有样式用内联style,不引用外部文件

  • ⚠️ 注意:必须明确写出“无需后端、无需云开发、无需登录”和“使用微信原生map组件”——这是让Claude Code放弃自动引入复杂方案的开关语句。

    Claude Code会在3秒内返回全部三端代码。复制粘贴到pages/index/下即可。

    ---

    📱 第三步:3分钟真机测试(比模拟器更关键)

    别信开发者工具的“编译成功”。做两件事:

  • 在微信中打开「微信开发者工具 → 项目详情 → 本地设置 → 关闭ES6转ES5」(避免Promise报错)

  • 真机扫码:用另一台手机微信扫二维码 → 点击「上报新点位」→ 选中你家楼下 → 返回首页 → 刷新页面 → 新图标已出现 ✅
  • 如果失败?大概率是Prompt漏写了wx.setStorageSync的try-catch。补上:

    try {
    const points = wx.getStorageSync('feedPoints') || [];
    points.push({ name, address, time, contact, note });
    wx.setStorageSync('feedPoints', points);
    } catch (e) {
    wx.showToast({ title: '保存失败,请重试', icon: 'none' });
    }

    ---

    💡 第四步:让街道办主动转发的“隐藏设计”

    小林上线后加了3个社区群,但没人点。直到她在首页加了这一行小字:

    > 🌟【社区共建】点击任意点位 → 长按文字 → 可直接复制电话给志愿者

    ——这是微信原生属性,Claude Code默认不加。手动补上:

    张阿姨 138****5678

    第二天,三个群同时转发,配文:“群里谁家附近有猫?填这个就能加!”

    ---

    📈 第五步:接到定制单前,先做1件小事

    app.js里所有硬编码地址,替换成变量:

    const COMMUNITY_NAME = '三里屯街道';
    const DEFAULT_CENTER = { latitude: 39.913, longitude: 116.455 };

    然后在Prompt末尾加一句:

    > “请将COMMUNITY_NAME和DEFAULT_CENTER设为可配置常量,方便我替换为其他街道”

    ——这就是报价单里“支持快速部署至XX街道”的底气。

    上周,她以800元/街道的价格,接了朝阳区4个街道的定制版,总耗时:2小时(改4次常量+重打包)。

    ---

    ✅ 总结:3句Prompt心法

  • 永远先写用户痛点,再写技术需求(例:“网格员手机没装开发者工具” > “需要地图功能”)

  • 用微信官方文档里的原生组件名作关键词wx.chooseLocation

  • 禁用词比启用词更重要:明写“无需云开发、无需登录、不调API、纯storage”才能锁死轻量级路径
  • 你现在就可以打开Cursor,用上面那段Prompt跑一次。不需要懂JavaScript,只要会复制粘贴+真机扫码。人人都是程序员,从让街道办转发开始。

    (附:小林的源码已开源,[github.com/woshird/cat-map-demo](https://github.com/woshird/cat-map-demo),含全部Prompt历史记录)

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