雷山苗韵 - 非物质文化遗产传承平台项目简介雷山苗韵是一款基于 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 classhero-swiper :indicator-dotstrue :autoplaytrue :interval4000 :duration800 indicator-colorrgba(255,255,255,0.3) indicator-active-colorrgba(255,255,255,0.8) swiper-item v-for(slide, idx) in heroSlides :keyidx img :srcslide stylewidth: 100vw; height: 100% alt /swiper-item /swiper每日苗语功能constdailyWordref({hmong:Nyob zoo,chinese:你好});constrefreshDaily(){dailyWord.valuegetDailyWord();};导航处理逻辑constnavTo(url){consttabbarPages[/pages/heritage/list/list,/pages/language/translate/translate,/pages/explore/map/map,/pages/profile/index/index];constisTabbarPagetabbarPages.some(pageurl.includes(page.split(?)[0]));if(isTabbarPage){// 处理查询参数和全局状态if(url.includes(?)){const[path,params]url.split(?);consturlParamsparseParams(params);if(path/pages/heritage/list/listurlParams.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){constfavoritesthis.getFavorites();constexistsfavorites.find(favfav.iditem.idfav.typeitem.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[];constkeykeyword.toLowerCase().trim();returndictionary.filter(itemitem.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 16HBuilderX 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仓库链接]技术支持[邮箱地址]文化顾问[联系方式]雷山苗韵致力于传承和弘扬苗族优秀传统文化让更多人了解和喜爱苗族文化的独特魅力。 
长河君 · 2026/10/14 21:12:06 · 阅读 1.2k 雷山苗韵 - 非物质文化遗产传承平台
雷山苗韵 - 非物质文化遗产传承平台项目简介雷山苗韵是一款基于 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 classhero-swiper :indicator-dotstrue :autoplaytrue :interval4000 :duration800 indicator-colorrgba(255,255,255,0.3) indicator-active-colorrgba(255,255,255,0.8) swiper-item v-for(slide, idx) in heroSlides :keyidx img :srcslide stylewidth: 100vw; height: 100% alt /swiper-item /swiper每日苗语功能constdailyWordref({hmong:Nyob zoo,chinese:你好});constrefreshDaily(){dailyWord.valuegetDailyWord();};导航处理逻辑constnavTo(url){consttabbarPages[/pages/heritage/list/list,/pages/language/translate/translate,/pages/explore/map/map,/pages/profile/index/index];constisTabbarPagetabbarPages.some(pageurl.includes(page.split(?)[0]));if(isTabbarPage){// 处理查询参数和全局状态if(url.includes(?)){const[path,params]url.split(?);consturlParamsparseParams(params);if(path/pages/heritage/list/listurlParams.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){constfavoritesthis.getFavorites();constexistsfavorites.find(favfav.iditem.idfav.typeitem.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[];constkeykeyword.toLowerCase().trim();returndictionary.filter(itemitem.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 16HBuilderX 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仓库链接]技术支持[邮箱地址]文化顾问[联系方式]雷山苗韵致力于传承和弘扬苗族优秀传统文化让更多人了解和喜爱苗族文化的独特魅力。