古镇风情导览小程序

项目简介

这是一个江南古镇旅游导览的微信小程序，采用纯前端实现，使用本地Mock数据模拟后端接口。项目完整实现了古镇景点介绍、历史文化展示、特色美食推荐、文创产品展示、住宿交通指南等核心功能，适合作为微信小程序开发学习项目或计算机设计参考。

技术栈

技术	版本/说明
开发框架	微信小程序原生框架
基础库版本	trial (最新试用版)
开发语言	JavaScript (ES6+)
样式语言	WXSS (微信小程序样式)
模板语言	WXML (微信小程序模板)
数据存储	本地Storage持久化
数据模拟	Mock Data (本地模拟数据)

项目特点

• 纯前端实现：无需后端服务器，所有数据使用本地Mock模拟
• 完整旅游导览：涵盖景点、美食、住宿、交通、门票等完整旅游信息
• UI设计精美：界面风格古朴典雅，棕色主题配色，符合古镇文化调性
• 信息丰富：包含历史文化、民俗活动、周边游玩等深度内容
• 实用性强：提供交通指南、门票信息、推荐路线等实用旅游攻略

功能模块

1. 首页模块 (pages/index)

• 轮播图展示古镇风光
• 古镇简介展示
• 快捷功能入口（历史文化、交通指南、门票信息、民俗活动、周边游玩、特色住宿）
• 最新动态/今日推荐

2. 景点导览模块 (pages/attractions)

• 景点列表展示
• 景点封面图、名称、简介
• 点击进入景点详情

3. 景点详情模块 (pages/attraction_detail)

• 景点完整信息展示
• 景点名称、图片、详细介绍
• 建议游玩时长
• 开放时间

4. 历史文化模块 (pages/history_culture)

• 古镇历史简介
• 文化特色介绍（江南水乡建筑、传统民俗节日、非物质文化遗产、水乡茶文化）
• 历史名人介绍

5. 美食推荐模块 (pages/delicacies)

• 特色美食列表
• 美食封面图、名称、简介
• 点击进入美食详情

6. 美食详情模块 (pages/delicacy_detail)

• 美食完整信息展示
• 美食名称、图片、详细介绍
• 美食故事/典故
• 推荐店铺

7. 文创产品模块 (pages/cultural_products)

• 文创产品列表展示
• 产品封面图、名称、类型、简介
• 购买地点信息
• 点击进入产品详情

8. 产品详情模块 (pages/product_detail)

• 文创产品完整信息
• 产品图片、名称、类型
• 详细介绍
• 购买地点

9. 特色住宿模块 (pages/accommodation)

• 住宿列表展示
• 客栈/民宿封面图、名称、风格
• 价格信息
• 预订方式
• 特色设施标签

10. 交通指南模块 (pages/transportation)

• 外部交通（高铁、飞机、长途汽车）
• 内部交通（步行、摇橹船、电瓶车）
• 停车信息

11. 门票信息模块 (pages/tickets)

• 门票类型及价格（联票、单景点票、夜游船票）
• 开放时间信息
• 购票方式说明

12. 民俗活动模块 (pages/folk_activities)

• 民俗活动列表
• 活动封面图、名称、时间
• 活动详细介绍

13. 周边游玩模块 (pages/surrounding)

• 周边景点推荐
• 推荐游玩路线（一日游、两日游）

14. 联系我们模块 (pages/my)

• 小程序介绍
• 团队简介
• 免责声明
• 联系方式（官网、电话、邮箱）
• 版权信息

项目结构

old-town-min/
├── app.js                    # 小程序入口文件，全局数据管理
├── app.json                  # 小程序全局配置（页面路由、TabBar、窗口样式）
├── app.wxss                  # 全局样式文件
├── project.config.json       # 项目配置文件
├── project.private.config.json # 项目私有配置
├── sitemap.json              # 小程序索引配置
├── components/               # 组件目录（预留）
├── images/                   # 图片资源目录
│   ├── tabbar/               # TabBar图标
│   │   ├── index.png         # 首页图标
│   │   ├── index_1.png       # 首页选中图标
│   │   ├── jing.png          # 景点图标
│   │   ├── jing_1.png        # 景点选中图标
│   │   ├── food.png          # 美食图标
│   │   ├── food_1.png        # 美食选中图标
│   │   ├── wen.png           # 文创图标
│   │   ├── wen_1.png         # 文创选中图标
│   │   ├── phone.png         # 联系图标
│   │   └── phone_1.png       # 联系选中图标
│   ├── banner_1.jpg, banner_2.jpg  # 轮播图
│   ├── b_1.jpg, b_2.jpg      # 住宿图片
│   ├── f_1.jpg ~ f_3.jpg     # 美食图片
│   ├── j_1.jpg ~ j_3.jpg     # 景点图片
│   ├── m_1.jpg ~ m_3.jpg     # 民俗活动图片
│   ├── w_1.jpg ~ w_3.jpg     # 文创产品图片
│   ├── z_1.jpg, z_2.jpg      # 周边景点图片
│   └── icon_1.png ~ icon_6.png # 功能入口图标
├── pages/                    # 页面目录
│   ├── index/                # 首页
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   ├── attractions/          # 景点列表页
│   │   ├── attractions.js
│   │   ├── attractions.json
│   │   ├── attractions.wxml
│   │   └── attractions.wxss
│   ├── attraction_detail/    # 景点详情页
│   │   ├── attraction_detail.js
│   │   ├── attraction_detail.json
│   │   ├── attraction_detail.wxml
│   │   └── attraction_detail.wxss
│   ├── history_culture/      # 历史文化页
│   │   ├── history_culture.js
│   │   ├── history_culture.json
│   │   ├── history_culture.wxml
│   │   └── history_culture.wxss
│   ├── delicacies/           # 美食列表页
│   │   ├── delicacies.js
│   │   ├── delicacies.json
│   │   ├── delicacies.wxml
│   │   └── delicacies.wxss
│   ├── delicacy_detail/      # 美食详情页
│   │   ├── delicacy_detail.js
│   │   ├── delicacy_detail.json
│   │   ├── delicacy_detail.wxml
│   │   └── delicacy_detail.wxss
│   ├── cultural_products/    # 文创产品页
│   │   ├── cultural_products.js
│   │   ├── cultural_products.json
│   │   ├── cultural_products.wxml
│   │   └── cultural_products.wxss
│   ├── product_detail/       # 产品详情页
│   │   ├── product_detail.js
│   │   ├── product_detail.json
│   │   ├── product_detail.wxml
│   │   └── product_detail.wxss
│   ├── accommodation/        # 特色住宿页
│   │   ├── accommodation.js
│   │   ├── accommodation.json
│   │   ├── accommodation.wxml
│   │   └── accommodation.wxss
│   ├── transportation/       # 交通指南页
│   │   ├── transportation.js
│   │   ├── transportation.json
│   │   ├── transportation.wxml
│   │   └── transportation.wxss
│   ├── tickets/              # 门票信息页
│   │   ├── tickets.js
│   │   ├── tickets.json
│   │   ├── tickets.wxml
│   │   └── tickets.wxss
│   ├── folk_activities/      # 民俗活动页
│   │   ├── folk_activities.js
│   │   ├── folk_activities.json
│   │   ├── folk_activities.wxml
│   │   └── folk_activities.wxss
│   ├── surrounding/          # 周边游玩页
│   │   ├── surrounding.js
│   │   ├── surrounding.json
│   │   ├── surrounding.wxml
│   │   └── surrounding.wxss
│   └── my/                   # 联系我们页
│       ├── my.js
│       ├── my.json
│       ├── my.wxml
│       └── my.wxss
└── utils/                    # 工具类目录
    ├── mockData.js           # Mock数据文件
    └── util.js               # 工具函数

数据模型

轮播图数据 (bannerList)

{
  id: 1,                          // 轮播图ID
  image: '/images/banner_1.jpg',  // 图片路径
  title: '千年古韵，水乡画廊'      // 标题
}

景点数据 (attractions)

{
  id: 'a001',                     // 景点ID
  name: '廊桥遗梦',               // 景点名称
  imageUrl: '/images/j_1.jpg',   // 封面图
  description: '景点简介...',     // 简介
  content: '详细介绍...',         // 详细内容
  playTime: '约30分钟',           // 建议游玩时长
  openTime: '全天开放'            // 开放时间
}

美食数据 (delicacies)

{
  id: 'd001',                     // 美食ID
  name: '状元蹄',                 // 美食名称
  imageUrl: '/images/f_1.jpg',   // 封面图
  description: '美食简介...',     // 简介
  story: '美食故事/典故...',      // 故事介绍
  recommendShop: '老字号状元蹄店' // 推荐店铺
}

文创产品数据 (culturalProducts)

{
  id: 'cp001',                    // 产品ID
  name: '手绘古镇明信片',         // 产品名称
  imageUrl: '/images/w_1.jpg',   // 封面图
  type: '手工艺品',               // 产品类型
  description: '产品简介...',     // 简介
  purchaseLocation: '老街文创店'  // 购买地点
}

住宿数据 (accommodations)

{
  id: 'ac001',                    // 住宿ID
  name: '水岸人家客栈',           // 客栈名称
  imageUrl: '/images/b_1.jpg',   // 封面图
  style: '临水而居，古朴雅致',    // 风格描述
  price: '¥380起',               // 价格
  bookingInfo: '电话预订：XXXX-XXXXXXX', // 预订方式
  features: ['临河观景', '独立卫浴', '免费WiFi'] // 特色设施
}

交通指南数据 (transportationGuide)

{
  external: [                     // 外部交通
    { type: '高铁', content: '交通说明...' },
    { type: '飞机', content: '交通说明...' },
    { type: '长途汽车', content: '交通说明...' }
  ],
  internal: [                     // 内部交通
    { type: '步行', content: '交通说明...' },
    { type: '摇橹船', content: '交通说明...' },
    { type: '电瓶车', content: '交通说明...' }
  ],
  parking: '停车场信息...'        // 停车信息
}

门票信息数据 (ticketsInfo)

{
  types: [                        // 门票类型
    { id: 'ti001', name: '古镇联票', price: '¥100', description: '票种说明...' }
  ],
  openingHours: [                 // 开放时间
    { item: '古镇开放时间', time: '全天开放' }
  ],
  purchaseMethods: '购票方式说明...' // 购票方式
}

民俗活动数据 (folkActivities)

{
  id: 'fa001',                    // 活动ID
  name: '端午龙舟赛',             // 活动名称
  imageUrl: '/images/m_1.jpg',   // 封面图
  date: '每年农历五月初五',       // 活动时间
  description: '活动简介...',     // 简介
  content: '详细介绍...'          // 详细内容
}

历史文化数据 (historyCulture)

{
  historyIntro: '古镇历史简介...', // 历史简介
  culturalFeatures: [             // 文化特色
    { id: 'hc001', title: '江南水乡建筑', content: '特色介绍...' }
  ],
  famousFigures: [                // 历史名人
    { id: 'hf001', name: '王XX (明代诗人)', content: '人物介绍...' }
  ]
}

周边游玩数据 (surrounding)

{
  attractions: [                  // 周边景点
    { id: 'sra001', name: 'XX山风景区', imageUrl: '/images/z_1.jpg', description: '景点介绍...' }
  ],
  routes: [                       // 推荐路线
    { id: 'rr001', title: '一日游路线推荐', content: '路线详情...' }
  ]
}

页面路由配置

{
  "pages": [
    "pages/index/index", // 首页（默认启动页）
    "pages/attractions/attractions", // 景点列表
    "pages/delicacies/delicacies", // 美食列表
    "pages/cultural_products/cultural_products", // 文创产品
    "pages/my/my", // 联系我们
    "pages/attraction_detail/attraction_detail", // 景点详情
    "pages/history_culture/history_culture", // 历史文化
    "pages/delicacy_detail/delicacy_detail", // 美食详情
    "pages/accommodation/accommodation", // 特色住宿
    "pages/transportation/transportation", // 交通指南
    "pages/tickets/tickets", // 门票信息
    "pages/product_detail/product_detail", // 产品详情
    "pages/folk_activities/folk_activities", // 民俗活动
    "pages/surrounding/surrounding" // 周边游玩
  ]
}

TabBar配置

{
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#60473C",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/attractions/attractions",
        "text": "景点"
      },
      {
        "pagePath": "pages/delicacies/delicacies",
        "text": "美食"
      },
      {
        "pagePath": "pages/cultural_products/cultural_products",
        "text": "文创"
      },
      {
        "pagePath": "pages/my/my",
        "text": "联系"
      }
    ]
  }
}

运行环境要求

• 微信开发者工具：建议使用最新稳定版
• 基础库版本：2.19.0 及以上
• AppID：可替换为自己的AppID

快速开始

1. 克隆/下载项目

将项目文件夹下载到本地

2. 导入项目

1. 打开微信开发者工具
2. 选择"导入项目"
3. 选择项目目录 old-town-min
4. 填入AppID（可使用测试号或自己的AppID）
5. 点击"导入"

3. 运行项目

导入成功后，项目会自动编译运行，可在模拟器中预览效果

4. 真机调试

点击工具栏"预览"按钮，扫码在手机上体验

预置测试数据

景点

景点名称	建议游玩时长	开放时间
廊桥遗梦	约30分钟	全天开放
石板老街	约1-2小时	全天开放
古运河码头	约1小时	08:00-17:00

美食

美食名称	推荐店铺
状元蹄	老字号状元蹄店
定胜糕	古镇糕点铺
水乡面	河边面馆

文创产品

产品名称	类型	购买地点
手绘古镇明信片	手工艺品	老街文创店
XX丝绸刺绣	非遗文创	丝绸博物馆
特产菊花茶	特色食品	特产商店

住宿

客栈名称	风格	价格
水岸人家客栈	临水而居，古朴雅致	¥380起
青石板民宿	庭院深深，静谧舒适	¥450起

门票

票种	价格	说明
古镇联票	¥100	包含所有开放景点及游船一次
单景点票	¥30	单独购买任意收费景点
夜游船票	¥60	仅限夜间乘坐游船

民俗活动

活动名称	时间
端午龙舟赛	每年农历五月初五
水乡社戏	节假日及特定时间
中秋水灯会	每年农历八月十五

界面预览

项目包含演示视频文件 演示视频.mp4，可查看完整功能演示。

扩展建议

如需进一步完善项目，可考虑以下扩展：

1. 接入真实后端：将Mock数据替换为真实API接口
2. 用户登录系统：接入微信登录，实现用户收藏、评论等功能
3. 在线购票：接入支付功能，实现门票在线购买
4. 地图导航：集成地图功能，提供景点导航服务
5. 语音导览：增加景点语音讲解功能
6. AR体验：增加AR实景导览功能
7. 评论系统：实现用户对景点、美食的评价功能
8. 智能推荐：根据用户偏好推荐游玩路线
9. 天气查询：集成天气API，提供出行建议
10. 多语言支持：增加英文等多语言版本

注意事项

1. 本项目为学习演示项目，所有数据均为模拟数据
2. 门票价格、开放时间等信息仅供参考，请以实际为准
3. 联系方式为虚构信息，请勿拨打
4. 如需发布上线，请替换为自己的AppID并完善相关资质

许可证

本项目仅供学习交流使用，请勿用于商业用途。