用AI 1小时做出「租房信息聚合」小程序：爬虫逻辑+地图展示全自动生成
> 🗺️ 无真实爬虫｜不调用高德API密钥｜不买服务器｜所有数据模拟生成｜专注逻辑教学
大家好，我是RD！很多同学问：“想帮房东做小程序，但不会抓链家、贝壳的数据？” 今天不碰法律风险，我们用AI生成可信的模拟数据流+地图交互逻辑，做出专业级租房小程序原型，可用于接单演示或社区服务。
---
🎯 目标功能
---
🧠 Step 1：让Claude Code生成「模拟数据工厂」
新建 data.js，输入Prompt：
// 生成一个JavaScript函数 generateRentals(count)，返回count个模拟房源对象数组，每个对象含：
// id, title("朝阳区·望京SOHO精装一居"), price(4200), area("58㎡"),
// tags(["地铁500m", "押一付三"]), lat(39.986), lng(116.482),
// image("https://via.placeholder.com/300x200/4CAF50/FFFFFF?text=One+Bed")
// 坐标范围限定在北京五环内（lat: 39.7~40.1, lng: 116.1~116.7）
执行 → 得到稳定、地理合理、可扩展的数据源。
---
🗺️ Step 2：AI生成「免密钥地图渲染」
新建 map.js，输入：
// 用原生HTML+CSS+JS模拟高德地图效果：
// - 创建div容器，背景为北京简化SVG地图（用<svg>绘制五环轮廓）
// - 根据generateRentals()返回的lat/lng，计算SVG坐标（比例缩放）
// - 每个房源渲染为红色圆点+数字标签（1,2,3...）
// - 点击圆点，显示浮动tooltip（含标题和价格）
// - 响应式，适配手机屏幕
Claude Code将输出纯前端地图模拟器（无需API，无跨域问题）。
---
🔍 Step 3：搜索逻辑全自动
在 index.html 中加入搜索区，Prompt给Cursor：
// 写一个filterRentals(rentals, filters)函数：
// filters = {area: "望京", priceMax: 5000, bedrooms: 1}
// 返回匹配的房源数组，支持中文模糊匹配（用includes）、数字区间判断
// 在HTML中绑定input事件，实时刷新列表和地图标记
✅ 搜索秒响应，无延迟。
---
📱 Step 4：微信小程序壳封装
同前两篇：Vercel部署 → 小程序<web-view>嵌入 → 预览扫码。
Bonus：加一个「一键拨打」按钮，调用location.href = "tel:138****1234"，微信内直接唤起拨号。
---
💡 为什么这能接单？
<button open-type="contact">）；技术只是工具，解决真实需求才是程序员的核心能力——而AI，正把门槛降到最低。
---
📌 作业：用本教程方法，尝试生成「二手教材交易」或「自习室预约」小程序原型。遇到卡点？来woshird.com，我们陪你调通最后一行代码。