雷山苗韵 - 非物质文化遗产传承平台-开发者社区

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

项目简介

雷山苗韵是一款基于 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仓库链接]
技术支持：[邮箱地址]
文化顾问：[联系方式]

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