AI 智能旅行规划小程序 ------ 从"想去"到"出发"，一个按钮生成专属行程
旅行灵感的保质期只有 24 小时。
打开各种攻略 App，收藏夹吃灰，行程表还是空的。
这个小程序想解决的就是这件事：输入目的地和预算，几秒钟后给你一份能直接照着走的行程。
一、项目介绍
1.1 它是什么
一个基于 uni-app + Vue 3 + Vite 开发的微信小程序，主打「AI 智能旅行规划」。
你只需要告诉它四件事------去哪、玩几天、花多少钱、几个人------它就会生成一份包含每日路线、景点推荐、美食餐饮、交通耗时、天气信息的完整行程，并同步生成配套的地图路线和预算清单。
1.2 技术栈
| 分类 | 选型 |
|---|---|
| 跨端框架 | uni-app（Vue 3 版本，createSSRApp 入口） |
| 构建工具 | Vite 5 + @dcloudio/vite-plugin-uni |
| 语言 | JavaScript（<script setup> 组合式 API） |
| 样式 | WXSS 兼容的 rpx 布局，设计系统用 CSS 变量统一管理 |
| 目标平台 | 微信小程序（主包 1.72MB，远低于 2MB 限制） |
| 图标方案 | SVG 自绘 → sharp 转 96×96 PNG，多配色变体（因为小程序 <image> 不支持 fill 改色） |
1.3 为什么做成小程序
旅行是一个强场景、弱时长的场景------出门前打开看一下路线、算一下预算、收藏几个想去的地方，进了地铁就该放下手机了。小程序的即用即走特性刚好匹配，而且不需要下载安装。
同时用 uni-app 意味着这套代码可以一行不改直接编译到 H5 和 App 端，后续想扩平台也不用重写。
二、六大功能页
2.1 首页 ------ 旅行的入口
打开小程序第一眼看到的是目的地大图 + 手写体标语「去看更大的世界」，视觉上先把氛围感立住。
往下是三个功能区：
- AI 定制行程 Banner：「智能规划 · 个性推荐 · 一键生成」+「开启我的旅行计划」按钮，一句话说清楚产品价值，不啰嗦
- 热门城市横滑：东京、曼谷、新加坡、巴黎......点一下直接带着目的地跳进生成流程
- 近期热门路线：卡片式展示，右上角收藏按钮，一键加入心愿单
- 顶部搜索框 + 定位胶囊：搜索「你想去哪里？」，或者直接用当前位置
设计上的一个小心思：首页用了**手写体（KaiTi / Brush Script MT）**做标题，配合真实摄影图，比纯文字按钮的转化率高很多。
2.2 AI 行程生成 ------ 核心交互页
这是整个小程序最核心的页面，信息密度和可操作性做到了极致。
四个必填维度，全部用「零输入成本」的控件：
| 维度 | 交互方式 |
|---|---|
| 目的地 | 搜索框输入 + 一键选择热门推荐 |
| 旅行天数 | - / + 步进器，实时联动下方景点数量 |
| 预算（人均） | 四个档位卡片：¥3千以下 / ¥3千-5万 / ¥5千-1万 / ¥1万以上 |
| 同行人数 | 步进器 + 四个身份标签：情侣 / 朋友 / 家庭 / 独自旅行 |
兴趣标签多选：美食、自然风光、历史人文、购物、摄影打卡、夜生活------六个维度覆盖了绝大多数旅行偏好。
所有选择都是纯前端状态，点「生成专属行程」后会有一个 1.4 秒的加载动画（带旋转图标 + 进度条），模拟 AI 思考过程，然后直接跳转到行程页。
这里的交互设计有个细节做得很好：选了「情侣」之后，相关选项会有高亮态，用户能立刻意识到自己的选择生效了。
2.3 每日行程 ------ 把行程表变成可执行清单
这是整个产品里信息最密集也最有价值的一页。
顶部 Day 1 ~ Day 6 横向切换，选中态用蓝色实心卡片突出，每一天带具体日期。
每日头部显示：当日主题（如「圣托里尼初体验」）、一句话描述、右侧天气卡片（26°/20° + 晴转多云 + 图标）。
时间轴是核心：左侧是时间刻度（09:00-11:30 / 12:00-13:30 / 14:00-17:00），中间是虚线轨道 + 彩色节点（蓝色=上午、橙色=午餐、蓝色=下午），右侧是景点卡片，每张卡片包含：
- 实景图片
- 景点名 + 标签（如「伊亚小镇（Oia）· 上午最点」）
- 一句推荐理由
- 底部关键信息：❤️ 距离、🚗 交通方式及耗时------这个设计直接解决了「怎么去」的问题，是行程表和攻略之间最大的信息差
右上角分享和更多按钮支持导出。生成完行程会有 Toast 提示「已生成 7 天行程，为你规划了 2 人的专属路线」。
2.4 地图路线 ------ 把点连成线
行程的空间可视化。
顶部筛选栏支持四个维度切换：景点路线 / 美食推荐 / 酒店住宿 / 全部。
地图上用编号气泡 标记景点顺序，蓝色数字对应推荐顺序，橙色数字表示步行到达。每张卡片右上角标注交通方式和耗时------「步行 12 分钟」「地铁 18 分钟」「驱车 10 分钟」。
点「我的行程」可以查看完整路线规划。
底部两个模块：
- 当前位置：显示「费拉小镇 · 圣托里尼」+ 定位按钮
- 附近景点推荐：真实感极强的卡片，带距离（320m / 1.2km）、评分（★4.8 / ★4.7）、一句话描述、标签，以及收藏按钮
这个页面的意义是：行程表告诉你「去哪」，地图告诉你「怎么串联」。二者结合才是一条完整可执行的路线。
2.5 旅行预算 ------ 钱花得明明白白
旅行最大的隐性成本就是钱。这个页面把它算清楚。
顶部总预算卡片：
- 大字显示总预算 ¥12,000（带编辑图标可改）
- 彩色环形图展示已花费占比（¥8,420）
- 三个数据：已花费 / 剩余预算（蓝色高亮）/ 已使用百分比
- 底部进度条 + 「行程剩余 4 天」提示
六大分类明细，每行都有独立配色和进度条：
| 分类 | 已花 / 预算 | 占比 |
|---|---|---|
| 🏨 住宿 | ¥2,800 / ¥4,000 | 70% |
| ✈️ 交通 | ¥1,650 / ¥2,000 | 83% |
| 🍜 餐饮 | ¥1,230 / ¥2,000 | 62% |
| 🎫 门票 | ¥1,040 / ¥1,500 | 69% |
| 🛍️ 购物 | ¥980 / ¥1,500 | 65% |
| 💼 其他 | ¥720 / ¥1,000 | 72% |
每行右侧箭头可进入分类明细。底部还有「省钱小贴士」和「每日花费趋势」柱状图。
注意这里的分类图标用的是 emoji------在小程序里 emoji 渲染稳定、零体积、零请求，比图标字体省事得多。
2.6 我的收藏 ------ 你的私人旅行库
最后一块拼图：收藏。
顶部四个分类 Tab（城市 6 / 酒店 8 / 餐厅 12 / 景点），带数量统计，一眼看清自己的收藏结构。
四个内容分区，每区右上角显示数量和「查看全部」入口：
- 心动的城市：竖版四宫格，红心表示已收藏，显示国家/地区
- 收藏的酒店：横版卡片，底部带评分（4.9 / 4.8）、点评数、标签（海景房 / 水上别墅）
- 想吃的餐厅：菜品图 + 评分 + 菜系
- 种草景点：按分类排列
每张卡片右上角都有红心切换按钮，点一下即时反馈，交互零延迟。
这个页面的价值在于：旅行是一个「反复挑选」的过程。收藏夹让人在犹豫的时候有个落脚点，出发前一次性导出。
三、小结
这个项目完整覆盖了旅行规划的三件事：
想去哪 → AI 行程生成（2.2）
怎么玩 → 每日行程 + 地图路线（2.3 / 2.4）
花多少 → 旅行预算（2.5）再加上「先留着以后再说」的收藏页（2.6），形成了一个从灵感到落地的完整闭环。
技术上，它用一套 uni-app 代码同时保证了微信小程序的体积和体验，也保留了向 H5 / App 扩展的能力。
去看更大的世界 ------ 现在就出发
源代码 请私信