黔东南苗族非遗文化项目简介这是一个专门展示黔东南苗族非物质文化遗产的微信小程序采用纯前端实现使用本地Mock数据模拟后端接口。项目聚焦于苗族传统文化完整实现了苗族非遗项目浏览、传承人介绍、文化活动报名、资讯阅读、收藏管理等核心功能。通过数字化手段传承和弘扬苗族优秀传统文化适合作为微信小程序开发学习项目或计算机设计参考。技术栈技术版本/说明开发框架微信小程序原生框架基础库版本trial (最新试用版)开发语言JavaScript (ES6)样式语言WXSS (微信小程序样式)模板语言WXML (微信小程序模板)数据存储本地Storage持久化数据模拟Mock Data (本地模拟数据)项目特点聚焦苗族文化专注于黔东南苗族非遗文化的展示与传承纯前端实现无需后端服务器所有数据使用本地Mock模拟数据持久化收藏和报名数据使用本地存储关闭小程序后数据不丢失完整业务流程涵盖苗族非遗项目浏览、传承人了解、文化活动报名、资讯阅读等完整流程UI设计精美界面风格简洁大方蓝色主题配色符合文化类应用调性多媒体支持支持图片预览、视频播放等多媒体展示生动展现苗族文化魅力分享功能支持分享到好友和朋友圈助力苗族文化传播功能模块1. 首页模块 (pages/index)轮播图展示精选非遗项目和活动非遗分类入口传统舞蹈、传统技艺、民间文学、传统美术精选非遗项目推荐最新活动展示搜索入口待开发2. 分类列表模块 (pages/categoryList)按分类展示非遗项目列表支持分类筛选点击进入项目详情3. 非遗项目详情模块 (pages/detail)展示非遗项目完整信息项目名称、级别、分类项目简介和历史渊源核心技艺介绍多媒体展示图片、视频相关传承人列表收藏/取消收藏功能分享到好友/朋友圈图片预览功能4. 传承人列表模块 (pages/inheritorList)展示所有黔东南苗族非遗传承人传承人头像、姓名、称号点击进入传承人详情5. 传承人详情模块 (pages/inheritorDetail)传承人基本信息头像、姓名、称号个人简介所获荣誉传承项目列表相关作品展示图片、视频相关文章/报道关注/取消关注功能分享功能留言功能待开发6. 活动列表模块 (pages/activityList)展示所有非遗相关活动活动封面、标题、时间、地点点击进入活动详情7. 活动详情模块 (pages/activityDetail)活动完整信息展示活动标题、时间、地点、主办方活动详细介绍在线报名功能收藏/取消收藏功能分享功能8. 资讯列表模块 (pages/newsList)展示非遗相关新闻资讯新闻标题、日期、来源、摘要点击进入资讯详情9. 资讯详情模块 (pages/newsDetail)新闻完整内容展示标题、日期、来源正文内容10. 我的模块 (pages/my)用户信息展示头像、昵称我的收藏入口我的报名入口收藏和报名数量统计11. 我的收藏模块 (pages/myCollections)收藏的非遗项目列表收藏的传承人列表收藏的活动列表点击可跳转到对应详情页12. 我的报名模块 (pages/myRegistrations)已报名的活动列表活动状态展示点击可跳转到活动详情项目结构feiyi-min/ ├── app.js # 小程序入口文件全局数据管理 ├── app.json # 小程序全局配置页面路由、TabBar、窗口样式 ├── app.wxss # 全局样式文件 ├── project.config.json # 项目配置文件 ├── project.private.config.json # 项目私有配置 ├── sitemap.json # 小程序索引配置 ├── .prettierrc # 代码格式化配置 ├── images/ # 图片资源目录 │ ├── tabbar/ # TabBar图标 │ │ ├── home.png # 首页图标 │ │ ├── home_selected.png # 首页选中图标 │ │ ├── activity.png # 活动图标 │ │ ├── activity_selected.png # 活动选中图标 │ │ ├── news.png # 资讯图标 │ │ ├── news_selected.png # 资讯选中图标 │ │ ├── my.png # 我的图标 │ │ └── my_selected.png # 我的选中图标 │ ├── category/ # 分类图标 │ │ ├── dance.png # 传统舞蹈图标苗族芦笙舞 │ │ ├── craft.png # 传统技艺图标银饰、蜡染、刺绣 │ │ ├── opera.png # 民间文学图标苗族古歌 │ │ ├── music.png # 音乐图标 │ │ ├── food.png # 美食图标苗族传统美食 │ │ └── medicine.png # 医药图标苗族传统医药 │ ├── icons/ # 功能图标 │ │ ├── search.png # 搜索图标 │ │ ├── heart_filled.png # 收藏已选中 │ │ ├── heart_outline.png # 收藏未选中 │ │ ├── star_filled.png # 关注已选中 │ │ ├── star_outline.png # 关注未选中 │ │ ├── share.png # 分享图标 │ │ ├── location.png # 位置图标 │ │ ├── time.png # 时间图标 │ │ ├── organizer.png # 主办方图标 │ │ ├── history.png # 历史图标 │ │ ├── arrow_right.png # 右箭头 │ │ ├── my_collection.png # 我的收藏图标 │ │ └── my_registration.png # 我的报名图标 │ ├── default-avatar.png # 默认头像 │ ├── placeholder.png # 占位图 │ ├── b_1.jpg, b_2.jpg # 轮播图/活动图 │ ├── f_1.jpg ~ f_5.jpg # 非遗项目封面图 │ ├── g_1.jpg # 展示图片 │ ├── z_1.jpg, z_2.jpg # 云锦展示图 │ ├── q_1.jpg # 其他图片 ├── pages/ # 页面目录 │ ├── index/ # 首页 │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ ├── categoryList/ # 分类列表页 │ │ ├── categoryList.js │ │ ├── categoryList.json │ │ ├── categoryList.wxml │ │ └── categoryList.wxss │ ├── detail/ # 非遗项目详情页 │ │ ├── detail.js │ │ ├── detail.json │ │ ├── detail.wxml │ │ └── detail.wxss │ ├── inheritorList/ # 传承人列表页 │ │ ├── inheritorList.js │ │ ├── inheritorList.json │ │ ├── inheritorList.wxml │ │ └── inheritorList.wxss │ ├── inheritorDetail/ # 传承人详情页 │ │ ├── inheritorDetail.js │ │ ├── inheritorDetail.json │ │ ├── inheritorDetail.wxml │ │ └── inheritorDetail.wxss │ ├── activityList/ # 活动列表页 │ │ ├── activityList.js │ │ ├── activityList.json │ │ ├── activityList.wxml │ │ └── activityList.wxss │ ├── activityDetail/ # 活动详情页 │ │ ├── activityDetail.js │ │ ├── activityDetail.json │ │ ├── activityDetail.wxml │ │ └── activityDetail.wxss │ ├── newsList/ # 资讯列表页 │ │ ├── newsList.js │ │ ├── newsList.json │ │ ├── newsList.wxml │ │ └── newsList.wxss │ ├── newsDetail/ # 资讯详情页 │ │ ├── newsDetail.js │ │ ├── newsDetail.json │ │ ├── newsDetail.wxml │ │ └── newsDetail.wxss │ ├── my/ # 我的页面 │ │ ├── my.js │ │ ├── my.json │ │ ├── my.wxml │ │ └── my.wxss │ ├── myCollections/ # 我的收藏页 │ │ ├── myCollections.js │ │ ├── myCollections.json │ │ ├── myCollections.wxml │ │ └── myCollections.wxss │ └── myRegistrations/ # 我的报名页 │ ├── myRegistrations.js │ ├── myRegistrations.json │ ├── myRegistrations.wxml │ └── myRegistrations.wxss └── utils/ # 工具类目录 └── mockData.js # Mock数据文件数据模型非遗项目数据 (nonHeritageProjects){id:nh001,// 项目IDname:苗族芦笙舞,// 项目名称category:传统舞蹈,// 分类level:国家级,// 级别国家级/省级/世界级inheritors:[in001,in002],// 关联传承人ID列表coverImage:/images/f_1.jpg,// 封面图description:项目简介...,// 项目描述history:历史渊源...,// 历史介绍techniques:[踩芦笙,转芦笙,抛芦笙,群体围圈舞],// 核心技艺列表media:[// 多媒体资源{type:video,url:...},{type:image,url:...}],relatedActivities:[act001],// 关联活动ID列表comments:[// 评论列表{user:用户名,content:评论内容,date:2025-06-01}]}传承人数据 (inheritors){id:in001,// 传承人IDname:吴胜明,// 姓名avatar:/images/default-avatar.png,// 头像title:苗族芦笙舞国家级黔东南苗族非遗文化人,// 称号bio:个人简介...,// 个人简介inheritingProjects:[nh001],// 传承项目ID列表honors:[国家级黔东南苗族非遗文化人,贵州省民族文化传承奖],// 所获荣誉media:[// 作品展示{type:video,url:...},{type:image,url:...}],articles:[// 相关文章{id:news001,title:文章标题,date:2025-05-20}]}活动数据 (activities){id:act001,// 活动IDtitle:黔东南苗族文化节芦笙舞大赛,// 活动标题time:2025年7月15日-7月20日,// 活动时间location:凯里市苗族文化广场,// 活动地点organizer:黔东南州文化和旅游局,// 主办方description:活动详情...,// 活动描述image:/images/b_1.jpg,// 活动封面图isOnlineRegistration:true,// 是否支持在线报名registrationLink:,// 报名链接participants:[user001]// 已报名用户ID列表}资讯数据 (news){id:news001,// 资讯IDtitle:黔东南苗族非遗进校园活动圆满成功,// 标题date:2025-06-10,// 发布日期source:贵州日报,// 来源summary:摘要内容...,// 摘要content:正文内容...// 正文}用户收藏数据 (userCollections){projects:[nh001],// 收藏的项目ID列表inheritors:[in001],// 关注的传承人ID列表activities:[act001]// 收藏的活动ID列表}用户报名数据 (userRegistrations)[act001,act002];// 已报名的活动ID列表当前用户数据 (currentUser){id:user001,// 用户IDnickname:苗族文化爱好者,// 昵称avatar:/images/default-avatar.png// 头像}核心业务逻辑1. 非遗项目查询// 按分类筛选项目constfilteredProjectsmockData.nonHeritageProjects.filter((p)p.categorycategoryName,);2. 收藏功能// 切换收藏状态toggleCollect:function(){constprojectIdthis.data.projectId;letuserCollectionsProjectsmockData.userCollections.projects;constindexuserCollectionsProjects.indexOf(projectId);if(index-1){userCollectionsProjects.splice(index,1);// 取消收藏}else{userCollectionsProjects.push(projectId);// 添加收藏}}3. 活动报名// 报名活动registerForActivity:function(){constactivityIdthis.data.activityId;if(!this.data.hasRegistered){mockData.userRegistrations.push(activityId);this.setData({hasRegistered:true});}}4. 关联数据查询// 获取项目的传承人列表constprojectInheritorsmockData.inheritors.filter((inheritor)foundProject.inheritors.includes(inheritor.id),);// 获取传承人的传承项目列表constinheritingProjectsmockData.nonHeritageProjects.filter((p)foundInheritor.inheritingProjects.includes(p.id),);5. 苗族分类图标映射// 分类图标配置constcategoryIcons{传统舞蹈:/images/category/dance.png,传统技艺:/images/category/craft.png,民间文学:/images/category/opera.png,传统美术:/images/category/craft.png,};页面路由配置{pages:[pages/index/index,// 首页默认启动页pages/categoryList/categoryList,// 分类列表pages/detail/detail,// 非遗项目详情pages/inheritorList/inheritorList,// 传承人列表pages/inheritorDetail/inheritorDetail,// 传承人详情pages/activityList/activityList,// 活动列表pages/activityDetail/activityDetail,// 活动详情pages/newsList/newsList,// 资讯列表pages/newsDetail/newsDetail,// 资讯详情pages/my/my,// 我的pages/myCollections/myCollections,// 我的收藏pages/myRegistrations/myRegistrations// 我的报名]}TabBar配置{tabBar:{color:#7A7E83,selectedColor:#007AFF,borderStyle:black,backgroundColor:#F8F8F8,list:[{pagePath:pages/index/index,text:首页},{pagePath:pages/activityList/activityList,text:活动},{pagePath:pages/newsList/newsList,text:资讯},{pagePath:pages/my/my,text:我的}]}}运行环境要求微信开发者工具建议使用最新稳定版基础库版本2.19.0 及以上AppIDwx445c1727641eb032可替换为自己的AppID快速开始1. 克隆/下载项目将项目文件夹下载到本地2. 导入项目打开微信开发者工具选择导入项目选择项目目录feiyi-min填入AppID可使用测试号或自己的AppID点击导入3. 运行项目导入成功后项目会自动编译运行可在模拟器中预览效果4. 真机调试点击工具栏预览按钮扫码在手机上体验预置测试数据非遗项目项目名称分类级别苗族芦笙舞传统舞蹈国家级苗族银饰锻制技艺传统技艺国家级苗族古歌民间文学世界级苗族蜡染技艺传统技艺国家级苗族刺绣传统技艺国家级传承人姓名称号传承项目吴胜明苗族芦笙舞国家级黔东南苗族非遗文化人苗族芦笙舞杨秀珍苗族芦笙舞省级黔东南苗族非遗文化人苗族芦笙舞潘仕学苗族银饰锻制技艺国家级黔东南苗族非遗文化人苗族银饰锻制技艺张金花苗族古歌国家级黔东南苗族非遗文化人苗族古歌杨芳苗族蜡染技艺国家级黔东南苗族非遗文化人苗族蜡染技艺韦桃花苗族刺绣国家级传承人苗族刺绣活动活动名称时间地点黔东南苗族文化节芦笙舞大赛2025年7月15日-7月20日凯里市苗族文化广场苗族古歌传承班千年古韵今犹在2025年8月10日台江县苗族文化传习所资讯标题来源日期黔东南苗族非遗进校园活动圆满成功贵州日报2025-06-10黔东南苗族非遗项目保护新进展新华网贵州频道2025-05-25界面预览项目包含演示视频文件演示视频.mp4可查看完整功能演示。扩展建议如需进一步完善项目可考虑以下扩展接入真实后端将Mock数据替换为真实API接口对接黔东南文旅数据库用户登录系统接入微信登录实现真实用户体系搜索功能实现苗族非遗项目、传承人、活动的全局搜索评论功能实现用户评论和互动促进文化交流地图功能苗族文化活动地点地图展示和导航消息通知活动报名成功、苗族节庆提醒等推送通知更多苗族文化分类扩充分类苗族美食、苗族医药、苗族建筑等VR/AR体验增加苗族非遗项目的沉浸式体验功能在线课程苗族传统技艺学习课程芦笙制作、刺绣技法等电商功能苗族文创产品、手工艺品购买多语言支持增加苗语语音介绍和字幕文化地图黔东南苗族村寨文化地图导览传承人直播传承人技艺展示直播功能文化日历苗族传统节日和文化活动日历注意事项本项目为学习演示项目所有数据均为模拟数据报名功能为模拟实现不涉及真实报名视频链接为外部链接需要网络环境支持如需发布上线请替换为自己的AppID并完善相关资质许可证本项目仅供学习交流使用请勿用于商业用途。
