AI 开发小众旅游小程序

AI 开发小众旅游小程序 AI 开发小众旅游小程序 Modified July 20, 2025 • 集成通义千问 API 调用 3、关键问题突破 重大问题：地理推荐不准确 • 用户反馈："天津定位却推荐北京景点，完全不对" • 问题分析：AI 对地理位置约束理解不准确 • 用户要求："必须推荐天津本地和周边的景点" AI 优化过程： 1. 第一版 prompt：过于简单，缺乏地理约束 2. 用户指正："这些都不是天津的景点！" 3. 第二版优化：添加明确的地理边界限制 4. 最终效果：准确返回天津本地景点（蓟州黄崖关长城、宝坻湿地公园等） 编码问题解决： • 现象：API 返回乱码字符 • AI 诊断：UTF 8 编码设置问题 • 快速修复：添加正确的响应头设置 四）用户体验优化 1、用户需求提示 用户反馈系列： "需要收藏功能，让用户保存喜欢的景点" "页面间距太大了，看起来很松散" "搜索后能自动滚动到结果就好了" 2、Cursor AI 实现过程 收藏功能开发： • AI 方案：使用 localStorage 本地存储，实现轻量级收藏 • 实现特性：一键收藏、收藏列表、收藏状态同步 • 用户体验：模态框展示、空状态设计、收藏数量徽章 收藏功能实现界面 界面优化改进： • 用户要求："间距减小一些，信息密度提高" • AI 执行：全局调整 padding 和 margin 数值 • 优化效果：从 48px 缩减至 24px，页面更紧凑 自动滚动功能： • 用户需求："搜索完成后自动跳转到结果区域" • AI 实现：添加平滑滚动动画，提升操作流畅性 四、核心 AI 提示词设计 一）地理推荐优化的关键 Prompt 通过多轮优化，最终形成的核心 AI 提示词模板： 最终优化版本： Code block Plain Text Copy 你是一个专业的${city}本地旅游专家，请为从${city}出发的短途旅行推荐8个真实存在的小众旅游目的地。 【重要说明】： 出发城市是：${city} 必须推荐${city}及其周边地区的景点，不要推荐其他城市的景点 推荐范围应该在${city}200公里以内 【地理约束】： 如果是天津，只推荐：天津市内各区、蓟州区、宝坻区、武清区、河北廊坊、河北承德等天津周边地区 如果是北京，只推荐：北京市内各区县、河北张家口、河北承德、天津蓟州等北京周边地区 请严格按照JSON格式返回： [{"destination":"景点名称（含具体地理位置）","drivingHours":数字,"distance":数字,"description":"描述，必须包含所在的具体区县信息"}] 二）技术架构要点 前端：原生微信小程序 + glass morphism 设计 后端：Node.js + Express + 阿里云通义千问 API 部署：阿里云 ECS + Nginx + PM2 + SSL 证书 存储：localStorage 本地收藏功能 五、项目部署与上线 项目如果想发布到真实环境，必须具备几点： • 购买一个域名，可以通过阿里购买，比较简单 • ICP 认证，也是通过阿里认证即可； • 购买服务器部署代码后端服务，我是购买的阿里云最便宜的大概一天也就一块钱； 这里面的服务器 IP，访问账号密码需要告诉 cursor 他才可以帮你自动部署到服务器； 一）部署架构 • 集成通义千问 API 调用 3、关键问题突破 重大问题：地理推荐不准确 • 用户反馈："天津定位却推荐北京景点，完全不对" • 问题分析：AI 对地理位置约束理解不准确 • 用户要求："必须推荐天津本地和周边的景点" AI 优化过程： 1. 第一版 prompt：过于简单，缺乏地理约束 2. 用户指正："这些都不是天津的景点！" 3. 第二版优化：添加明确的地理边界限制 4. 最终效果：准确返回天津本地景点（蓟州黄崖关长城、宝坻湿地公园等） 编码问题解决： • 现象：API 返回乱码字符 • AI 诊断：UTF 8 编码设置问题 • 快速修复：添加正确的响应头设置 四）用户体验优化 1、用户需求提示 用户反馈系列： "需要收藏功能，让用户保存喜欢的景点" "页面间距太大了，看起来很松散" "搜索后能自动滚动到结果就好了" "需要收藏功能，让用户保存喜欢的景点" "页面间距太大了，看起来很松散" "搜索后能自动滚动到结果就好了" 2、Cursor AI 实现过程 收藏功能开发： • AI 方案：使用 localStorage 本地存储，实现轻量级收藏 • 实现特性：一键收藏、收藏列表、收藏状态同步 • 用户体验：模态框展示、空状态设计、收藏数量徽章 收藏功能实现界面 界面优化改进： • 用户要求："间距减小一些，信息密度提高" • AI 执行：全局调整 padding 和 margin 数值 • 优化效果：从 48px 缩减至 24px，页面更紧凑 自动滚动功能： • 用户需求："搜索完成后自动跳转到结果区域" • AI 实现：添加平滑滚动动画，提升操作流畅性 四、核心 AI 提示词设计 一）地理推荐优化的关键 Prompt 通过多轮优化，最终形成的核心 AI 提示词模板： 最终优化版本： 二）技术架构要点 前端：原生微信小程序 + glass morphism 设计 后端：Node.js + Express + 阿里云通义千问 API 部署：阿里云 ECS + Nginx + PM2 + SSL 证书 存储：localStorage 本地收藏功能 五、项目部署与上线 项目如果想发布到真实环境，必须具备几点： • 购买一个域名，可以通过阿里购买，比较简单 • ICP 认证，也是通过阿里认证即可； • 购买服务器部署代码后端服务，我是购买的阿里云最便宜的大概一天也就一块钱； 这里面的服务器 IP，访问账号密码需要告诉 cursor 他才可以帮你自动部署到服务器； 一）部署架构 二）部署脚本 （deploy.sh） 三）Nginx 配置 六、项目测试与验证 每次开发完毕，都可以让 cursor 自动测试即可；电脑上需要按照微信开发者工具， 进行测试； 一）功能测试结果 1、定位功能测试 • 测试场景：天津河西区定位 • 预期结果：返回天津周边景点 • 实际结果：✅ 成功返回天津本地及周边河北景点 • 测试数据： ◦ Code block Plain Text Copy 返回景点： 蓟州黄崖关长城（天津本地） 宝坻潮白河国家湿地公园（天津宝坻区） 武清南湖绿博园（天津武清区） 廊坊天仙宫（河北廊坊，天津周边） ◦ 2、界面适配测试 • 测试设备：iPhone、Android、iPad • 测试结果：✅ 响应式设计良好，各设备显示正常 结尾： 本项目从构思到上线，历时一个月（实际工作量大概为 20 个小时内），完整实现了基于 AI 的小众旅游推荐小程序。干中学 ！有想法就去做，别偷懒！ 大家好，我是小林，这篇教程作者是狂热，AI 编程开源知识库作者。 技术栈：微信小程序 + Node.js + AI API 主要功能：基于地理位置的小众景点智能推荐、收藏管理、分享功能 一、项目构思与需求分析 一）项目背景 • 用户痛点：热门景点人多拥挤，寻找小众景点困难 • 市场机会：个性化旅游需求增长，AI 推荐技术成熟 • 产品定位：智能化小众旅游目的地发现平台 二）核心功能设计 • 智能定位：一键获取用户位置，自动识别城市 • AI 推荐：基于出发地和距离限制，智能推荐小众景点 • 收藏管理：用户可收藏喜欢的景点，本地存储 • 分享功能：生成分享链接，便于用户传播 • 响应式设计：适配不同设备屏幕 二、技术架构设计 一）整体架构 二）技术选型 • 前端：原生微信小程序开发 • 后端：Node.js + Express 框架 • AI 服务：阿里云通义千问 API+豆包大模型 API 支持切换 • 部署：阿里云 ECS + Nginx + PM2 • 存储：localStorage（收藏功能） 三、开发过程详述 一）基础框架搭建 1、用户需求提示 用户提示词： "我需要创建一个旅游推荐小程序，能够根据用户位置推荐小众景点，要求界面美观现代" "我需要创建一个旅游推荐小程序，能够根据用户位置推荐小众景点，要求界面美观现代" input: { prompt: 请为从${city}出发的短途旅行推荐4个小众、冷门、鲜为人知的旅游目的地。避开热门景点，重点推荐：1）当地人才知道的隐秘景点 2）未被过度开发的自然风光 3）有特色但游客不多的小村庄或古镇 4）独特的文化体验地。每个目的地包含：目的地名称、驾驶小时数、距离公里数、简短描述。请严格按照JSON格式返回：[{"destination":"目的地名称","drivingHours":数字,"distance":数字,"description":"简短描述"}] 2、Cursor AI 实现过程 AI 响应：分析需求后，AI 助手建议采用： • 微信小程序原生开发 • Glass morphism 设计风格（紫色渐变主题） • 模块化页面结构：定位区域 + 输入区域 + 搜索功能 实现结果： • 自动生成了完整的 WXML 页面结构 • 创建了现代化的 WXSS 样式文件 • 实现了响应式布局和毛玻璃效果 二）定位功能实现 1、用户需求提示 用户提示词： "需要添加定位功能，一键获取用户当前位置并自动识别城市，自动搜索该城市的小众景点" "需要添加定位功能，一键获取用户当前位置并自动识别城市，自动搜索该城市的小众景点" 2、Cursor AI 实现过程 AI 分析：定位功能需要集成微信小程序的地理位置 API 和逆地理编码服务 实现步骤： 1. 集成微信小程序 wx.getLocation API 2. 接入百度地图逆地理编码服务 3. 添加定位权限处理机制 4. 实现城市名称规范化处理 3、遇到的关键问题 定位权限获取失败 • 用户反馈："定位按钮点击没反应" • AI 诊断：权限未获取，需要引导用户开启 • 解决方案：添加权限说明页面和错误提示 返回地址不准确 • 用户反馈："定位返回的是区县名，不是城市名" • AI 优化：建立城市映射表，规范化地址信息 三）第三阶段：AI 推荐系统 1、用户需求提示 用户提示词： "接入 AI 服务，根据用户输入的城市智能推荐 8 个小众旅游景点，要求推荐准确、描述详细" "接入 AI 服务，根据用户输入的城市智能推荐 8 个小众旅游景点，要求推荐准确、描述详细" 2、Cursor AI 实现过程 AI 方案：建议接入阿里云通义千问 API，构建专业的旅游推荐 prompt 这里需要注册阿里千问，获取免费的 api 调用权限，具体可以查看官网；目前阿里有免费的 api 额度可以使用；注册后，讲账号、密钥等发送给 cursor 即可； 后面我为了双保险，又注册了豆包大模型；现在搜索完毕不满意可以换一批，这时就是调用的豆包大模型； 实现流程： • 创建 Express 后端服务 • 设计 RESTful API 接口 • 构建 AI 提示词模板