5.9 KiB
5.9 KiB
网站打包成应用指南
功能说明
本工具可以将静态网站打包成独立的桌面应用程序,无需用户安装浏览器或其他运行环境。
打包原理
- 创建 Wails 项目:自动生成一个新的 Wails3 项目结构
- 嵌入网站文件:将静态网站文件(HTML、CSS、JS等)嵌入到应用中
- 编译应用:使用 Wails3 编译生成桌面应用
- 独立运行:打包后的应用内置 WebView,无需浏览器
环境要求
必需环境
- Go 1.21+:Go 编程语言环境
- Wails3:桌面应用框架
安装方式
方式一:使用本工具安装(推荐)
- 进入"应用打包"页面
- 查看环境检查卡片
- 点击"安装 Go"和"安装 Wails3"按钮
- 等待安装完成
方式二:手动安装
安装 Go:
# 下载 Go 安装包
# https://go.dev/dl/
# 或使用工具提供的脚本
.\install\go.bat
安装 Wails3:
# 确保已安装 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 中使用相对路径:
<!-- 推荐 -->
<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: 检查以下几点:
- 确保 Go 和 Wails3 已正确安装
- 检查网络连接(首次打包需要下载依赖)
- 确保磁盘空间充足
- 查看错误信息,根据提示解决
Q: 打包的应用很大?
A: 这是正常的,因为:
- 包含了 WebView 运行时
- 包含了 Go 运行时
- 包含了所有网站文件
- 可以通过压缩网站资源减小体积
Q: 应用可以在其他电脑运行吗?
A: 可以!打包后的应用是独立的:
- Windows 应用可在任何 Windows 7+ 系统运行
- macOS 应用可在任何 macOS 10.13+ 系统运行
- Linux 应用可在大多数 Linux 发行版运行
- 无需安装 Go、Wails 或浏览器
Q: 如何更新应用?
A: 重新打包即可:
- 修改网站文件
- 更改版本号
- 重新执行打包流程
- 分发新的可执行文件
Q: 可以添加自定义图标吗?
A: 当前版本暂不支持,后续版本会添加此功能。
高级用法
自定义配置
编辑生成的项目:
- 打包时会在临时目录创建项目
- 可以在
main.go中自定义窗口行为 - 可以添加 Go 后端代码
批量打包
使用命令行方式:
# 切换到临时项目目录
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 许可证。