Ubuntu
287 lines
7.1 KiB
Markdown
287 lines
7.1 KiB
Markdown
# 玩Android Material Design 客户端
|
||
|
||
基于Uniapp框架开发的Material Design风格玩Android客户端应用。
|
||
|
||
## 🎨 设计理念
|
||
|
||
### Material Design 3 规范
|
||
- **颜色系统**: 使用Material Design 3颜色系统
|
||
- 主色: `#6200EE` (紫色)
|
||
- 次要色: `#03DAC6` (青色)
|
||
- 表面色: `#FFFFFF` (白色)
|
||
- 背景色: `#F5F5F5` (浅灰)
|
||
- **排版**: Roboto字体，规范的文字层级
|
||
- **阴影**: 使用Elevation阴影系统
|
||
- **动效**: 流畅的过渡动画和交互反馈
|
||
|
||
### Android应用标准
|
||
- 遵循Android应用设计规范
|
||
- 支持深色模式
|
||
- 响应式布局
|
||
- 触摸反馈和手势支持
|
||
|
||
## 📱 功能特性
|
||
|
||
### ✅ 已完成功能
|
||
1. **Material Design风格首页**
|
||
- 状态栏和导航栏（紫色主题）
|
||
- 搜索栏（Material Design样式）
|
||
- Banner轮播（自动轮播+阴影效果）
|
||
- 搜索热词（芯片式设计）
|
||
- 文章列表（卡片式布局）
|
||
- 置顶文章（特殊标识）
|
||
- 下拉刷新（Material Design样式）
|
||
- 上拉加载更多
|
||
- 回到顶部按钮
|
||
- 浮动操作按钮(FAB)
|
||
|
||
2. **完整的底部导航**
|
||
- Material Design图标（轮廓/填充）
|
||
- 5个Tab：首页、项目、公众号、体系、我的
|
||
- 平滑的切换动画
|
||
|
||
3. **网络请求封装**
|
||
- 统一的请求工具
|
||
- 错误处理和加载状态
|
||
- 拦截器支持
|
||
|
||
### ⏳ 待开发页面（Material Design风格占位）
|
||
1. **项目页面** - 开源项目浏览
|
||
2. **公众号页面** - 技术公众号订阅
|
||
3. **体系页面** - 技术知识体系
|
||
4. **我的页面** - 用户中心
|
||
|
||
## 🏗️ 项目结构
|
||
|
||
```
|
||
uniapp_android/
|
||
├── pages/ # 页面文件
|
||
│ ├── index/ # 首页（Material Design完整实现）
|
||
│ │ └── index.vue # 11.8KB，完整功能
|
||
│ ├── project/ # 项目页（Material Design占位）
|
||
│ ├── wxarticle/ # 公众号页（Material Design占位）
|
||
│ ├── tree/ # 体系页（Material Design占位）
|
||
│ └── mine/ # 我的页（Material Design占位）
|
||
├── components/ # 组件目录
|
||
├── utils/ # 工具函数
|
||
│ └── request.js # 网络请求封装
|
||
├── static/images/icons/ # Material Design图标
|
||
├── manifest.json # 应用配置（Android优化）
|
||
├── pages.json # 页面配置（Material Design风格）
|
||
├── App.vue # 应用入口（全局样式）
|
||
├── create_material_icons.py # 图标生成脚本
|
||
├── create_placeholder_pages.py # 占位页面生成脚本
|
||
└── README.md # 本文件
|
||
```
|
||
|
||
## 🎯 技术实现
|
||
|
||
### 核心特性
|
||
1. **响应式设计**: 使用rpx单位，适配不同屏幕
|
||
2. **深色模式**: 支持系统深色模式切换
|
||
3. **性能优化**: 图片懒加载、请求节流
|
||
4. **错误处理**: 统一的错误提示和重试机制
|
||
5. **交互反馈**: 触摸反馈、加载状态、动画效果
|
||
|
||
### Material Design组件实现
|
||
- **卡片**: 阴影、圆角、悬停效果
|
||
- **按钮**: 填充按钮、轮廓按钮、浮动按钮
|
||
- **芯片**: 搜索热词芯片
|
||
- **进度条**: 线性进度指示器
|
||
- **底部导航**: 图标切换动画
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 1. 使用HBuilder X
|
||
```bash
|
||
# 1. 下载HBuilder X
|
||
# 2. 导入本项目文件夹
|
||
# 3. 运行到浏览器或Android模拟器
|
||
# 4. 打包为Android APK
|
||
```
|
||
|
||
### 2. 运行测试
|
||
```bash
|
||
# 在HBuilder X中：
|
||
# 1. 右键项目 → 运行 → 运行到浏览器
|
||
# 2. 选择Chrome浏览器
|
||
# 3. 按F12切换到移动端模拟
|
||
```
|
||
|
||
### 3. 打包APK
|
||
```bash
|
||
# 在HBuilder X中：
|
||
# 1. 发行 → 原生App-云打包
|
||
# 2. 选择Android平台
|
||
# 3. 使用公共测试证书
|
||
# 4. 开始打包
|
||
```
|
||
|
||
## 🎨 设计细节
|
||
|
||
### 颜色系统
|
||
```css
|
||
/* Material Design 3 颜色 */
|
||
--md-primary: #6200EE;
|
||
--md-primary-variant: #3700B3;
|
||
--md-secondary: #03DAC6;
|
||
--md-surface: #FFFFFF;
|
||
--md-background: #F5F5F5;
|
||
--md-on-primary: #FFFFFF;
|
||
--md-on-surface: #000000;
|
||
```
|
||
|
||
### 文字层级
|
||
```css
|
||
/* 标题文字 */
|
||
.text-title { font-size: 20px; font-weight: 500; }
|
||
|
||
/* 副标题 */
|
||
.text-subtitle { font-size: 16px; font-weight: 400; }
|
||
|
||
/* 正文 */
|
||
.text-body { font-size: 14px; font-weight: 400; }
|
||
|
||
/* 说明文字 */
|
||
.text-caption { font-size: 12px; font-weight: 400; }
|
||
```
|
||
|
||
### 阴影等级
|
||
```css
|
||
/* Elevation 1 */
|
||
.elevation-1 { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
|
||
|
||
/* Elevation 2 */
|
||
.elevation-2 { box-shadow: 0 4px 8px rgba(0,0,0,0.12); }
|
||
|
||
/* Elevation 3 */
|
||
.elevation-3 { box-shadow: 0 8px 16px rgba(0,0,0,0.14); }
|
||
```
|
||
|
||
## 📊 API集成
|
||
|
||
### 已集成API
|
||
1. `GET /banner/json` - 首页Banner
|
||
2. `GET /hotkey/json` - 搜索热词
|
||
3. `GET /article/list/{page}/json` - 文章列表
|
||
|
||
### 网络请求示例
|
||
```javascript
|
||
import { api } from '@/utils/request.js'
|
||
|
||
// 获取Banner
|
||
const banners = await api.getBanners()
|
||
|
||
// 获取文章列表
|
||
const articles = await api.getArticles(0, 20)
|
||
```
|
||
|
||
## 🔧 开发指南
|
||
|
||
### 添加新页面
|
||
1. 在 `pages.json` 中添加页面配置
|
||
2. 创建Vue页面文件
|
||
3. 遵循Material Design设计规范
|
||
4. 使用提供的工具类和组件
|
||
|
||
### 样式规范
|
||
1. 使用提供的CSS类（如 `.card`, `.elevation-1`）
|
||
2. 遵循颜色系统
|
||
3. 使用响应式单位（rpx）
|
||
4. 添加深色模式支持
|
||
|
||
### 组件开发
|
||
1. 保持组件单一职责
|
||
2. 提供适当的Props和Events
|
||
3. 添加文档注释
|
||
4. 测试不同状态
|
||
|
||
## 📱 页面预览
|
||
|
||
### 首页
|
||
- 紫色状态栏和导航栏
|
||
- 搜索栏（点击跳转搜索）
|
||
- Banner轮播（自动+手动）
|
||
- 搜索热词芯片
|
||
- 文章卡片（置顶/普通）
|
||
- 浮动操作按钮
|
||
- 回到顶部按钮
|
||
|
||
### 其他页面
|
||
- Material Design风格的占位设计
|
||
- 功能预览卡片
|
||
- 开发进度指示
|
||
- 操作按钮
|
||
|
||
## 🧪 测试验证
|
||
|
||
### 已测试功能
|
||
1. ✅ 底部导航切换
|
||
2. ✅ Banner轮播和点击
|
||
3. ✅ 搜索热词展示和点击
|
||
4. ✅ 文章列表加载和分页
|
||
5. ✅ 下拉刷新和上拉加载
|
||
6. ✅ 浮动操作按钮
|
||
7. ✅ 回到顶部功能
|
||
8. ✅ 网络请求和错误处理
|
||
|
||
### 测试方法
|
||
1. HBuilder X浏览器运行
|
||
2. Chrome移动端模拟
|
||
3. 网络请求调试
|
||
4. 交互功能测试
|
||
|
||
## 📦 打包发布
|
||
|
||
### Android配置
|
||
```json
|
||
{
|
||
"minSdkVersion": 21,
|
||
"targetSdkVersion": 33,
|
||
"permissions": [
|
||
"INTERNET",
|
||
"ACCESS_NETWORK_STATE",
|
||
"ACCESS_WIFI_STATE"
|
||
]
|
||
}
|
||
```
|
||
|
||
### 打包步骤
|
||
1. 配置 `manifest.json`
|
||
2. 选择Android平台
|
||
3. 配置证书（测试/正式）
|
||
4. 云打包生成APK
|
||
|
||
## 🔄 更新计划
|
||
|
||
### 近期计划
|
||
1. 实现搜索功能页面
|
||
2. 实现WebView文章详情
|
||
3. 实现登录和用户系统
|
||
4. 实现收藏功能
|
||
|
||
### 长期计划
|
||
1. 完善其他页面功能
|
||
2. 添加离线缓存
|
||
3. 实现推送通知
|
||
4. 添加分享功能
|
||
|
||
## 📄 许可证
|
||
|
||
本项目基于Uniapp框架开发，遵循MIT许可证。
|
||
|
||
## 📞 支持
|
||
|
||
如有问题或建议，请：
|
||
1. 查看项目文档
|
||
2. 检查常见问题
|
||
3. 提交Issue
|
||
|
||
---
|
||
|
||
**项目状态**: ✅ 第一阶段完成
|
||
**设计风格**: 🎨 Material Design 3
|
||
**平台支持**: 📱 Android (Uniapp多端)
|
||
**打包就绪**: 🚀 可立即打包APK
|
||
|
||
**提示**: 本项目已完全按照Android Material Design风格实现，可直接导入HBuilder X打包发布。 |