企业官网建设流程全解析

非遗传承小程序源码

项目简介

这是一个非物质文化遗产展示与传承的微信小程序，采用纯前端实现，使用本地Mock数据模拟后端接口。项目完整实现了非遗项目浏览、传承人介绍、活动报名、资讯阅读、收藏管理等核心功能，适合作为微信小程序开发学习项目或计算机设计参考。

技术栈

项目特点

• 纯前端实现：无需后端服务器，所有数据使用本地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. 非遗项目查询

// 按分类筛选项目constfilteredProjects=mockData.nonHeritageProjects.filter((p)=>p.category===categoryName,);

2. 收藏功能

// 切换收藏状态toggleCollect:function(){constprojectId=this.data.projectId;letuserCollectionsProjects=mockData.userCollections.projects;constindex=userCollectionsProjects.indexOf(projectId);if(index>-1){userCollectionsProjects.splice(index,1);// 取消收藏}else{userCollectionsProjects.push(projectId);// 添加收藏}}

3. 活动报名

// 报名活动registerForActivity:function(){constactivityId=this.data.activityId;if(!this.data.hasRegistered){mockData.userRegistrations.push(activityId);this.setData({hasRegistered:true});}}

4. 关联数据查询

// 获取项目的传承人列表constprojectInheritors=mockData.inheritors.filter((inheritor)=>foundProject.inheritors.includes(inheritor.id),);// 获取传承人的传承项目列表constinheritingProjects=mockData.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 及以上
• AppID：wx445c1727641eb032（可替换为自己的AppID）

快速开始

1. 克隆/下载项目

将项目文件夹下载到本地

2. 导入项目

1. 打开微信开发者工具
2. 选择"导入项目"
3. 选择项目目录feiyi-min
4. 填入AppID（可使用测试号或自己的AppID）
5. 点击"导入"

3. 运行项目

导入成功后，项目会自动编译运行，可在模拟器中预览效果

4. 真机调试

点击工具栏"预览"按钮，扫码在手机上体验

预置测试数据

非遗项目

传承人

活动

资讯

界面预览

项目包含演示视频文件演示视频.mp4，可查看完整功能演示。

扩展建议

如需进一步完善项目，可考虑以下扩展：

1. 接入真实后端：将Mock数据替换为真实API接口
2. 用户登录系统：接入微信登录，实现真实用户体系
3. 搜索功能：实现非遗项目、传承人、活动的全局搜索
4. 评论功能：实现用户评论和互动
5. 地图功能：活动地点地图展示和导航
6. 消息通知：活动报名成功、活动开始提醒等推送通知
7. 更多分类：扩充非遗分类（美食、医药等）
8. VR/AR体验：增加非遗项目的沉浸式体验功能
9. 在线课程：非遗技艺学习课程
10. 电商功能：非遗文创产品购买

注意事项

1. 本项目为学习演示项目，所有数据均为模拟数据
2. 报名功能为模拟实现，不涉及真实报名
3. 视频链接为外部链接，需要网络环境支持
4. 如需发布上线，请替换为自己的AppID并完善相关资质

许可证

本项目仅供学习交流使用，请勿用于商业用途。