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

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

站长
2026年4月11日 · 阅读 687 · 点赞 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,输入:

请生成一个纯前端微信小程序,满足:
1. 所有数据存在本地storage,无需后端、无需云开发、无需登录
2. 使用微信原生map组件(<map>),中心坐标设为北京市朝阳区三里屯街道(39.913,116.455)
3. 用<cover-view>叠加5个可点击的<cover-image>图标,每个图标旁显示文字:「朝阳路7号」、「甜水园北里2栋后」等(共5个预设点)
4. 点击任一图标,弹出wx.showModal显示该点的喂食时间(如:每日早7:00 & 晚18:30)、联系人(张阿姨 138****5678)、注意事项(请勿投喂牛奶)
5. 页面顶部加一个按钮:「上报新点位」,点击后调用wx.chooseLocation()获取位置,再用wx.setStorageSync存入本地数组(key='feedPoints')
6. 输出完整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个社区群,但没人点。直到她在首页加了这一行小字:

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

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

    <text selectable="true">张阿姨 138****5678</text>
    

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

    ---

    📈 第五步:接到定制单前,先做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心法

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

  • 用微信官方文档里的原生组件名作关键词<map><cover-view>wx.chooseLocation

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

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

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

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

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

    分享:

    👥 相关文章

    ‘扫码查快递’页面为何被物业拒收3次?第4次上线靠把‘请输入手机号’改成‘您的尾号是?’——微信表单里的身份信任链重建

    从3次被拒到当天上线,关键不在技术而在心理:用‘手机号后四位’替代完整手机号输入,提升中老年用户信任感与填写率。

    2026/4/23 · 阅读 1686

    删掉这行`<meta name="viewport" content="width=device-width">`后,我的‘宠物疫苗记录’网页在iPhone上突然能横屏看了——微信里最危险的‘响应式假象’

    一行被所有教程奉为圭臬的meta标签,竟是微信网页横屏显示的隐形杀手;本文用真实故障还原排查过程,并给出3种安全替代方案。

    2026/4/23 · 阅读 1382

    凌晨1:23,我把‘阳台养花浇水提醒’网页发到园艺群——3小时后,7位邻居问‘能同步到我家小米音箱吗?’

    一个零代码网页如何接入IoT设备?本文用Claude Code生成兼容Web Speech API的语音播报页,让AI提醒‘该浇薄荷了’,真正走进家庭生活流。

    2026/4/23 · 阅读 2532

    5个让社区团长抢着转发的「AI生成海报」救命技巧:不修图、不PS、不登录,扫码→说话→得高清PNG

    告别Canva注册和字体版权焦虑,用Claude Code+微信直出海报,聚焦真实高频场景:团购预告、活动通知、失物招领。

    2026/4/23 · 阅读 1606

    为什么我把‘扫码填表’按钮从蓝色换成橙色后,社区跳蚤市场登记率翻了2.8倍?——微信里最被低估的色彩心理学开关

    一次无心的按钮配色调整,意外撬动用户行为;本文拆解微信生态下按钮色彩对中老年用户的点击转化影响,并附可直接复用的AI Prompt与CSS代码。

    2026/4/23 · 阅读 2962