雷山苗韵 - 非物质文化遗产传承平台
项目简介
雷山苗韵是一款基于 uni-app 框架开发的跨平台小程序应用，专注于贵州雷山县苗族非物质文化遗产的数字化传承与推广。项目以"传承苗族文化，弘扬民族精神"为核心理念，通过现代化的数字技术手段，为用户提供沉浸式的苗族文化体验。
核心特色
- 🎨 文化传承：全面展示雷山县16项非物质文化遗产项目
- 🗣️ 语言学习：提供苗语词典和翻译功能，传承民族语言
- 🗺️ 文化导览：结合地理位置的文化地图和村落档案
- 📱 跨平台：支持微信小程序、H5、App等多端部署
- 🎯 用户体验：采用现代化UI设计，提供流畅的交互体验
功能模块介绍
1. 首页模块
- 轮播展示：精美的文化主题轮播图
- 每日苗语：每日推送一个苗语词汇，支持刷新功能
- 四大非遗入口：苗族银饰、苗族刺绣、芦笙文化、苗族节庆
- 精选推荐：展示热门非遗项目，支持横向滑动浏览
- 探索雷山：西江千户苗寨、非遗地图、苗语通快捷入口
2. 非遗名录模块
- 分类浏览：按传统技艺、民俗节庆、传统音乐、传统舞蹈、民间文学分类
- 项目详情：详细介绍每个非遗项目的历史、工艺、文化意义
- 收藏功能：支持用户收藏感兴趣的非遗项目
- 搜索功能：快速查找特定的非遗项目
3. 苗语通模块
- 词典查询：提供丰富的苗汉双语词典
- 分类学习：按问候语、日常用语、文化词汇等分类学习
- 学习记录：记录用户的学习历史和复习次数
- 发音指导：提供苗语拼音标注
4. 文化导览模块
- 非遗地图：基于地理位置的文化景点导览
- 村落档案：详细介绍雷山县各个苗族村寨
- 文化路线：推荐文化旅游路线
5. 个人中心模块
- 收藏管理：管理用户收藏的非遗项目
- 足迹记录：记录用户的浏览历史
- 学习统计：展示苗语学习进度和成果
- 关于我们：项目介绍和联系方式
技术栈
开发框架
- 前端框架：uni-app (Vue 3 + Composition API)
- UI组件：原生组件 + 自定义组件
- 状态管理：Vuex + 本地存储
- 构建工具：HBuilderX + Vite
技术特点
- 响应式设计：适配不同屏幕尺寸和设备
- 模块化开发：组件化架构，便于维护和扩展
- 数据持久化：使用 uni.storage 进行本地数据存储
- 性能优化：图片懒加载、组件按需加载
目录结构
雷山苗韵/
├── .kiro/ # Kiro 配置目录
│ └── specs/ # 规格文档
├── pages/ # 页面目录
│ ├── index/ # 首页
│ │ └── index.vue
│ ├── heritage/ # 非遗模块
│ │ ├── list/ # 非遗列表页
│ │ │ └── list.vue
│ │ └── detail/ # 非遗详情页
│ │ └── detail.vue
│ ├── language/ # 苗语模块
│ │ ├── translate/ # 苗语翻译页
│ │ │ └── translate.vue
│ │ └── daily/ # 每日苗语页
│ │ └── daily.vue
│ ├── explore/ # 探索模块
│ │ ├── map/ # 文化地图页
│ │ │ └── map.vue
│ │ └── village/ # 村落档案页
│ │ └── village.vue
│ ├── calendar/ # 苗年历模块
│ │ └── index/
│ │ └── index.vue
│ └── profile/ # 个人中心
│ └── index/
│ └── index.vue
├── static/ # 静态资源目录
│ ├── heritage/ # 非遗项目图片
│ ├── index/ # 首页相关图片
│ ├── explore/ # 探索模块图片
│ └── tabbar/ # 底部导航图标
├── utils/ # 工具类目录
│ ├── mockData.js # 模拟数据管理
│ └── zidian.js # 苗语词典数据
├── App.vue # 应用入口文件
├── main.js # 应用启动文件
├── pages.json # 页面配置文件
├── manifest.json # 应用配置文件
└── uni.scss # 全局样式文件页面重点代码解析
1. 首页核心功能 (pages/index/index.vue)
轮播图实现
vue
<swiper
class="hero-swiper"
:indicator-dots="true"
:autoplay="true"
:interval="4000"
:duration="800"
indicator-color="rgba(255,255,255,0.3)"
indicator-active-color="rgba(255,255,255,0.8)"
>
<swiper-item v-for="(slide, idx) in heroSlides" :key="idx">
<img :src="slide" style="width: 100vw; height: 100%" alt="">
</swiper-item>
</swiper>每日苗语功能
javascript
const dailyWord = ref({ hmong: 'Nyob zoo', chinese: '你好' });
const refreshDaily = () => {
dailyWord.value = getDailyWord();
};导航处理逻辑
javascript
const navTo = (url) => {
const tabbarPages = [
'/pages/heritage/list/list',
'/pages/language/translate/translate',
'/pages/explore/map/map',
'/pages/profile/index/index'
];
const isTabbarPage = tabbarPages.some(page =>
url.includes(page.split('?')[0])
);
if (isTabbarPage) {
// 处理查询参数和全局状态
if (url.includes('?')) {
const [path, params] = url.split('?');
const urlParams = parseParams(params);
if (path === '/pages/heritage/list/list' && urlParams.type) {
globalState.setHeritageFilter(urlParams.type);
}
}
uni.switchTab({ url: url.split('?')[0] });
} else {
uni.navigateTo({ url });
}
};2. 数据管理核心 (utils/mockData.js)
非遗数据结构
javascript
export const heritageData = [
{
id: 1,
title: '苗族银饰锻制技艺',
level: '国家级',
levelClass: 'national',
symbol: '银',
theme: 'silver',
desc: '以其精湛的工艺和独特的造型闻名于世',
tags: ['传统技艺', '金属工艺'],
category: 1,
type: 'silver',
cover: '/static/heritage/苗族银饰锻制技艺.jpg',
detail: {
introduction: '...',
history: '...',
craftsmanship: '...',
significance: '...'
}
}
// ... 更多数据
];用户数据管理类
javascript
class UserDataManager {
constructor() {
this.storageKeys = {
favorites: 'user_favorites',
visits: 'user_visits',
studies: 'user_studies'
};
}
// 收藏管理
addFavorite(item) {
const favorites = this.getFavorites();
const exists = favorites.find(fav =>
fav.id === item.id && fav.type === item.type
);
if (!exists) {
favorites.push({
...item,
favoriteTime: Date.now()
});
uni.setStorageSync(this.storageKeys.favorites,
JSON.stringify(favorites));
}
return favorites;
}
}3. 苗语词典功能 (utils/zidian.js)
词典数据结构
javascript
const dictionary = [
{
hmong: "Nyob zoo",
chinese: "你好",
category: "问候",
pinyin: "niú zǒu"
},
// ... 更多词条
];搜索功能实现
javascript
export function search(keyword) {
if (!keyword) return [];
const key = keyword.toLowerCase().trim();
return dictionary.filter(item =>
item.hmong.toLowerCase().includes(key) ||
item.chinese.includes(key) ||
item.category.includes(key)
);
}4. 全局样式设计 (App.vue)
CSS 变量定义
css
:root, page {
/* 主色调 - 靛蓝系 */
--primary-color: #1A5599;
--primary-dark: #0A2E5C;
--primary-light: #2D6CB5;
--accent-color: #4A90E2;
/* 背景色 */
--bg-color: #F5F8FC;
--card-bg: #FFFFFF;
/* 文字颜色 - 去黑色化 */
--text-main: #1A3A5C;
--text-sub: #5A7A9A;
--text-light: #7A9AB8;
--text-muted: #A8BDD4;
}设计理念
视觉设计
- 色彩方案：采用靛蓝蜡染色系，体现苗族传统文化特色
- 去黑色化：避免使用纯黑色，营造温和的视觉体验
- 文化元素：融入苗族传统图案和符号
- 现代感：简洁的界面设计，符合现代用户习惯
交互设计
- 直观导航：清晰的信息架构和导航结构
- 手势操作：支持滑动、点击等常见手势
- 反馈机制：及时的操作反馈和状态提示
- 无障碍：考虑不同用户群体的使用需求
数据来源
非遗项目数据
项目收录了雷山县16项具有代表性的非物质文化遗产项目：
国家级项目（4项）
- 苗族银饰锻制技艺
- 苗族刺绣
- 苗年
- 苗族芦笙音乐
- 苗族芦笙舞
省级项目（1项）
- 苗族铜鼓舞
县级项目（11项）
- 雷山苗族腌鱼制作技艺
- 苗族传统洗涤技艺
- 苗族长桌宴
- 独南粽子节
- 苗族立房习俗
- 苗族芦笙曲
- 雷山苗语红色歌谣
- 苗族谚语
- 大坪山余王爷的传说
- 苗族丧葬送水辞
苗语词典数据
收录了60+个常用苗语词汇，涵盖：
- 问候语（5个）
- 日常用语（7个）
- 情感表达（4个）
- 数字（10个）
- 文化词汇（7个）
- 节日相关（3个）
- 自然词汇（4个）
- 家庭称谓（6个）
部署说明
开发环境
- Node.js 16+
- HBuilderX 3.8+
- 微信开发者工具（小程序开发）
构建命令
bash
# 开发环境
npm run dev:mp-weixin
# 生产构建
npm run build:mp-weixin
# H5 开发
npm run dev:h5
# App 构建
npm run build:app发布平台
- 微信小程序
- H5 网页版
- Android/iOS App
未来规划
功能扩展
- 增加音频播放功能，支持苗语发音
- 添加AR功能，增强文化体验
- 开发社区功能，用户可分享文化心得
- 集成地图API，提供精确的文化景点导航
- 添加多语言支持（英文版）
技术优化
- 引入TypeScript提升代码质量
- 优化图片加载和缓存策略
- 实现离线功能支持
- 添加数据统计和分析功能
内容丰富
- 增加更多非遗项目介绍
- 扩充苗语词典内容
- 添加视频教学内容
- 制作文化专题内容
联系方式
如有任何问题或建议，欢迎联系项目团队：
- 项目地址：GitHub仓库链接
- 技术支持：邮箱地址
- 文化顾问：联系方式
雷山苗韵致力于传承和弘扬苗族优秀传统文化，让更多人了解和喜爱苗族文化的独特魅力。