技术栈：微信小程序 + Node.js + AI API

主要功能：基于地理位置的小众景点智能推荐、收藏管理、分享功能

一、项目构思与需求分析

一）项目背景

用户痛点：热门景点人多拥挤，寻找小众景点困难
市场机会：个性化旅游需求增长，AI 推荐技术成熟
产品定位：智能化小众旅游目的地发现平台

二）核心功能设计

智能定位：一键获取用户位置，自动识别城市
AI 推荐：基于出发地和距离限制，智能推荐小众景点
收藏管理：用户可收藏喜欢的景点，本地存储
分享功能：生成分享链接，便于用户传播
响应式设计：适配不同设备屏幕

二、技术架构设计

一）整体架构

前端层：微信小程序 + PC网页
     ↓
API层：Node.js + Express
     ↓
AI层：通义千问API
     ↓
数据层：本地存储 + 缓存机制

二）技术选型

前端：原生微信小程序开发
后端：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 和逆地理编码服务

实现步骤：

集成微信小程序 wx.getLocation API
接入百度地图逆地理编码服务
添加定位权限处理机制
实现城市名称规范化处理

3、遇到的关键问题

定位权限获取失败

用户反馈："定位按钮点击没反应"
AI 诊断：权限未获取，需要引导用户开启
解决方案：添加权限说明页面和错误提示

返回地址不准确

用户反馈："定位返回的是区县名，不是城市名"
AI 优化：建立城市映射表，规范化地址信息

三）第三阶段：AI 推荐系统

1、用户需求提示

用户提示词：

"接入 AI 服务，根据用户输入的城市智能推荐 8 个小众旅游景点，要求推荐准确、描述详细"

2、Cursor AI 实现过程

AI 方案：建议接入阿里云通义千问 API，构建专业的旅游推荐 prompt

这里需要注册阿里千问，获取免费的 api 调用权限，具体可以查看官网；目前阿里有免费的 api 额度可以使用；注册后，讲账号、密钥等发送给 cursor 即可；

后面我为了双保险，又注册了豆包大模型；现在搜索完毕不满意可以换一批，这时就是调用的豆包大模型；

实现流程：

创建 Express 后端服务
设计 RESTful API 接口
构建 AI 提示词模板
集成通义千问 API 调用

3、关键问题突破

重大问题：地理推荐不准确

用户反馈："天津定位却推荐北京景点，完全不对"
问题分析：AI 对地理位置约束理解不准确
用户要求："必须推荐天津本地和周边的景点"

AI 优化过程：

第一版 prompt：过于简单，缺乏地理约束
用户指正："这些都不是天津的景点！"
第二版优化：添加明确的地理边界限制
最终效果：准确返回天津本地景点（蓟州黄崖关长城、宝坻湿地公园等）

编码问题解决：

现象：API 返回乱码字符
AI 诊断：UTF-8 编码设置问题
快速修复：添加正确的响应头设置

四）用户体验优化

1、用户需求提示

用户反馈系列：

"需要收藏功能，让用户保存喜欢的景点"
"页面间距太大了，看起来很松散"
"搜索后能自动滚动到结果就好了"

2、Cursor AI 实现过程

收藏功能开发：

AI 方案：使用 localStorage 本地存储，实现轻量级收藏
实现特性：一键收藏、收藏列表、收藏状态同步
用户体验：模态框展示、空状态设计、收藏数量徽章

收藏功能实现界面

界面优化改进：

用户要求："间距减小一些，信息密度提高"
AI 执行：全局调整 padding 和 margin 数值
优化效果：从 48px 缩减至 24px，页面更紧凑

自动滚动功能：

用户需求："搜索完成后自动跳转到结果区域"
AI 实现：添加平滑滚动动画，提升操作流畅性

四、核心 AI 提示词设计

通过多轮优化，最终形成的核心 AI 提示词模板：

最终优化版本：

你是一个专业的${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 他才可以帮你自动部署到服务器；

一）部署架构

# 服务器配置
阿里云ECS: 2核4G
操作系统: CentOS 7
Web服务器: Nginx
进程管理: PM2
SSL证书: Let's Encrypt

二）部署脚本（deploy.sh）

#!/bin/bash

echo "正在部署前端文件..."
scp -r * root@xxx.xxx.xxx.xxx:/var/www/xiaozhonglvyou-frontend/

echo "正在部署后端文件..."
scp server.js root@xxx.xxx.xxx.xxx:/var/www/xiaozhonglvyou-backend/

echo "正在重启服务..."
ssh root@xxx.xxx.xxx.xxx 'cd /var/www/xiaozhonglvyou-backend && pm2 restart server'

echo "部署完成！"

三）Nginx 配置

server {
    listen 443 ssl;
    server_name xiaozhonglvyou.com;
    
    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;
    
    location / {
        root /var/www/xiaozhonglvyou-frontend;
        index index.html;
    }
    
    location /api/ {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

六、项目测试与验证

每次开发完毕，都可以让 cursor 自动测试即可；电脑上需要按照微信开发者工具，进行测试；

一）功能测试结果

1、定位功能测试

测试场景：天津河西区定位
预期结果：返回天津周边景点
实际结果：✅ 成功返回天津本地及周边河北景点
测试数据：

返回景点： 
- 蓟州黄崖关长城（天津本地） 
- 宝坻潮白河国家湿地公园（天津宝坻区） 
- 武清南湖绿博园（天津武清区） 
- 廊坊天仙宫（河北廊坊，天津周边）

2、界面适配测试

测试设备：iPhone、Android、iPad
测试结果：✅ 响应式设计良好，各设备显示正常

结尾：

本项目从构思到上线，历时一个月（实际工作量大概为 20 个小时内），完整实现了基于 AI 的小众旅游推荐小程序。干中学！有想法就去做，别偷懒！