Ubuntu
195 lines
4.9 KiB
Markdown
195 lines
4.9 KiB
Markdown
# HBuilder X 打包指南
|
||
|
||
## 项目概述
|
||
|
||
这是一个基于Uniapp框架开发的玩Android客户端应用，已经完成了首页所有功能和底部导航。
|
||
|
||
## 打包步骤
|
||
|
||
### 第一步：准备环境
|
||
|
||
1. **下载HBuilder X**
|
||
- 访问 [HBuilder X官网](https://www.dcloud.io/hbuilderx.html)
|
||
- 下载最新版本（推荐标准版）
|
||
|
||
2. **安装HBuilder X**
|
||
- 解压下载的文件
|
||
- 运行 `HBuilderX.exe`（Windows）或 `HBuilderX.app`（Mac）
|
||
|
||
### 第二步：导入项目
|
||
|
||
1. **打开HBuilder X**
|
||
2. **导入项目**
|
||
- 点击菜单：文件 → 导入 → 从本地目录导入
|
||
- 选择项目目录：`/home/ubuntu/wanandroid/uniapp/`
|
||
- 点击"选择文件夹"
|
||
|
||
3. **验证项目结构**
|
||
- 项目应显示在左侧项目管理器中
|
||
- 主要文件：
|
||
- `manifest.json` - 应用配置
|
||
- `pages.json` - 页面配置
|
||
- `App.vue` - 应用入口
|
||
- `pages/` - 页面目录
|
||
- `components/` - 组件目录
|
||
|
||
### 第三步：运行测试
|
||
|
||
1. **运行到浏览器**
|
||
- 右键点击项目根目录
|
||
- 选择"运行" → "运行到浏览器" → "Chrome"
|
||
- 或按快捷键 `Ctrl+R`
|
||
|
||
2. **测试功能**
|
||
- 检查底部导航是否正常
|
||
- 测试首页Banner轮播
|
||
- 测试文章列表加载
|
||
- 测试下拉刷新和上拉加载
|
||
- 测试页面切换
|
||
|
||
3. **调试工具**
|
||
- 按F12打开开发者工具
|
||
- 切换到移动端模拟模式
|
||
- 检查网络请求和Console输出
|
||
|
||
### 第四步：打包为APK
|
||
|
||
1. **配置manifest.json**
|
||
- 双击打开 `manifest.json`
|
||
- 检查基本配置：
|
||
- 应用名称：玩Android
|
||
- AppID：__UNI__WANANDROID
|
||
- 版本号：1.0.0
|
||
|
||
2. **云打包（推荐）**
|
||
- 右键点击项目根目录
|
||
- 选择"发行" → "原生App-云打包"
|
||
- 配置选项：
|
||
- 打包平台：Android
|
||
- 包名：com.wanandroid.app（可自定义）
|
||
- 证书：使用公共测试证书（或自有证书）
|
||
- 其他选项保持默认
|
||
- 点击"打包"
|
||
|
||
3. **本地打包（高级）**
|
||
- 需要安装Android Studio和SDK
|
||
- 配置更复杂，不推荐新手使用
|
||
|
||
### 第五步：安装测试
|
||
|
||
1. **下载APK**
|
||
- 云打包完成后，下载生成的APK文件
|
||
- 文件通常命名为：`uniapp__WANANDROID.apk`
|
||
|
||
2. **安装到手机**
|
||
- 将APK文件传输到Android手机
|
||
- 在手机上点击安装
|
||
- 可能需要开启"允许安装未知来源应用"
|
||
|
||
3. **功能测试**
|
||
- 测试所有页面切换
|
||
- 测试网络请求
|
||
- 测试交互功能
|
||
|
||
## 常见问题
|
||
|
||
### 1. 运行到浏览器空白页
|
||
- **原因**: 路径配置错误
|
||
- **解决**: 检查 `pages.json` 中的页面路径
|
||
|
||
### 2. 网络请求失败
|
||
- **原因**: 跨域问题或API不可用
|
||
- **解决**:
|
||
- 检查API地址：`https://www.wanandroid.com`
|
||
- 在HBuilder X中配置合法域名
|
||
|
||
### 3. 图标不显示
|
||
- **原因**: 图标路径错误
|
||
- **解决**: 检查 `pages.json` 中的图标路径
|
||
|
||
### 4. 打包失败
|
||
- **原因**: 证书问题或配置错误
|
||
- **解决**:
|
||
- 使用公共测试证书
|
||
- 检查manifest.json配置
|
||
- 查看打包日志中的具体错误
|
||
|
||
### 5. 应用闪退
|
||
- **原因**: 权限问题或代码错误
|
||
- **解决**:
|
||
- 检查Android权限配置
|
||
- 查看手机Logcat日志
|
||
- 在HBuilder X中调试
|
||
|
||
## 项目文件说明
|
||
|
||
### 核心文件
|
||
- `manifest.json` - 应用配置文件
|
||
- `pages.json` - 页面路由和导航配置
|
||
- `App.vue` - 应用入口和全局样式
|
||
|
||
### 页面文件
|
||
- `pages/index/index.vue` - 首页（已完成）
|
||
- `pages/project/project.vue` - 项目页（占位）
|
||
- `pages/wxarticle/wxarticle.vue` - 公众号页（占位）
|
||
- `pages/tree/tree.vue` - 体系页（占位）
|
||
- `pages/mine/mine.vue` - 我的页（占位）
|
||
|
||
### 组件文件
|
||
- `components/uni-load-more.vue` - 加载更多组件
|
||
|
||
### 资源文件
|
||
- `static/images/icons/` - 底部导航图标
|
||
- `static/` - 其他静态资源
|
||
|
||
## 开发建议
|
||
|
||
### 后续开发步骤
|
||
1. 实现WebView文章详情页
|
||
2. 实现搜索功能
|
||
3. 实现登录和用户系统
|
||
4. 实现收藏功能
|
||
5. 完善其他页面内容
|
||
|
||
### 性能优化
|
||
1. 图片懒加载
|
||
2. 数据缓存
|
||
3. 请求节流
|
||
4. 代码分包
|
||
|
||
### 代码规范
|
||
1. 使用ES6+语法
|
||
2. 组件化开发
|
||
3. 统一的错误处理
|
||
4. 添加注释和文档
|
||
|
||
## 技术支持
|
||
|
||
### 文档资源
|
||
- [Uniapp官方文档](https://uniapp.dcloud.io/)
|
||
- [Vue 3文档](https://v3.vuejs.org/)
|
||
- [玩Android API文档](https://www.wanandroid.com/blog/show/2)
|
||
|
||
### 社区支持
|
||
- [DCloud社区](https://ask.dcloud.net.cn/)
|
||
- [Uniapp插件市场](https://ext.dcloud.net.cn/)
|
||
|
||
## 版本信息
|
||
|
||
### v1.0.0 (2026-03-17)
|
||
- 初始版本发布
|
||
- 实现底部导航
|
||
- 完成首页所有功能
|
||
- 集成玩Android API
|
||
- 生成可打包的Uniapp项目
|
||
|
||
### 系统要求
|
||
- HBuilder X: 3.0+
|
||
- Node.js: 12.0+（可选）
|
||
- Android: 5.0+（API 21+）
|
||
|
||
---
|
||
|
||
**提示**: 首次打包建议使用云打包和公共测试证书。正式发布时需要申请自有证书和签名。
|
||
|
||
**打包成功标志**: 生成APK文件，可在Android手机上安装运行，首页功能正常。 |