家乡介绍小程序
项目简介
这是一个家乡文化展示与旅游推荐的微信小程序，采用纯前端实现，使用本地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)
javascript
{
id: 1, // 景点ID
type: 1, // 所属乡镇类型（1:白花镇 2:平海镇 3:稔山镇）
img: 'http://...', // 景点图片URL
title: '白盆湖温泉度假村', // 景点名称
content: '景点详细介绍...', // 景点描述
position: '惠州市惠东县...', // 详细地址
time: '08:00 - 24:00', // 开放时间
level: 'AAAA级', // 景区等级
play: '春季适宜' // 适宜游玩季节
}乡镇数据 (townData)
javascript
{
img: 'http://...', // 乡镇图片URL
title: '白花镇', // 乡镇名称
content: '乡镇详细介绍...', // 乡镇描述
position: '广东省惠州市...', // 详细地址
longitude: '114.650420', // 经度
latitude: '22.940510' // 纬度
}历史数据 (historyData)
javascript
{
font: '1961年的安墩青山坳牌坊', // 图片说明
img: 'http://...' // 历史图片URL
}美食数据 (foodData)
javascript
{
_id: '5ac0896ca880f20358495508', // 分类ID
title: '精选热菜', // 分类名称
pid: '0', // 父级ID
list: [{ // 美食列表
_id: '5ac1a22011f48140d0002955',
cate_id: '5ac0896ca880f20358495508',
catename: '精选热菜',
title: '娃娃菜炖豆腐',
price: '2',
img_url: 'http://...'
}]
}用户数据 (userData)
javascript
{
nickname: '微信用户', // 用户昵称
avatarUrl: 'http://...' // 用户头像URL
}收藏数据 (starList)
javascript
'1,2,3'; // 收藏的景点ID列表，以逗号分隔存储核心业务逻辑
1. 景点查询
javascript
// 按乡镇类型筛选景点
const getSignList = (type) => {
const data = fetchSignList();
return data.filter((c) => c.type === type);
};2. 收藏功能
javascript
// 切换收藏状态
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. 获取收藏列表
javascript
// 获取用户收藏的景点
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. 用户信息管理
javascript
// 初始化用户信息
onShow() {
const defaultAvatarUrl = 'https://...'
const data = wx.getStorageSync('userInfo') || ''
wx.setStorageSync('userInfo', data ? data : {
nickname: '微信用户',
avatarUrl: defaultAvatarUrl
})
}页面路由配置
json
{
"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配置
json
{
"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. 导入项目
- 打开微信开发者工具
- 选择"导入项目"
- 选择项目目录
hownTown-min - 填入AppID（可使用测试号或自己的AppID）
- 点击"导入"
3. 运行项目
导入成功后，项目会自动编译运行，可在模拟器中预览效果
4. 真机调试
点击工具栏"预览"按钮，扫码在手机上体验
预置测试数据
景点
| 景点名称 | 所属乡镇 | 等级 | 适宜季节 |
|---|---|---|---|
| 白盆湖温泉度假村 | 白花镇 | AAAA级 | 春季适宜 |
| 南昆山云顶温泉 | 白花镇 | AAAA级 | 冬季适宜 |
| 长津冰雪大世界 | 白花镇 | AAA级 | 夏季适宜 |
| 那里花开主题公园 | 白花镇 | AAAA级 | 秋季适宜 |
| 双月湾 | 平海镇 | AAAAA级 | 四季适宜 |
| 平海古城 | 平海镇 | 明朝遗迹 | 四季适宜 |
| 三角洲岛 | 平海镇 | AAAA级 | 四季适宜 |
| 海滨温泉旅游度假区 | 平海镇 | AAAA级 | 夏季适宜 |
| 簨寮湾 | 稔山镇 | AAAAA级 | 夏季适宜 |
| 罗浮山 | 稔山镇 | AAAA级 | 四季适宜 |
| 叶挺将军纪念园 | 稔山镇 | AAA级 | 四季适宜 |
| 铁泉旅游度假区 | 稔山镇 | AAAA级 | 夏季适宜 |
乡镇
| 乡镇名称 | 位置 | 特色 |
|---|---|---|
| 白花镇 | 惠东县西南部 | 沿江大镇，客家文化 |
| 稔山镇 | 稔平半岛西北部 | 海滨城镇，鱼米之乡 |
| 平海镇 | 稔平半岛东南端 | 天然深水良港，鱼米之乡 |
| 多祝镇 | 惠东县中部 | 省中心镇 |
美食分类
| 分类名称 | 代表菜品 |
|---|---|
| 精选热菜 | 娃娃菜炖豆腐、香酥黄金鱼、猪肉白菜 |
| 特色菜 | 手撕包菜、拍黄瓜 |
| 城心小炒 | 凉拌三丝 |
| 田园时蔬 | 八宝酱菜 |
| 粗粮主食 | 牛肉馅饼、鲜蔬菌菇粥 |
界面预览
项目包含演示视频文件 介绍家乡-效果展示.mp4，可查看完整功能演示。
扩展建议
如需进一步完善项目，可考虑以下扩展：
- 接入真实后端：将Mock数据替换为真实API接口
- 用户登录系统：接入微信登录，实现真实用户体系
- 搜索功能：实现景点、美食的全局搜索
- 评论功能：实现用户评论和互动
- 地图导航：接入地图SDK，实现景点导航功能
- 更多乡镇：扩充乡镇数据，覆盖更多地区
- 活动推荐：增加当地活动、节庆信息展示
- 天气查询：接入天气API，展示当地天气
- 酒店预订：增加酒店民宿推荐和预订功能
- 分享功能：支持分享到好友和朋友圈
注意事项
- 本项目为学习演示项目，所有数据均为模拟数据
- 图片资源使用网络图片，需要网络环境支持
- 如需发布上线，请替换为自己的AppID并完善相关资质
- 项目使用Skyline渲染引擎，需要较新版本的基础库支持
许可证
本项目仅供学习交流使用，请勿用于商业用途。