非遗传承小程序

www_aiyuanma_vip2026-08-29 13:26

项目简介

这是一个非物质文化遗产展示与传承的微信小程序，采用纯前端实现，使用本地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)

javascript 复制代码 
{
  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)

javascript 复制代码 
{
  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)

javascript 复制代码 
{
  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)

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

用户收藏数据 (userCollections)

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

用户报名数据 (userRegistrations)

javascript 复制代码 
['act001', 'act002']; // 已报名的活动ID列表

当前用户数据 (currentUser)

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

核心业务逻辑

1. 非遗项目查询

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

2. 收藏功能

javascript 复制代码 
// 切换收藏状态
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. 活动报名

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

4. 关联数据查询

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

// 获取传承人的传承项目列表
const inheritingProjects = mockData.nonHeritageProjects.filter((p) =>
  foundInheritor.inheritingProjects.includes(p.id),
);

页面路由配置

json 复制代码 
{
  "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配置

json 复制代码 
{
  "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

注意事项

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

许可证

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

相关推荐
lhldsg1 小时前
线上住宿预约系统开发实战：从需求分析到接口设计
java·大数据·小程序·需求分析
mykj15512 小时前
一个小程序从想法到上线，需要经历哪些步骤
小程序·app开发·小程序开发
Coodor3 小时前
使用web也可以写NFC微信小程序拉取
前端·微信小程序·小程序·nfc拉起小程序
T01156184 小时前
全栈项目实战手记｜艺培场馆课时预约小程序底层安全、交互、分包全量迭代复盘
安全·小程序·bug·前端实战·全栈项目实战手记·小程序实战
奶油喜多多4 小时前
教育小程序定制开发指南：从需求梳理到上线运维
运维·小程序
2601_949950634 小时前
在线刷题用什么小程序？认识一下能导资料、AI出题的练题簿
人工智能·学习·小程序·刷题·小程序推荐
paopaokaka_luck5 小时前
基于springboot3+vue3+uniapp的河南非遗数字图谱小程序（协同过滤算法、数字图谱展示、ECharts 图形化分析）
java·前端·spring boot·学习·小程序·uni-app·echarts
Ai-_Man21 小时前
千问能否电脑批量导出？深度拆解「AI导出鸭」如何让这件事从“反人性”变成“优雅”
人工智能·ai·小程序
太阳之神aboluo1 天前
微信小程序 (1) 基础用法
微信小程序·小程序
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02ZCode 周末送额度活动开启：3 亿 Token 免费领取03GitHub 镜像站点04历年考研数学一、数学二、数学三真题试卷及答案PDF052026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？06微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新07AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路08蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接09Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费10VSCode+CodeX扩展，无法启动