用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地图（用
// - 根据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部署 → 小程序嵌入 → 预览扫码。

Bonus：加一个「一键拨打」按钮，调用location.href = "tel:138****1234"，微信内直接唤起拨号。

---

💡 为什么这能接单？

技术只是工具，解决真实需求才是程序员的核心能力——而AI，正把门槛降到最低。

---

📌 作业：用本教程方法，尝试生成「二手教材交易」或「自习室预约」小程序原型。遇到卡点？来woshird.com，我们陪你调通最后一行代码。