家乡介绍小程序

项目简介

这是一个家乡文化展示与旅游推荐的微信小程序，采用纯前端实现，使用本地Mock数据模拟后端接口。项目以广东省惠州市惠东县为示例，完整实现了景点浏览、美食推荐、乡镇介绍、历史回顾、收藏管理等核心功能，适合作为微信小程序开发学习项目或计算机设计参考。

技术栈

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

项目特点

• 纯前端实现：无需后端服务器，所有数据使用本地Mock模拟
• 数据持久化：收藏数据和用户信息使用本地存储，关闭小程序后数据不丢失
• 完整业务流程：涵盖景点浏览、美食推荐、乡镇介绍、历史回顾等完整流程
• UI设计精美：界面风格简洁大方，蓝色主题配色，符合旅游类应用调性
• 分类筛选：景点按乡镇分类展示，方便用户查找
• 收藏功能：支持景点收藏，方便用户管理感兴趣的内容

功能模块

1. 首页模块 (pages/index)

• 轮播图展示家乡风景
• 功能入口（乡镇介绍、历史回顾、美食推荐）
• 热门景点推荐展示
• 快捷导航到各功能页面

2. 景点列表模块 (pages/scenic)

• 按乡镇分类展示景点（白花镇、平海镇、稔山镇）
• Tab切换筛选不同乡镇景点
• 景点卡片展示（图片、名称、位置、等级）
• 点击进入景点详情

3. 景点详情模块 (pages/scenic-detail)

• 展示景点完整信息
• 景点图片、名称、等级
• 开放时间、适宜季节
• 详细地址和介绍
• 收藏/取消收藏功能
• 地图位置展示

4. 美食列表模块 (pages/food)

• 按分类展示美食（精选热菜、特色菜、城心小炒等）
• 美食图片、名称、价格展示
• 点击进入美食详情

5. 美食详情模块 (pages/foodcontent)

• 美食完整信息展示
• 美食图片、名称、价格
• 详细介绍

6. 乡镇介绍模块 (pages/township)

• 展示各乡镇详细信息
• 乡镇图片、名称、位置
• 乡镇简介和特色
• 地理位置坐标

7. 历史回顾模块 (pages/history)

• 展示家乡历史老照片
• 时间线形式展示
• 图片配文字说明
• 记录家乡发展变迁

8. 我的模块 (pages/my)

• 用户信息展示（头像、昵称）
• 个人信息编辑入口
• 我的收藏入口

9. 个人信息模块 (pages/info)

• 修改用户头像
• 修改用户昵称
• 信息本地持久化

10. 我的收藏模块 (pages/collect)

• 收藏的景点列表展示
• 点击可跳转到景点详情
• 收藏数据本地持久化

项目结构

hownTown-min/
├── app.js                    # 小程序入口文件，全局数据管理
├── app.json                  # 小程序全局配置（页面路由、TabBar、窗口样式）
├── app.wxss                  # 全局样式文件
├── api.js                    # API接口封装（Mock数据获取）
├── data.js                   # Mock数据文件（景点数据）
├── project.config.json       # 项目配置文件
├── project.private.config.json # 项目私有配置
├── sitemap.json              # 小程序索引配置
├── .eslintrc.js              # ESLint配置文件
├── README.md                 # 项目说明文件
├── components/               # 自定义组件目录
├── wxParse/                  # 富文本解析组件
├── images/                   # 图片资源目录
│   ├── tab/                  # TabBar图标
│   │   ├── home1.png         # 首页选中图标
│   │   ├── home2.png         # 首页未选中图标
│   │   ├── scenic1.png       # 景点选中图标
│   │   ├── scenic2.png       # 景点未选中图标
│   │   ├── food1.png         # 美食选中图标
│   │   ├── food2.png         # 美食未选中图标
│   │   ├── user1.png         # 我的选中图标
│   │   └── user2.png         # 我的未选中图标
│   ├── item/                 # 功能图标
│   │   ├── culture.png       # 文化图标
│   │   ├── history.png       # 历史图标
│   │   └── house.png         # 乡镇图标
│   ├── baihua/               # 白花镇相关图片
│   │   └── landmark.png      # 地标图片
│   ├── arrow.png             # 箭头图标
│   ├── star.png              # 收藏图标（已收藏）
│   └── star1.png             # 收藏图标（未收藏）
├── pages/                    # 页面目录
│   ├── index/                # 首页
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   ├── scenic/               # 景点列表页
│   │   ├── scenic.js
│   │   ├── scenic.json
│   │   ├── scenic.wxml
│   │   └── scenic.wxss
│   ├── scenic-detail/        # 景点详情页
│   │   ├── scenic-detail.js
│   │   ├── scenic-detail.json
│   │   ├── scenic-detail.wxml
│   │   └── scenic-detail.wxss
│   ├── food/                 # 美食列表页
│   │   ├── food.js
│   │   ├── food.json
│   │   ├── food.wxml
│   │   └── food.wxss
│   ├── foodcontent/          # 美食详情页
│   │   ├── foodcontent.js
│   │   ├── foodcontent.json
│   │   ├── foodcontent.wxml
│   │   └── foodcontent.wxss
│   ├── township/             # 乡镇介绍页
│   │   ├── township.js
│   │   ├── township.json
│   │   ├── township.wxml
│   │   └── township.wxss
│   ├── history/              # 历史回顾页
│   │   ├── history.js
│   │   ├── history.json
│   │   ├── history.wxml
│   │   └── history.wxss
│   ├── my/                   # 我的页面
│   │   ├── my.js
│   │   ├── my.json
│   │   ├── my.wxml
│   │   └── my.wxss
│   ├── info/                 # 个人信息页
│   │   ├── info.js
│   │   ├── info.json
│   │   ├── info.wxml
│   │   └── info.wxss
│   └── collect/              # 我的收藏页
│       ├── collect.js
│       ├── collect.json
│       ├── collect.wxml
│       └── collect.wxss
└── utils/                    # 工具类目录
    └── util.js               # 工具函数

数据模型

景点数据 (scenicData)

{
  id: 1,                        // 景点ID
  type: 1,                      // 所属乡镇类型（1:白花镇 2:平海镇 3:稔山镇）
  img: 'http://...',            // 景点图片URL
  title: '白盆湖温泉度假村',     // 景点名称
  content: '景点详细介绍...',    // 景点描述
  position: '惠州市惠东县...',   // 详细地址
  time: '08:00 - 24:00',        // 开放时间
  level: 'AAAA级',              // 景区等级
  play: '春季适宜'              // 适宜游玩季节
}

乡镇数据 (townData)

{
  img: 'http://...',            // 乡镇图片URL
  title: '白花镇',              // 乡镇名称
  content: '乡镇详细介绍...',    // 乡镇描述
  position: '广东省惠州市...',   // 详细地址
  longitude: '114.650420',      // 经度
  latitude: '22.940510'         // 纬度
}

历史数据 (historyData)

{
  font: '1961年的安墩青山坳牌坊', // 图片说明
  img: 'http://...'              // 历史图片URL
}

美食数据 (foodData)

{
  _id: '5ac0896ca880f20358495508', // 分类ID
  title: '精选热菜',               // 分类名称
  pid: '0',                        // 父级ID
  list: [{                         // 美食列表
    _id: '5ac1a22011f48140d0002955',
    cate_id: '5ac0896ca880f20358495508',
    catename: '精选热菜',
    title: '娃娃菜炖豆腐',
    price: '2',
    img_url: 'http://...'
  }]
}

用户数据 (userData)

{
  nickname: '微信用户',           // 用户昵称
  avatarUrl: 'http://...'        // 用户头像URL
}

收藏数据 (starList)

'1,2,3'; // 收藏的景点ID列表，以逗号分隔存储

核心业务逻辑

1. 景点查询

// 按乡镇类型筛选景点
const getSignList = (type) => {
  const data = fetchSignList();
  return data.filter((c) => c.type === type);
};

2. 收藏功能

// 切换收藏状态
setStarHandler() {
  const { isStar, id } = this.data
  let starList = (wx.getStorageSync('starList') || '').split(',')

  if (isStar) {
    // 取消收藏
    wx.setStorageSync('starList', starList.filter(c => c != id).join(','))
  } else {
    // 添加收藏
    starList.push(id)
    wx.setStorageSync('starList', starList.join(','))
  }

  this.setData({ isStar: !isStar })
}

3. 获取收藏列表

// 获取用户收藏的景点
onShow() {
  let starList = (wx.getStorageSync('starList') || '').split(',')
  let newList = []
  const hotelList = fetchSignList()

  hotelList.forEach(c => {
    starList.forEach(a => {
      if (c.id == a) {
        newList.push(c)
      }
    })
  })

  this.setData({ list: newList })
}

4. 用户信息管理

// 初始化用户信息
onShow() {
  const defaultAvatarUrl = 'https://...'
  const data = wx.getStorageSync('userInfo') || ''
  wx.setStorageSync('userInfo', data ? data : {
    nickname: '微信用户',
    avatarUrl: defaultAvatarUrl
  })
}

页面路由配置

{
  "pages": [
    "pages/index/index", // 首页（默认启动页）
    "pages/scenic/scenic", // 景点列表
    "pages/food/food", // 美食列表
    "pages/my/my", // 我的
    "pages/township/township", // 乡镇介绍
    "pages/history/history", // 历史回顾
    "pages/foodcontent/foodcontent", // 美食详情
    "pages/scenic-detail/scenic-detail", // 景点详情
    "pages/info/info", // 个人信息
    "pages/collect/collect" // 我的收藏
  ]
}

TabBar配置

{
  "tabBar": {
    "color": "#666",
    "selectedColor": "#1296db",
    "backgroundColor": "#eee",
    "borderStyle": "white",
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/scenic/scenic",
        "text": "景点"
      },
      {
        "pagePath": "pages/food/food",
        "text": "美食"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的"
      }
    ]
  }
}

运行环境要求

• 微信开发者工具：建议使用最新稳定版
• 基础库版本：3.0.0 及以上（支持Skyline渲染引擎）
• AppID：需替换为自己的AppID

快速开始

1. 克隆/下载项目

将项目文件夹下载到本地

2. 导入项目

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

3. 运行项目

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

4. 真机调试

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

预置测试数据

景点

景点名称	所属乡镇	等级	适宜季节
白盆湖温泉度假村	白花镇	AAAA级	春季适宜
南昆山云顶温泉	白花镇	AAAA级	冬季适宜
长津冰雪大世界	白花镇	AAA级	夏季适宜
那里花开主题公园	白花镇	AAAA级	秋季适宜
双月湾	平海镇	AAAAA级	四季适宜
平海古城	平海镇	明朝遗迹	四季适宜
三角洲岛	平海镇	AAAA级	四季适宜
海滨温泉旅游度假区	平海镇	AAAA级	夏季适宜
簨寮湾	稔山镇	AAAAA级	夏季适宜
罗浮山	稔山镇	AAAA级	四季适宜
叶挺将军纪念园	稔山镇	AAA级	四季适宜
铁泉旅游度假区	稔山镇	AAAA级	夏季适宜

乡镇

乡镇名称	位置	特色
白花镇	惠东县西南部	沿江大镇，客家文化
稔山镇	稔平半岛西北部	海滨城镇，鱼米之乡
平海镇	稔平半岛东南端	天然深水良港，鱼米之乡
多祝镇	惠东县中部	省中心镇

美食分类

分类名称	代表菜品
精选热菜	娃娃菜炖豆腐、香酥黄金鱼、猪肉白菜
特色菜	手撕包菜、拍黄瓜
城心小炒	凉拌三丝
田园时蔬	八宝酱菜
粗粮主食	牛肉馅饼、鲜蔬菌菇粥

界面预览

项目包含演示视频文件 介绍家乡-效果展示.mp4，可查看完整功能演示。

扩展建议

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

1. 接入真实后端：将Mock数据替换为真实API接口
2. 用户登录系统：接入微信登录，实现真实用户体系
3. 搜索功能：实现景点、美食的全局搜索
4. 评论功能：实现用户评论和互动
5. 地图导航：接入地图SDK，实现景点导航功能
6. 更多乡镇：扩充乡镇数据，覆盖更多地区
7. 活动推荐：增加当地活动、节庆信息展示
8. 天气查询：接入天气API，展示当地天气
9. 酒店预订：增加酒店民宿推荐和预订功能
10. 分享功能：支持分享到好友和朋友圈

注意事项

1. 本项目为学习演示项目，所有数据均为模拟数据
2. 图片资源使用网络图片，需要网络环境支持
3. 如需发布上线，请替换为自己的AppID并完善相关资质
4. 项目使用Skyline渲染引擎，需要较新版本的基础库支持

许可证

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