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

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

项目简介

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

每日苗语功能

const dailyWord = ref({ hmong: 'Nyob zoo', chinese: '你好' });

const refreshDaily = () => {
  dailyWord.value = getDailyWord();
};

导航处理逻辑

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)

非遗数据结构

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: '...'
    }
  }
  // ... 更多数据
];

用户数据管理类

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)

词典数据结构

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

搜索功能实现

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 变量定义

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

构建命令

# 开发环境
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仓库链接]
• 技术支持：[邮箱地址]
• 文化顾问：[联系方式]

---

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

获取完整源码

• 网站：AI源码
• 本项目详情：https://www.aiyuanma.vip/posts/feiyi-min-version3-uniapp