Ubuntu
200 lines
5.1 KiB
Markdown
200 lines
5.1 KiB
Markdown
# 玩Android Uniapp 客户端
|
||
|
||
基于Uniapp框架开发的玩Android客户端应用。
|
||
|
||
## 项目信息
|
||
|
||
- **项目名称**: 玩Android客户端
|
||
- **技术栈**: Uniapp + Vue 3
|
||
- **目标平台**: Android (可通过HBuilder生成APK)
|
||
- **API源**: https://www.wanandroid.com
|
||
- **开发状态**: 第一阶段完成
|
||
|
||
## 功能特性
|
||
|
||
### ✅ 已完成功能
|
||
1. **底部导航**：首页、项目、公众号、体系、我的
|
||
2. **首页功能**：
|
||
- Banner轮播图（自动轮播+手动滑动）
|
||
- 搜索热词展示
|
||
- 文章列表展示
|
||
- 下拉刷新功能
|
||
- 上拉加载更多
|
||
- 回到顶部按钮
|
||
3. **网络请求**：
|
||
- 集成玩Android公开API
|
||
- 错误处理
|
||
- 加载状态管理
|
||
|
||
### ⏳ 待开发功能
|
||
1. 项目页面
|
||
2. 公众号页面
|
||
3. 体系页面
|
||
4. 我的页面
|
||
5. 搜索功能
|
||
6. 收藏功能
|
||
7. 登录功能
|
||
8. WebView文章详情
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
uniapp/
|
||
├── pages/ # 页面文件
|
||
│ ├── index/ # 首页（已完成）
|
||
│ ├── project/ # 项目页（占位）
|
||
│ ├── wxarticle/ # 公众号页（占位）
|
||
│ ├── tree/ # 体系页（占位）
|
||
│ └── mine/ # 我的页（占位）
|
||
├── components/ # 组件
|
||
│ └── uni-load-more.vue # 加载更多组件
|
||
├── static/ # 静态资源
|
||
│ └── images/icons/ # 底部导航图标
|
||
├── unpackage/ # 打包目录
|
||
├── manifest.json # 应用配置
|
||
├── pages.json # 页面配置
|
||
├── App.vue # 应用入口
|
||
├── create_icons.py # 图标生成脚本
|
||
└── README.md # 本文件
|
||
```
|
||
|
||
## API接口使用
|
||
|
||
### 已集成的API
|
||
1. **首页Banner**: `GET /banner/json`
|
||
2. **搜索热词**: `GET /hotkey/json`
|
||
3. **首页文章列表**: `GET /article/list/{页码}/json`
|
||
|
||
### 网络请求封装
|
||
使用Uniapp内置的 `uni.request`：
|
||
```javascript
|
||
const response = await uni.request({
|
||
url: 'https://www.wanandroid.com/banner/json',
|
||
method: 'GET'
|
||
})
|
||
```
|
||
|
||
## 运行和打包
|
||
|
||
### 1. 使用HBuilder X
|
||
1. 打开HBuilder X
|
||
2. 导入本项目文件夹
|
||
3. 运行到浏览器或手机模拟器
|
||
4. 打包为Android APK
|
||
|
||
### 2. 命令行运行（H5模式）
|
||
```bash
|
||
# 安装依赖（如果需要）
|
||
npm install
|
||
|
||
# 运行H5版本
|
||
npm run dev:h5
|
||
|
||
# 构建H5版本
|
||
npm run build:h5
|
||
```
|
||
|
||
### 3. 打包为APK
|
||
1. 在HBuilder X中选择「发行」->「原生App-云打包」
|
||
2. 选择Android平台
|
||
3. 配置证书（可使用公共测试证书）
|
||
4. 开始打包
|
||
|
||
## 页面说明
|
||
|
||
### 首页 (pages/index/index.vue)
|
||
- **Banner轮播**: 支持自动轮播和手动滑动
|
||
- **搜索热词**: 点击可触发搜索（待实现）
|
||
- **文章列表**: 卡片式布局，显示标题、作者、分类、时间
|
||
- **交互功能**: 下拉刷新、上拉加载、回到顶部
|
||
- **点击事件**: 文章点击可跳转到详情（待实现）
|
||
|
||
### 其他页面
|
||
目前为占位页面，显示"开发中"提示。
|
||
|
||
## 图标说明
|
||
|
||
底部导航图标使用自定义生成的图标：
|
||
- **首页**: 房子图标（绿色激活）
|
||
- **项目**: 盒子图标（绿色激活）
|
||
- **公众号**: 微信图标（绿色激活）
|
||
- **体系**: 树形图标（绿色激活）
|
||
- **我的**: 人头图标（绿色激活）
|
||
|
||
图标文件位于 `static/images/icons/`
|
||
|
||
## 样式设计
|
||
|
||
### 颜色主题
|
||
- **主色**: #3cc51f (绿色)
|
||
- **文字色**: #333 (主要), #666 (次要), #999 (辅助)
|
||
- **背景色**: #f8f8f8
|
||
- **卡片背景**: #ffffff
|
||
|
||
### 响应式单位
|
||
使用 `rpx` 单位，适配不同屏幕尺寸：
|
||
- 750rpx = 100%屏幕宽度
|
||
- 设计稿基于750rpx宽度
|
||
|
||
## 开发建议
|
||
|
||
### 1. 后续开发步骤
|
||
1. 实现WebView文章详情页
|
||
2. 实现搜索功能页面
|
||
3. 实现登录和用户系统
|
||
4. 实现收藏功能
|
||
5. 完善其他页面内容
|
||
|
||
### 2. 性能优化建议
|
||
1. 图片懒加载
|
||
2. 列表虚拟滚动
|
||
3. 数据缓存
|
||
4. 请求节流
|
||
|
||
### 3. 代码规范
|
||
1. 使用ES6+语法
|
||
2. 组件化开发
|
||
3. 统一的错误处理
|
||
4. 注释和文档
|
||
|
||
## 测试说明
|
||
|
||
### 已测试功能
|
||
1. ✅ 底部导航切换
|
||
2. ✅ Banner轮播
|
||
3. ✅ 文章列表加载
|
||
4. ✅ 下拉刷新
|
||
5. ✅ 上拉加载更多
|
||
6. ✅ 网络请求
|
||
|
||
### 测试方法
|
||
1. 在HBuilder X中运行到浏览器
|
||
2. 使用Chrome开发者工具模拟移动端
|
||
3. 测试网络请求和响应
|
||
4. 测试页面交互
|
||
|
||
## 注意事项
|
||
|
||
1. **API限制**: 玩Android API有请求频率限制
|
||
2. **图片加载**: 部分图片可能加载较慢，建议实现占位图
|
||
3. **网络错误**: 需要处理网络异常情况
|
||
4. **登录状态**: 部分API需要登录，目前只使用公开API
|
||
|
||
## 更新日志
|
||
|
||
### v1.0.0 (2026-03-17)
|
||
- 初始版本发布
|
||
- 实现底部导航
|
||
- 完成首页所有功能
|
||
- 集成玩Android API
|
||
- 生成可打包的Uniapp项目
|
||
|
||
## 联系信息
|
||
|
||
- **项目位置**: `/home/ubuntu/wanandroid/uniapp/`
|
||
- **生成时间**: 2026-03-17
|
||
- **测试状态**: 基本功能测试通过
|
||
|
||
---
|
||
|
||
**提示**: 将此项目导入HBuilder X后，可直接运行和打包。首页功能完整，其他页面为占位内容，可根据需求继续开发。 |