nanocode/wanandroid/uniapp_android/README.md

玩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

# 1. 下载HBuilder X
# 2. 导入本项目文件夹
# 3. 运行到浏览器或Android模拟器
# 4. 打包为Android APK

2. 运行测试

# 在HBuilder X中：
# 1. 右键项目 → 运行 → 运行到浏览器
# 2. 选择Chrome浏览器
# 3. 按F12切换到移动端模拟

3. 打包APK

# 在HBuilder X中：
# 1. 发行 → 原生App-云打包
# 2. 选择Android平台
# 3. 使用公共测试证书
# 4. 开始打包

🎨 设计细节

颜色系统

/* 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;

文字层级

/* 标题文字 */
.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; }

阴影等级

/* 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 - 文章列表

网络请求示例

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配置

{
  "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打包发布。