崔博小程序

一个基于 uni-app 和 Vue 3 构建的现代化健康管理小程序平台，支持深色模式、多平台运行。

项目特点

• 🚀 跨平台支持: 支持 H5、App（iOS/Android）、微信小程序、支付宝小程序等多个平台
• 🎨 现代化 UI: 使用 uview-plus UI 组件库，配合自定义样式系统
• 🌓 深色模式: 完整的深色/浅色主题切换系统，支持自动跟随系统主题(暂未实现,暂时是通过API调用确定主题颜色)
• 🔐 用户认证: 支持用户名/密码登录认证
• 📱 响应式设计: 适配不同屏幕尺寸的设备
• ⚡ 高性能: Vue 3 + uni-app 提供流畅的用户体验
• 📊 报告系统: 专业的电子报告查看和管理功能

技术栈

• 框架: uni-app with Vue 3
• UI 库: uview-plus 3.6.4
• 样式: SCSS 与 CSS 自定义属性
• 状态管理: 自定义全局存储
• 构建工具: HBuilderX IDE
• 目标平台: H5、App、微信小程序等

项目结构

├── pages/                  # 页面文件
│   ├── index.vue          # 登录页
│   ├── home.vue           # 主页
│   ├── report.vue         # 电子报告
│   ├── myreport.vue       # 我的报告
│   └── webview.vue        # Web视图
├── common/                # 公共模块
│   ├── Auth.js           # 认证模块
│   ├── HttpService.js    # HTTP服务
│   ├── Session.js        # 会话管理
│   └── Tools.js          # 工具函数
├── components/           # 组件
│   └── theme-toggle.vue  # 主题切换组件
├── store/               # 状态管理
│   └── index.js         # 全局状态
├── utils/               # 工具函数
│   └── theme.js         # 主题管理
├── styles/              # 全局样式
├── static/              # 静态资源
├── manifest.json        # 应用配置
├── pages.json          # 页面配置
└── theme.json          # 主题配置

核心功能

🌓 主题系统

支持自动跟随系统主题(暂未实现,暂时是通过API调用确定主题颜色)：

• 手动模式: 用户可手动切换主题
• API 控制: 支持通过远程 API 控制主题
• 平滑过渡: 主题切换带有动画效果

🔐 认证系统

• 用户登录认证
• 会话管理
• 安全的数据传输
• 推送客户端 ID 获取

📊 报告系统

• 电子报告查看
• 报告下载管理
• 历史报告查询

开发指南

环境要求

• HBuilderX IDE
• Node.js (可选，用于命令行开发)
• 各平台开发工具（根据需要）

运行项目

由于是 HBuilderX 项目，主要通过 IDE 进行开发：

1. 克隆项目

   git clone [项目地址]

2. 使用 HBuilderX 打开项目

   • 打开 HBuilderX
   • 文件 -> 打开目录 -> 选择项目目录

3. 运行到不同平台

   • H5: 运行 -> 运行到浏览器
   • App: 运行 -> 运行到手机或模拟器
   • 微信小程序: 运行 -> 运行到小程序模拟器 -> 微信开发者工具

4. 构建发布

   • 发行 -> 选择目标平台进行构建

配置说明

微信小程序配置

在 manifest.json 中配置微信小程序的 appid：

"mp-weixin": {
  "appid": "你的小程序AppID",
  "setting": {
    "urlCheck": false
  }
}

深色模式配置

项目已启用深色模式，相关配置：

"darkmode": true,
"themeLocation": "theme.json"

主题定制

修改主题颜色

在 theme.json 中修改颜色定义：

{
  "light": {
    "navBgColor": "#07c160",
    "bgColor": "#ffffff",
    "textColor": "#333333"
  },
  "dark": {
    "navBgColor": "#1a1a1a",
    "bgColor": "#121212",
    "textColor": "#ffffff"
  }
}

CSS 变量使用

在组件中使用 CSS 变量：

.my-component {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

添加新页面

1. 在 pages/ 目录创建 .vue 文件
2. 在 pages.json 中注册路由：

{
  "path": "pages/newpage",
  "style": {
    "navigationBarTitleText": "新页面",
    "navigationBarBackgroundColor": "@navBgColor",
    "navigationStyle": "custom"
  }
}

平台特性

条件编译

项目使用 uni-app 条件编译适配不同平台：

// #ifdef APP-PLUS
// App 平台特有代码
// #endif

// #ifdef H5
// H5 平台特有代码
// #endif

// #ifdef MP-WEIXIN
// 微信小程序特有代码
// #endif

深度链接

支持自定义 URL scheme：spellcuibo://

用于：

• 应用内页面跳转
• 推送通知处理
• 外部应用唤起

API 接口

主要 API 端点：

• 登录接口: /sys/login
• 主题状态: /api/day-night-status
• 报告数据: 根据具体业务需求

部署说明

H5 部署

1. 在 HBuilderX 中发行到 H5
2. 将生成的 unpackage/dist/build/h5 目录部署到 Web 服务器

App 打包

1. 配置各平台证书和签名
2. 在 HBuilderX 中发行到原生 App
3. 生成安装包进行分发

小程序发布

1. 配置对应小程序平台的 AppID
2. 在 HBuilderX 中发行到小程序
3. 使用对应平台开发者工具上传发布

常见问题

Q: 如何修改应用名称？

A: 在 manifest.json 中修改 name 字段。

Q: 如何添加新的 UI 组件？

A: 推荐使用 uview-plus 组件库，或自定义组件放在 components/ 目录。

Q: 主题切换不生效怎么办？

A: 检查 theme.json 配置和 utils/theme.js 中的逻辑，确保 CSS 变量正确定义。

Q: 如何调试不同平台？

A: 使用 HBuilderX 的多端调试功能，或使用对应平台的开发者工具。

贡献指南

1. Fork 项目
2. 创建功能分支
3. 提交更改
4. 发起 Pull Request

许可证

本项目采用 MIT 许可证。

联系方式

如有问题或建议，请通过以下方式联系：

• 项目Issues: GitHub Issues
• 邮箱: wlb@wjtjyy.top

---

注意: 本项目为 HBuilderX 项目，建议使用 HBuilderX IDE 进行开发和构建。