话不多说，直接了当，我是来推广我的小程序的： 直接微信扫码即可
🥢 引言：人类终极难题
每天中午 12 点（当然也可能是11点半，嘿嘿），办公室里总会响起那个直击灵魂的拷问： “中午吃什么？”
随便？没胃口？太贵？太远？
为了解决这个人类终极难题，作为一名程序员，我决定用代码来给出答案。也就是今天我要介绍的这款硬核小程序 —— “饭点-今天吃什么”（别问为啥加饭点，问就是你没认证过微信小程序名称。。。）。
它不仅能帮你通过“幸运大转盘”随机选出美食，还能一键搜索附近的餐厅，甚至顺手帮你领个外卖红包 这里是重点，互惠互利 欢迎捧场 哈哈哈哈。
今天这篇文章，既是一篇产品安利，更是一份实战技术复盘。我将分享从 0 到 1 开发这款小程序的完整心路历程，特别是接入天地图 (Tianditu) 时遇到的那些“坑”。
📱 产品功能秀
1. 沉浸式“选饭”体验
拒绝枯燥的列表，我们采用了动态随机抽取的方式。点击“开始选择”， emoji 美食图标快速滚动，伴随着震动反馈，最终定格在你的“今日天选之菜”上。
2. 真·附近美食搜索
选好了吃“火锅”，但附近哪家强？ 利用 LBS (Location Based Service) 技术，直接根据你当前的经纬度，搜索方圆 3 公里内的相关餐厅。
3. 外卖回血神器
集成了美团/饿了么外卖联盟，在查看餐厅详情时，可以直接跳转小程序领取大额红包。吃饭省钱，才是硬道理。
🛠️ 技术栈揭秘
- 框架: Taro (React 语法，一套代码多端运行)
- 语言: TypeScript (类型安全，维护之光)
- 样式: SCSS (CSS 预处理)
- 地图服务: 天地图 (Tianditu) —— 国家地理信息公共服务平台 (本文重点！)
- 部署: 微信小程序
🧗♂️ 踩坑实录：为什么是天地图？
在开发“附近餐厅”功能时，我最初考虑过腾讯地图或高德地图。但对于个人开发者来说，天地图是一个极佳的选择：
- 完全免费：对个人开发者非常友好，配额充足。
- 数据权威：国家队出品，数据质量有保障。
- 接口纯粹：没有过多的商业广告干扰。
🚧 坑位一：HTTP 400/403 权限噩梦
在对接天地图 v2 搜索接口时，我遭遇了顽固的 400 Bad Request 和 403 Forbidden。
现象： 开发者工具里能跑通，真机调试就报错；或者 Postman 能通，代码里死活不行。
原因分析： 天地图的 Key 分为“浏览器端”和“服务端”。
- 浏览器端：通过 Referer (来源页面) 验证身份。小程序环境（特别是
Taro.request）本质上更接近服务器请求，或者 Referer 是servicewechat.com，容易被拦截。 - 服务端：通过 IP 白名单验证。
解决方案：
- 去天地图控制台申请 “服务端 (Server)” 类型的 Key。
- 白名单暂时留空（开发调试期），或者填入公网出口 IP。
- 代码中遇到
301012错误码时，增加友好的 UI 弹窗提示，告诉开发者去换 Key。
// 错误处理精华片段
if (data && (data.msg === "权限类型错误" || data.code === "301012")) {
Taro.showModal({
title: "配置错误",
content: "检测到天地图 Key 类型为'浏览器端'...\n请修改为 [服务端(Server)]",
showCancel: false,
});
}
🚧 坑位二：坐标系的“巴别塔”
地图开发最大的痛点莫过于坐标系转换。
- 微信/Taro 获取的坐标：默认是
gcj02(火星坐标系) 或wgs84。 - 天地图 API 需要的坐标：
CGCS2000(基本等同于WGS84)。
如果直接把 gcj02 的坐标传给天地图，你的位置可能会飘到几百米外的河里。
最终方案：
// 1. 获取定位时直接指定 type 为 wgs84
const loc = await Taro.getLocation({ type: "wgs84" });
// 2. 传给天地图 API
const postData = {
pointLonlat: `${loc.longitude},${loc.latitude}`,
queryType: 3, // 周边搜索
// ...
};
🚧 坑位三：被封禁的 getLocation
发布上线后，突然发现无法获取定位，报错 getLocation:fail appid privacy api banned。
这是因为微信现在的隐私合规要求非常严格。
解决： 必须在微信公众平台后台 -> 设置 -> 用户隐私保护指引 中，明确声明你会使用“位置信息”，并填写用途（如：推荐附近餐厅）。注意： 必须审核通过后才能生效！
💰 变现思考：外卖 CPS
作为一个工具类小程序，“用完即走”是常态。为了增加一点“睡后收入”，我接入了外卖 CPS。
在餐厅详情页，没有生硬的弹窗广告，而是提供了“美团红包”和“饿了么红包”两个按钮。用户领券下单，开发者获得佣金，餐厅获得订单，三赢。
核心代码非常简单，使用 Taro.navigateToMiniProgram 跳转到联盟指定的小程序路径即可：
Taro.navigateToMiniProgram({
appId: "wxde8ac0a21135c07d", // 美团小程序ID
path: "/index/pages/h5/h5?weburl=...", // 你的推广链接
});
具体的接入过程虽然比较曲折，但在money的催动下还是接进去了，哈哈哈，如果您接入有任何问题欢迎留言私信，哈哈哈，知无不言
🚀 结语
“今天吃什么”虽然功能简单，但它涵盖了定位服务、第三方 API 对接、跨端跳转以及隐私合规等小程序开发的完整流程。
对于想入门 Taro 开发或者想做独立开发者的朋友来说，这是一个非常好的练手项目。
如果你也觉得这个项目有趣，欢迎点赞、转发、在看！
