nanocode/wanandroid/uniapp

玩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：

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模式）

# 安装依赖（如果需要）
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后，可直接运行和打包。首页功能完整，其他页面为占位内容，可根据需求继续开发。