雷山苗韵 - 非物质文化遗产传承平台

项目简介

雷山苗韵是一款基于 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)

轮播图实现

<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>

每日苗语功能

constdailyWord=ref({hmong:'Nyob zoo',chinese:'你好'});constrefreshDaily=()=>{dailyWord.value=getDailyWord();};

导航处理逻辑

constnavTo=(url)=>{consttabbarPages=['/pages/heritage/list/list','/pages/language/translate/translate','/pages/explore/map/map','/pages/profile/index/index'];constisTabbarPage=tabbarPages.some(page=>url.includes(page.split('?')[0]));if(isTabbarPage){// 处理查询参数和全局状态if(url.includes('?')){const[path,params]=url.split('?');consturlParams=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)

非遗数据结构

exportconstheritageData=[{id:1,title:'苗族银饰锻制技艺',level:'国家级',levelClass:'national',symbol:'银',theme:'silver',desc:'以其精湛的工艺和独特的造型闻名于世',tags:['传统技艺','金属工艺'],category:1,type:'silver',cover:'/static/heritage/苗族银饰锻制技艺.jpg',detail:{introduction:'...',history:'...',craftsmanship:'...',significance:'...'}}// ... 更多数据];

用户数据管理类

classUserDataManager{constructor(){this.storageKeys={favorites:'user_favorites',visits:'user_visits',studies:'user_studies'};}// 收藏管理addFavorite(item){constfavorites=this.getFavorites();constexists=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));}returnfavorites;}}

3. 苗语词典功能 (utils/zidian.js)

词典数据结构

constdictionary=[{hmong:"Nyob zoo",chinese:"你好",category:"问候",pinyin:"niú zǒu"},// ... 更多词条];

搜索功能实现

exportfunctionsearch(keyword){if(!keyword)return[];constkey=keyword.toLowerCase().trim();returndictionary.filter(item=>item.hmong.toLowerCase().includes(key)||item.chinese.includes(key)||item.category.includes(key));}

4. 全局样式设计 (App.vue)

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+
• 微信开发者工具（小程序开发）

构建命令

# 开发环境npmrun dev:mp-weixin# 生产构建npmrun build:mp-weixin# H5 开发npmrun dev:h5# App 构建npmrun build:app

发布平台

• 微信小程序
• H5 网页版
• Android/iOS App

未来规划

功能扩展

• 增加音频播放功能，支持苗语发音
• 添加AR功能，增强文化体验
• 开发社区功能，用户可分享文化心得
• 集成地图API，提供精确的文化景点导航
• 添加多语言支持（英文版）

技术优化

• 引入TypeScript提升代码质量
• 优化图片加载和缓存策略
• 实现离线功能支持
• 添加数据统计和分析功能

内容丰富

• 增加更多非遗项目介绍
• 扩充苗语词典内容
• 添加视频教学内容
• 制作文化专题内容

联系方式

如有任何问题或建议，欢迎联系项目团队：

• 项目地址：[GitHub仓库链接]
• 技术支持：[邮箱地址]
• 文化顾问：[联系方式]

雷山苗韵致力于传承和弘扬苗族优秀传统文化，让更多人了解和喜爱苗族文化的独特魅力。