智慧党建小程序

智慧党建小程序

📋 项目概述

本项目是一款基于微信小程序原生框架开发的智慧党建平台，旨在为党组织和党员提供便捷的党建学习、党务管理和信息交流服务。项目采用纯前端实现，使用本地Mock数据模拟后端接口，适合作为计算机设计、课程作业或党建小程序开发学习参考。

🛠️ 技术栈

技术	版本/说明
开发框架	微信小程序原生框架
基础库版本	trial（最新试用版）
开发语言	JavaScript (ES6+)
样式语言	WXSS (类CSS)
模板语言	WXML
数据管理	本地Mock数据 (mockData.js)
组件化	微信小程序自定义组件

📁 项目结构

dangjian-min/
├── app.js                    # 小程序入口文件
├── app.json                  # 小程序全局配置
├── app.wxss                  # 全局样式文件
├── project.config.json       # 项目配置文件
├── sitemap.json              # 小程序索引配置
├── 演示视频.mp4              # 项目演示视频
│
├── components/               # 自定义组件目录
│   └── banner-swiper/        # 轮播图组件
│       ├── banner-swiper.js
│       ├── banner-swiper.json
│       ├── banner-swiper.wxml
│       └── banner-swiper.wxss
│
├── images/                   # 图片资源目录
│   ├── tabbar/               # 底部导航栏图标
│   │   ├── index.png
│   │   ├── index_active.png
│   │   ├── my.png
│   │   └── my_active.png
│   ├── 1.png ~ 4.png         # 功能入口图标
│   ├── avatar.png            # 默认头像
│   └── banner1.jpg, banner2.jpg  # 轮播图
│
├── pages/                    # 页面目录
│   ├── index/                # 首页
│   ├── my/                   # 个人中心
│   ├── history/              # 党史学习列表
│   ├── history_detail/       # 党史详情
│   ├── notices/              # 通知公告列表
│   ├── notice_detail/        # 通知详情
│   ├── members/              # 党员风采列表
│   ├── member_detail/        # 党员详情
│   ├── theory/               # 理论学习分类
│   ├── theory_content/       # 理论学习内容
│   └── about/                # 关于我们
│
└── utils/                    # 工具目录
    ├── mockData.js           # 模拟数据文件
    └── util.js               # 工具函数

🎯 功能模块

1. 首页模块 (index)

• 轮播图展示：展示党建宣传图片和重要信息
• 核心功能入口：快速访问党史学习、通知公告、党员风采、理论学习
• 最新动态：展示最新的党建新闻和通知

2. 党史学习模块 (history)

• 党史列表：展示重要党史事件列表
• 党史详情：查看党史事件的详细内容
• 包含内容：中国共产党成立、秋收起义、遵义会议、抗日战争胜利等

3. 通知公告模块 (notices)

• 公告列表：展示支部通知公告
• 公告详情：查看通知的完整内容
• 包含内容：党员大会通知、专题辅导报告、实践活动通知等

4. 党员风采模块 (members)

• 党员列表：展示优秀党员信息
• 党员详情：查看党员的先进事迹
• 包含内容：支部书记、青年党员、老党员等典型人物

5. 理论学习模块 (theory)

• 学习分类：按主题分类展示学习内容
• 学习内容：查看具体的理文章章
• 分类包含：
  • 习近平新时代中国特色社会主义思想
  • 党章党规
  • 系列讲话

6. 个人中心模块 (my)

• 用户信息：展示党员基本信息（姓名、支部、党龄）
• 学习数据：已学习文章数、学习积分统计
• 功能入口：关于我们等功能

🎨 UI设计特点

• 主题色：红色 (#CC0000) - 体现党建特色
• 设计风格：简洁大方、庄重严肃
• 卡片布局：采用卡片式设计，层次分明
• 底部导航：双Tab设计（首页、我的）

📦 自定义组件

banner-swiper 轮播图组件

可配置属性：

属性	类型	默认值	说明
banners	Array	[]	轮播图数据
indicatorDots	Boolean	true	显示指示点
autoplay	Boolean	true	自动播放
interval	Number	3000	切换间隔(ms)
duration	Number	500	动画时长(ms)
circular	Boolean	true	衔接滑动

📊 数据结构

轮播图数据

{
  id: 1,
  image: '/images/banner1.jpg',
  title: '学习贯彻党的二十大精神'
}

党史数据

{
  id: 'h001',
  title: '中国共产党成立',
  date: '1921年7月',
  summary: '简要描述...',
  content: '详细内容...'
}

党员数据

{
  id: 'm001',
  name: '张伟',
  avatar: '/images/avatar.png',
  position: '支部书记',
  deeds: '先进事迹...'
}

理论学习数据

{
  id: 't001',
  name: '分类名称',
  articles: [
    { aid: 'a001', title: '文章标题', content: '文章内容' }
  ]
}

🚀 运行说明

环境要求

• 微信开发者工具（最新版本）
• 微信小程序基础库 2.0+

运行步骤

1. 下载并安装 微信开发者工具
2. 打开微信开发者工具，选择"导入项目"
3. 选择项目目录 dangjian-min
4. 填入自己的 AppID（或使用测试号）
5. 点击"编译"即可预览

AppID 配置

当前项目 AppID：wx445c1727641eb032

如需发布，请替换为自己的小程序 AppID

📱 页面路由

页面	路径	说明
首页	/pages/index/index	TabBar页面
个人中心	/pages/my/my	TabBar页面
党史学习	/pages/history/history	列表页
党史详情	/pages/history_detail/history_detail	详情页
通知公告	/pages/notices/notices	列表页
通知详情	/pages/notice_detail/notice_detail	详情页
党员风采	/pages/members/members	列表页
党员详情	/pages/member_detail/member_detail	详情页
理论学习	/pages/theory/theory	分类页
理论内容	/pages/theory_content/theory_content	内容页
关于我们	/pages/about/about	信息页

✨ 项目特点

1. 纯前端实现：无需后端服务，使用Mock数据，便于学习和演示
2. 组件化开发：封装可复用的轮播图组件
3. 模块化数据：统一管理静态数据，便于维护和扩展
4. 党建主题：红色主题设计，符合党建平台定位
5. 完整功能：涵盖党史学习、通知公告、党员风采、理论学习等核心功能
6. 代码规范：结构清晰，注释完善，易于理解

🔧 扩展建议

1. 接入后端：将 mockData.js 替换为真实的 API 接口调用
2. 用户认证：添加微信登录和用户身份验证
3. 数据持久化：使用云开发或自建后端存储数据
4. 功能扩展：
   • 添加在线答题/考试功能
   • 添加党费缴纳记录
   • 添加组织生活记录
   • 添加学习打卡功能
5. 消息推送：接入微信订阅消息，推送重要通知

📄 文件说明

文件	说明
app.js	小程序生命周期管理、全局数据
app.json	页面路由、窗口配置、TabBar配置
app.wxss	全局样式定义
mockData.js	所有模拟数据的统一管理
util.js	工具函数（日期格式化等）

📞 适用场景

• 计算机设计/课程设计
• 小程序开发学习
• 党建平台原型开发
• 企业/单位党建小程序定制开发参考

---

项目类型：纯微信小程序（无后端）
开发工具：微信开发者工具
技术难度：⭐⭐ 入门级

获取完整源码

• 网站：AI源码
• 本项目详情：https://www.aiyuanma.vip/posts/dangjian-min