245 lines
5.9 KiB
Markdown
245 lines
5.9 KiB
Markdown
# 网站打包成应用指南
|
||
|
||
## 功能说明
|
||
|
||
本工具可以将静态网站打包成独立的桌面应用程序，无需用户安装浏览器或其他运行环境。
|
||
|
||
## 打包原理
|
||
|
||
1. **创建 Wails 项目**：自动生成一个新的 Wails3 项目结构
|
||
2. **嵌入网站文件**：将静态网站文件（HTML、CSS、JS等）嵌入到应用中
|
||
3. **编译应用**：使用 Wails3 编译生成桌面应用
|
||
4. **独立运行**：打包后的应用内置 WebView，无需浏览器
|
||
|
||
## 环境要求
|
||
|
||
### 必需环境
|
||
|
||
- **Go 1.21+**：Go 编程语言环境
|
||
- **Wails3**：桌面应用框架
|
||
|
||
### 安装方式
|
||
|
||
#### 方式一：使用本工具安装（推荐）
|
||
|
||
1. 进入"应用打包"页面
|
||
2. 查看环境检查卡片
|
||
3. 点击"安装 Go"和"安装 Wails3"按钮
|
||
4. 等待安装完成
|
||
|
||
#### 方式二：手动安装
|
||
|
||
**安装 Go：**
|
||
```powershell
|
||
# 下载 Go 安装包
|
||
# https://go.dev/dl/
|
||
|
||
# 或使用工具提供的脚本
|
||
.\install\go.bat
|
||
```
|
||
|
||
**安装 Wails3：**
|
||
```powershell
|
||
# 确保已安装 Go
|
||
go install github.com/wailsapp/wails/v3/cmd/wails3@latest
|
||
|
||
# 或使用工具提供的脚本
|
||
.\install\wails.bat
|
||
```
|
||
|
||
## 使用步骤
|
||
|
||
### 1. 准备网站文件
|
||
|
||
确保您的网站文件夹包含：
|
||
- `index.html`（必需，作为应用入口）
|
||
- CSS 文件
|
||
- JavaScript 文件
|
||
- 图片、字体等资源文件
|
||
|
||
示例结构：
|
||
```
|
||
my-website/
|
||
├── index.html
|
||
├── css/
|
||
│ └── style.css
|
||
├── js/
|
||
│ └── app.js
|
||
└── images/
|
||
└── logo.png
|
||
```
|
||
|
||
### 2. 选择网站
|
||
|
||
- 点击"选择文件夹"按钮
|
||
- 选择包含网站文件的文件夹
|
||
- 或从已下载的网站列表中选择
|
||
|
||
### 3. 配置应用信息
|
||
|
||
填写应用基本信息：
|
||
- **应用名称**（必填）：应用的显示名称
|
||
- **版本号**：如 1.0.0
|
||
- **作者**：您的名字或团队名称
|
||
- **应用描述**：简短描述应用功能
|
||
|
||
### 4. 打包设置
|
||
|
||
配置打包参数：
|
||
- **目标平台**：选择 Windows、macOS 或 Linux
|
||
- **窗口宽度**：默认 1280px
|
||
- **窗口高度**：默认 800px
|
||
- **输出目录**：可自定义，默认为 `site-dist`
|
||
|
||
### 5. 开始打包
|
||
|
||
- 确认所有配置正确
|
||
- 点击"开始打包"按钮
|
||
- 等待编译完成（首次可能需要5-10分钟）
|
||
|
||
## 打包输出
|
||
|
||
### 文件位置
|
||
|
||
默认输出到项目的 `site-dist` 目录，包含：
|
||
- Windows：`your-app.exe`
|
||
- macOS：`your-app.app`
|
||
- Linux：`your-app`（可执行文件）
|
||
|
||
### 文件大小
|
||
|
||
打包后的应用大小取决于：
|
||
- 网站文件大小
|
||
- 平台差异
|
||
- 通常在 20-50MB 之间
|
||
|
||
## 注意事项
|
||
|
||
### 首次打包
|
||
|
||
- 需要下载 Go 依赖包
|
||
- 可能耗时 5-10 分钟
|
||
- 需要网络连接
|
||
- 建议有至少 500MB 可用磁盘空间
|
||
|
||
### 网站要求
|
||
|
||
- **纯静态网站**：支持 HTML、CSS、JavaScript
|
||
- **不支持服务端代码**：如 PHP、Python 等
|
||
- **相对路径**：建议使用相对路径引用资源
|
||
- **入口文件**：必须有 index.html
|
||
|
||
### 资源引用
|
||
|
||
在 HTML 中使用相对路径：
|
||
```html
|
||
<!-- 推荐 -->
|
||
<link rel="stylesheet" href="./css/style.css">
|
||
<script src="./js/app.js"></script>
|
||
<img src="./images/logo.png">
|
||
|
||
<!-- 不推荐 -->
|
||
<link rel="stylesheet" href="/css/style.css">
|
||
<script src="http://example.com/js/app.js"></script>
|
||
```
|
||
|
||
### 跨域问题
|
||
|
||
打包后的应用使用 `file://` 协议，可能遇到跨域限制：
|
||
- 避免使用外部 API（CORS 限制）
|
||
- 避免使用绝对路径
|
||
- 将所有资源放在网站文件夹内
|
||
|
||
## 常见问题
|
||
|
||
### Q: 打包失败怎么办？
|
||
|
||
A: 检查以下几点：
|
||
1. 确保 Go 和 Wails3 已正确安装
|
||
2. 检查网络连接（首次打包需要下载依赖）
|
||
3. 确保磁盘空间充足
|
||
4. 查看错误信息，根据提示解决
|
||
|
||
### Q: 打包的应用很大？
|
||
|
||
A: 这是正常的，因为：
|
||
1. 包含了 WebView 运行时
|
||
2. 包含了 Go 运行时
|
||
3. 包含了所有网站文件
|
||
4. 可以通过压缩网站资源减小体积
|
||
|
||
### Q: 应用可以在其他电脑运行吗？
|
||
|
||
A: 可以！打包后的应用是独立的：
|
||
- Windows 应用可在任何 Windows 7+ 系统运行
|
||
- macOS 应用可在任何 macOS 10.13+ 系统运行
|
||
- Linux 应用可在大多数 Linux 发行版运行
|
||
- 无需安装 Go、Wails 或浏览器
|
||
|
||
### Q: 如何更新应用？
|
||
|
||
A: 重新打包即可：
|
||
1. 修改网站文件
|
||
2. 更改版本号
|
||
3. 重新执行打包流程
|
||
4. 分发新的可执行文件
|
||
|
||
### Q: 可以添加自定义图标吗？
|
||
|
||
A: 当前版本暂不支持，后续版本会添加此功能。
|
||
|
||
## 高级用法
|
||
|
||
### 自定义配置
|
||
|
||
编辑生成的项目：
|
||
1. 打包时会在临时目录创建项目
|
||
2. 可以在 `main.go` 中自定义窗口行为
|
||
3. 可以添加 Go 后端代码
|
||
|
||
### 批量打包
|
||
|
||
使用命令行方式：
|
||
```powershell
|
||
# 切换到临时项目目录
|
||
cd C:\Users\{user}\AppData\Local\Temp\wails-pack-{app-name}
|
||
|
||
# 执行构建
|
||
wails3 build
|
||
```
|
||
|
||
## 技术架构
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ 桌面应用 (.exe) │
|
||
├─────────────────────────────────────┤
|
||
│ Wails3 框架 │
|
||
│ ├─ WebView (渲染引擎) │
|
||
│ ├─ Go 运行时 │
|
||
│ └─ 嵌入的网站文件 │
|
||
│ ├─ HTML │
|
||
│ ├─ CSS │
|
||
│ ├─ JavaScript │
|
||
│ └─ 其他资源 │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
## 支持的平台
|
||
|
||
| 平台 | 架构 | 输出格式 | 备注 |
|
||
|------|------|---------|------|
|
||
| Windows | x64 | .exe | Windows 7+ |
|
||
| macOS | x64/arm64 | .app | macOS 10.13+ |
|
||
| Linux | x64 | 可执行文件 | 主流发行版 |
|
||
|
||
## 更多信息
|
||
|
||
- Wails 官方文档：https://wails.io
|
||
- Go 官方网站：https://go.dev
|
||
- 项目 GitHub：待添加
|
||
|
||
## 许可证
|
||
|
||
本工具遵循 MIT 许可证。
|