非遗传承小程序源码项目简介这是一个非物质文化遗产展示与传承的微信小程序采用纯前端实现使用本地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/ # 分类图标 │ │ ├── opera.png # 戏曲图标 │ │ ├── craft.png # 传统技艺图标 │ │ ├── music.png # 音乐图标 │ │ ├── dance.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 # 其他图片 │ ├── v_1.mp4 # 视频资源 │ └── g_2.mp4 # 视频资源 ├── 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:[技艺1,技艺2],// 核心技艺列表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:[荣誉1,荣誉2],// 所获荣誉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),);页面路由配置{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并完善相关资质许可证本项目仅供学习交流使用请勿用于商业用途。