非遗传承小程序

项目简介

这是一个非物质文化遗产展示与传承的微信小程序，采用纯前端实现，使用本地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',                    // 项目ID
  name: '川剧变脸',               // 项目名称
  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',                    // 传承人ID
  name: '王小龙',                 // 姓名
  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',                   // 活动ID
  title: '非遗文化周：川剧变脸表演', // 活动标题
  time: '2025年7月15日-7月20日',  // 活动时间
  location: '市文化中心',         // 活动地点
  organizer: '市文化和旅游局',    // 主办方
  description: '活动详情...',     // 活动描述
  image: '/images/b_1.jpg',       // 活动封面图
  isOnlineRegistration: true,     // 是否支持在线报名
  registrationLink: '',           // 报名链接
  participants: ['user001']       // 已报名用户ID列表
}

资讯数据 (news)

{
  id: 'news001',                  // 资讯ID
  title: '非遗进校园活动圆满成功', // 标题
  date: '2025-06-10',             // 发布日期
  source: '人民日报',             // 来源
  summary: '摘要内容...',         // 摘要
  content: '正文内容...'          // 正文
}

用户收藏数据 (userCollections)

{
  projects: ['nh001'],            // 收藏的项目ID列表
  inheritors: ['in001'],          // 关注的传承人ID列表
  activities: ['act001']          // 收藏的活动ID列表
}

用户报名数据 (userRegistrations)

['act001', 'act002']; // 已报名的活动ID列表

当前用户数据 (currentUser)

{
  id: 'user001',                  // 用户ID
  nickname: '非遗小助手',         // 昵称
  avatar: '/images/default-avatar.png' // 头像
}

核心业务逻辑

1. 非遗项目查询

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

2. 收藏功能

// 切换收藏状态
toggleCollect: function() {
  const projectId = this.data.projectId;
  let userCollectionsProjects = mockData.userCollections.projects;

  const index = userCollectionsProjects.indexOf(projectId);
  if (index > -1) {
    userCollectionsProjects.splice(index, 1); // 取消收藏
  } else {
    userCollectionsProjects.push(projectId);  // 添加收藏
  }
}

3. 活动报名

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

4. 关联数据查询

// 获取项目的传承人列表
const projectInheritors = mockData.inheritors.filter((inheritor) =>
  foundProject.inheritors.includes(inheritor.id),
);

// 获取传承人的传承项目列表
const inheritingProjects = 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. 真机调试

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

预置测试数据

非遗项目

项目名称	分类	级别
川剧变脸	戏曲	国家级
南京云锦织造技艺	传统技艺	国家级
古琴艺术	音乐	世界级
皮影戏	传统戏剧	国家级
傣族孔雀舞	传统舞蹈	国家级

传承人

姓名	称号	传承项目
王小龙	川剧变脸国家级非遗传承人	川剧变脸
张翠花	川剧变脸省级非遗传承人	川剧变脸
李明	南京云锦织造技艺国家级非遗传承人	南京云锦织造技艺
赵雅静	古琴艺术国家级非遗传承人	古琴艺术
秦永亮	皮影戏国家级非遗传承人	皮影戏
刀美兰	傣族孔雀舞国家级传承人	傣族孔雀舞

活动

活动名称	时间	地点
非遗文化周：川剧变脸表演	2025年7月15日-7月20日	市文化中心
古琴雅集：高山流水遇知音	2025年8月10日	古琴文化馆

资讯

标题	来源	日期
非遗进校园活动圆满成功	人民日报	2025-06-10
国家级非遗项目保护新进展	新华网	2025-05-25

界面预览

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

扩展建议

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

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

注意事项

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

许可证

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