中医药文化介绍小程序

项目简介

这是一个中医药文化科普与介绍的微信小程序，采用纯前端实现，使用本地Mock数据模拟后端接口。项目完整实现了中医知识学习、中药材介绍、名医典故、收藏管理、浏览历史等核心功能，适合作为微信小程序开发学习项目或计算机设计参考。

技术栈

技术	版本/说明
开发框架	微信小程序原生框架
基础库版本	trial (最新试用版)
开发语言	JavaScript (ES6+)
样式语言	WXSS (微信小程序样式)
模板语言	WXML (微信小程序模板)
数据存储	本地Storage持久化
数据模拟	Mock Data (本地模拟数据)

项目特点

• 纯前端实现：无需后端服务器，所有数据使用本地Mock模拟
• 数据持久化：收藏和浏览历史数据使用本地存储，关闭小程序后数据不丢失
• 完整业务流程：涵盖中医知识学习、药材查询、名医了解、收藏管理等完整流程
• UI设计清新：界面风格简洁大方，蓝色主题配色，符合文化科普类应用调性
• 异步数据加载：模拟真实API请求，支持异步数据获取

功能模块

1. 首页模块 (pages/index)

• 轮播图展示中医药文化精选内容
• 推荐文章展示
• 热门中药材推荐
• 功能入口导航（知识、药材、名医）
• 点击进入各详情页

2. 中医知识列表模块 (pages/knowledge/list)

• 中医知识文章列表展示
• 文章封面图、标题、摘要
• 浏览量、发布日期展示
• 点击进入文章详情

3. 中医知识详情模块 (pages/knowledge/detail)

• 文章完整内容展示
• 标题、发布日期
• 正文内容
• 收藏/取消收藏功能
• 分享功能

4. 中药材列表模块 (pages/medicine/list)

• 中药材列表展示
• 药材图片、名称、别名
• 性味、归经展示
• 功效简介
• 点击进入药材详情

5. 中药材详情模块 (pages/medicine/detail)

• 药材大图展示
• 药材名称、别名
• 性味归经
• 功效主治
• 用法用量
• 产地来源
• 详细介绍
• 收藏/取消收藏功能

6. 名医列表模块 (pages/doctor/list)

• 历代名医列表展示
• 名医头像、姓名
• 擅长领域
• 简介摘要
• 点击进入名医详情

7. 名医详情模块 (pages/doctor/detail)

• 名医头像展示
• 姓名、擅长领域
• 详细介绍
• 经典医案展示
• 收藏/取消收藏功能

8. 我的模块 (pages/mine)

• 用户头像、昵称展示
• 我的收藏入口
• 浏览历史入口
• 收藏和历史数量统计

9. 我的收藏模块 (pages/mine/collection)

• 收藏的知识文章列表
• 收藏的中药材列表
• 收藏的名医列表
• 点击可跳转到对应详情页

10. 浏览历史模块 (pages/mine/history)

• 浏览过的内容列表
• 按时间倒序排列
• 点击可跳转到对应详情页
• 清空历史功能

项目结构

traditional-chinese-medicine-min/
├── app.js                    # 小程序入口文件，全局数据管理
├── app.json                  # 小程序全局配置（页面路由、TabBar、窗口样式）
├── app.wxss                  # 全局样式文件
├── project.config.json       # 项目配置文件
├── project.private.config.json # 项目私有配置
├── sitemap.json              # 小程序索引配置
├── components/               # 自定义组件目录
├── images/                   # 图片资源目录
│   ├── tabbar/               # TabBar图标
│   │   ├── home.png          # 首页图标
│   │   ├── home_active.png   # 首页选中图标
│   │   ├── knowledge.png     # 知识图标
│   │   ├── knowledge_active.png # 知识选中图标
│   │   ├── medicine.png      # 药材图标
│   │   ├── medicine_active.png # 药材选中图标
│   │   ├── doctor.png        # 名医图标
│   │   ├── doctor_active.png # 名医选中图标
│   │   ├── mine.png          # 我的图标
│   │   └── mine_active.png   # 我的选中图标
│   ├── icons/                # 功能图标
│   └── placeholders/         # 占位图片
│       ├── swiper1.jpg ~ swiper3.jpg # 轮播图
│       ├── article1.jpg ~ article5.jpg # 文章封面图
│       ├── 枸杞.jpg          # 药材图片
│       ├── 人参.jpg
│       ├── 黄芪.jpg
│       ├── 当归.jpg
│       ├── 三七.jpg
│       ├── 李时珍.jpg        # 名医图片
│       ├── 张仲景.jpg
│       └── 华佗.jpg
├── pages/                    # 页面目录
│   ├── index/                # 首页
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   ├── knowledge/            # 中医知识模块
│   │   ├── list/             # 知识列表页
│   │   │   ├── list.js
│   │   │   ├── list.json
│   │   │   ├── list.wxml
│   │   │   └── list.wxss
│   │   └── detail/           # 知识详情页
│   │       ├── detail.js
│   │       ├── detail.json
│   │       ├── detail.wxml
│   │       └── detail.wxss
│   ├── medicine/             # 中药材模块
│   │   ├── list/             # 药材列表页
│   │   │   ├── list.js
│   │   │   ├── list.json
│   │   │   ├── list.wxml
│   │   │   └── list.wxss
│   │   └── detail/           # 药材详情页
│   │       ├── detail.js
│   │       ├── detail.json
│   │       ├── detail.wxml
│   │       └── detail.wxss
│   ├── doctor/               # 名医模块
│   │   ├── list/             # 名医列表页
│   │   │   ├── list.js
│   │   │   ├── list.json
│   │   │   ├── list.wxml
│   │   │   └── list.wxss
│   │   └── detail/           # 名医详情页
│   │       ├── detail.js
│   │       ├── detail.json
│   │       ├── detail.wxml
│   │       └── detail.wxss
│   └── mine/                 # 我的模块
│       ├── mine.js
│       ├── mine.json
│       ├── mine.wxml
│       ├── mine.wxss
│       ├── collection/       # 我的收藏页
│       │   ├── collection.js
│       │   ├── collection.json
│       │   ├── collection.wxml
│       │   └── collection.wxss
│       └── history/          # 浏览历史页
│           ├── history.js
│           ├── history.json
│           ├── history.wxml
│           └── history.wxss
└── utils/                    # 工具类目录
    ├── mockData.js           # Mock数据和数据服务
    └── util.js               # 工具函数

数据模型

轮播图数据 (swiperList)

{
  id: 'sw001',                    // 轮播图ID
  image: '/images/placeholders/swiper1.jpg', // 图片路径
  title: '传统中医疗法，守护您的健康'  // 标题
}

中医知识文章数据 (articles)

{
  id: 'art001',                   // 文章ID
  type: 'knowledge',              // 类型
  title: '中医体质辨识：九种体质，你是哪一种？', // 标题
  image: '/images/placeholders/article1.jpg', // 封面图
  content: '文章正文内容...',     // 正文
  viewCount: 128,                 // 浏览量
  publishDate: '2025-05-01'       // 发布日期
}

中药材数据 (medicines)

{
  id: 'med001',                   // 药材ID
  name: '枸杞',                   // 药材名称
  alias: '枸杞子',                // 别名
  image: '/images/placeholders/枸杞.jpg', // 图片
  properties: '甘，平',           // 性味
  meridians: '肝，肾',            // 归经
  efficacy: '滋补肝肾，益精明目', // 功效
  dosage: '6-12g',                // 用法用量
  origin: '宁夏、甘肃',           // 产地
  detailContent: '详细介绍...'    // 详细内容
}

名医数据 (doctors)

{
  id: 'doc001',                   // 名医ID
  name: '李时珍',                 // 姓名
  specialty: '本草学，方剂学',    // 擅长领域
  intro: '明代著名医药学家...',   // 简介
  image: '/images/placeholders/李时珍.jpg', // 头像
  cases: [{                       // 经典医案
    title: '李时珍医案：治愈顽固性咳嗽',
    content: '医案详情...'
  }]
}

核心业务逻辑

1. 数据服务封装

// 模拟异步请求
const mockRequest = (data, delay = 500) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(JSON.parse(JSON.stringify(data)));
    }, delay);
  });
};

// 获取推荐文章
getRecommendedArticles: (limit = 3) => {
  const sortedArticles = MOCK_DATA.articles.sort(
    (a, b) => new Date(b.publishDate) - new Date(a.publishDate),
  );
  return mockRequest(sortedArticles.slice(0, limit));
};

2. 获取药材详情

getMedicineDetail: (id) => {
  const medicine = MOCK_DATA.medicines.find((item) => item.id === id);
  return mockRequest(medicine);
};

3. 获取名医详情

getDoctorDetail: (id) => {
  const doctor = MOCK_DATA.doctors.find((item) => item.id === id);
  return mockRequest(doctor);
};

页面路由配置

{
  "pages": [
    "pages/index/index", // 首页（默认启动页）
    "pages/knowledge/list/list", // 知识列表
    "pages/knowledge/detail/detail", // 知识详情
    "pages/medicine/list/list", // 药材列表
    "pages/medicine/detail/detail", // 药材详情
    "pages/doctor/list/list", // 名医列表
    "pages/doctor/detail/detail", // 名医详情
    "pages/mine/mine", // 我的
    "pages/mine/collection/collection", // 我的收藏
    "pages/mine/history/history" // 浏览历史
  ]
}

TabBar配置

{
  "tabBar": {
    "color": "#999",
    "selectedColor": "#4A90E2",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/knowledge/list/list",
        "text": "知识"
      },
      {
        "pagePath": "pages/medicine/list/list",
        "text": "药材"
      },
      {
        "pagePath": "pages/doctor/list/list",
        "text": "名医"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的"
      }
    ]
  }
}

运行环境要求

• 微信开发者工具：建议使用最新稳定版
• 基础库版本：2.19.0 及以上
• AppID：需替换为自己的AppID

快速开始

1. 克隆/下载项目

将项目文件夹下载到本地

2. 导入项目

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

3. 运行项目

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

4. 真机调试

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

预置测试数据

中医知识文章

标题	浏览量	发布日期
中医体质辨识：九种体质，你是哪一种？	128	2025-05-01
艾灸疗法：温经通络，强身健体	95	2025-05-05
春季养生：顺应节气，调和身心	88	2025-05-10
五谷为养：健康饮食的基石	70	2025-05-15
《黄帝内经》：中医理论的源头	150	2025-04-20

中药材

药材名称	性味	归经	功效
枸杞	甘，平	肝，肾	滋补肝肾，益精明目
人参	甘，微苦，微温	脾，肺，心，肾	大补元气，复脉固脱
黄芪	甘，微温	脾，肺	补气升阳，固表止汗
当归	甘，辛，温	肝，心，脾	补血活血，调经止痛
三七	甘，微苦，温	肝，胃	散瘀止血，消肿定痛

历代名医

姓名	朝代	擅长领域	代表著作/成就
李时珍	明代	本草学，方剂学	《本草纲目》
张仲景	东汉	伤寒杂病论，临床医学	《伤寒杂病论》
华佗	东汉	外科，针灸，麻醉术	麻沸散，五禽戏

界面预览

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

扩展建议

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

1. 接入真实后端：将Mock数据替换为真实API接口
2. 用户登录系统：接入微信登录，实现真实用户体系
3. 搜索功能：实现药材、知识、名医的全局搜索
4. 体质测试：添加中医体质在线测试功能
5. 穴位图谱：添加人体穴位图谱和介绍
6. 养生食谱：添加中医养生食谱推荐
7. 在线问诊：接入在线中医问诊功能
8. 药材识别：接入AI图像识别，拍照识别药材
9. 音频讲解：添加中医知识音频讲解
10. 社区互动：添加用户交流社区功能

注意事项

1. 本项目为学习演示项目，所有数据均为模拟数据
2. 中医药知识仅供参考，不能替代专业医疗建议
3. 如需发布上线，请替换为自己的AppID并完善相关资质
4. 涉及医疗健康类内容，上线需符合相关法规要求

许可证

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