mirror of
https://github.com/wailsapp/wails.git
synced 2025-05-18 09:59:31 +08:00
73caeb9793
* docs: standardize JavaScript and TypeScript name writing * docs: sync translated documents * docs: fix broken link * docs: sync translated documents
194 lines
8.7 KiB
Plaintext
194 lines
8.7 KiB
Plaintext
# 从 v1 迁移
|
||
|
||
## 概述
|
||
|
||
Wails v2 与 v1 相比有重大变化。 本文档旨在重点介绍迁移现有项目的更改和步骤。
|
||
|
||
### 创建应用程序
|
||
|
||
在 v1 中，使用 `wails.CreateApp` 来创建主应用程序，使用 `app.Bind` 来添加绑定，然后使用 `app.Run()` 运行应用程序。
|
||
|
||
示例：
|
||
|
||
```go title="v1"
|
||
app := wails.CreateApp(&wails.AppConfig{
|
||
Title: "MyApp",
|
||
Width: 1024,
|
||
Height: 768,
|
||
JS: js,
|
||
CSS: css,
|
||
Colour: "#131313",
|
||
})
|
||
app.Bind(basic)
|
||
app.Run()
|
||
```
|
||
|
||
在 v2 中，只有一个 `wails.Run()` 方法接受 [应用程序参数选项](../reference/options#应用程序参数选项)。
|
||
|
||
```go title="v2"
|
||
err := wails.Run(&options.App{
|
||
Title: "MyApp",
|
||
Width: 800,
|
||
Height: 600,
|
||
AssetServer: &assetserver.Options{
|
||
Assets: assets,
|
||
},
|
||
Bind: []interface{}{
|
||
basic,
|
||
},
|
||
})
|
||
```
|
||
|
||
### 绑定
|
||
|
||
在 v1 中，可以绑定任意函数和结构。 在 v2 中，这已被简化为仅绑定结构体。 以前 v1 传递给 `Bind()` 中的方法的结构实例现在在 [应用程序参数选项 ](../reference/options#应用程序参数选项)`Bind` 字段中指定：
|
||
|
||
```go title="v1"
|
||
app := wails.CreateApp(/* options */)
|
||
app.Bind(basic)
|
||
```
|
||
|
||
```go title="v2"
|
||
err := wails.Run(&options.App{
|
||
/* other options */
|
||
Bind: []interface{}{
|
||
basic,
|
||
},
|
||
})
|
||
```
|
||
|
||
在 v1 中，绑定方法可用于前端的 `window.backend`。 这已更改为 `window.go`。
|
||
|
||
### 应用程序生命周期
|
||
|
||
在 v1 中，绑定结构中有 2 个特殊方法：`WailsInit()` 和 `WailsShutdown()`。 作为应用程序选项的一部分，这些已被 3 个生命周期钩子替换：
|
||
|
||
- [应用启动回调](../reference/options.mdx#onstartup)
|
||
- [应用退出回调](../reference/options.mdx#onshutdown)
|
||
- [前端 Dom 加载完成回调](../reference/options.mdx#ondomready)
|
||
|
||
注意：[ 前端 Dom 加载完成回调](../reference/options#前端-dom-加载完成回调)替换了 v1 中的 `wails:ready` 系统事件。
|
||
|
||
这些方法可以是标准函数，但通常的做法是让它们成为结构的一部分：
|
||
|
||
```go title="v2"
|
||
basic := NewBasicApp()
|
||
err := wails.Run(&options.App{
|
||
/* Other Options */
|
||
OnStartup: basic.startup,
|
||
OnShutdown: basic.shutdown,
|
||
OnDomReady: basic.domready,
|
||
})
|
||
...
|
||
type Basic struct {
|
||
ctx context.Context
|
||
}
|
||
func (b *Basic) startup(ctx context.Context) {
|
||
b.ctx = ctx
|
||
}
|
||
...
|
||
```
|
||
|
||
### 运行时
|
||
|
||
v2 中的运行时比 v1 丰富得多，支持菜单、窗口操作和更好的对话框。 方法的签名略有变化 - 请参阅 [运行时](../reference/runtime/intro)。
|
||
|
||
在 v1 中，[运行时](../reference/runtime/intro) 可通过传递给 `WailsInit()`。 在 v2 中，运行时已移出到它自己的包。 运行时中的每个方法都采用 `context.Context` 传递给了 [应用启动回调](../reference/options#应用启动回调)方法。
|
||
|
||
```go title="Runtime Example"
|
||
package main
|
||
|
||
import "github.com/wailsapp/wails/v2/pkg/runtime"
|
||
|
||
type Basic struct {
|
||
ctx context.Context
|
||
}
|
||
|
||
// startup is called at application startup
|
||
func (a *App) startup(ctx context.Context) {
|
||
a.ctx = ctx
|
||
runtime.LogInfo(ctx, "Application Startup called!")
|
||
}
|
||
}
|
||
}
|
||
|
||
```
|
||
|
||
### 资产
|
||
|
||
在 v2 最大的变化是资源的处理方式。
|
||
|
||
在 v1 中，资源通过 2 个应用程序参数选项传递：
|
||
|
||
- `JS` - 应用程序的 JavaScript
|
||
- `CSS` - 应用程序的 CSS
|
||
|
||
这意味着生成单个 JS 和 CSS 文件的责任在于开发人员。 这本质上需要使用繁琐的打包程序，例如 webpack。
|
||
|
||
在 v2 中，Wails 不对您的前端资源做任何预设，就像网络服务器一样。 您的所有应用程序资源都作为 `embed.FS`。
|
||
|
||
**这意味着不需要捆绑您的资产、将图像编码为 Base64 或尝试使用捆绑器配置的黑暗艺术来使用自定义字体**。
|
||
|
||
在启动时，Wails 将扫描给定的`embed.FS`的`index.html`并将其位置用作所有其他应用程序资源的根路径 - 就像网络服务器一样。
|
||
|
||
示例：应用程序具有以下项目布局。 所有最终资源都放在 `frontend/dist`目录中：
|
||
|
||
```shell
|
||
.
|
||
├── build/
|
||
├── frontend/
|
||
│ └── dist/
|
||
│ ├── index.html
|
||
│ ├── main.js
|
||
│ ├── main.css
|
||
│ └── logo.svg
|
||
├── main.go
|
||
└── wails.json
|
||
```
|
||
|
||
应用程序可以通过简单地创建一个 `embed.FS` 来使用这些资源：
|
||
|
||
```go title="Assets Example"
|
||
//go:embed all:frontend/dist
|
||
var assets embed.FS
|
||
|
||
func main() {
|
||
err := wails.Run(&options.App{
|
||
/* Other Options */
|
||
AssetServer: &assetserver.Options{
|
||
Assets: assets,
|
||
},
|
||
})
|
||
}
|
||
```
|
||
|
||
当然，如果您愿意，也可以使用打包工具。 唯一的要求是在 Wails 中使用 `embed.FS` 将最终的程序资源目录传递给 [应用程序参数选项](../reference/options#应用程序参数选项) 的 `Assets` 键。
|
||
|
||
### 项目配置
|
||
|
||
在 v1 中，项目配置存储在项目根的 `project.json` 文件中。 在 v2 中，项目配置存储在项目根部的 `wails.json` 文件中。
|
||
|
||
文件的格式略有不同。 下面是区别：
|
||
|
||
<p align="center">
|
||
|
||
| v1 | v2 | 记录 |
|
||
| ------------------ | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||
| name | name | |
|
||
| description | | 移除 |
|
||
| author / name | author / name | |
|
||
| author / email | author / email | |
|
||
| version | version | |
|
||
| binaryname | outputfilename | 变更 |
|
||
| frontend / dir | | 移除 |
|
||
| frontend / install | frontend:install | 变更 |
|
||
| frontend / build | frontend:build | 变更 |
|
||
| frontend / bridge | | 移除 |
|
||
| frontend / serve | | 移除 |
|
||
| tags | | 移除 |
|
||
| | wailsjsdir | 生成 wailsjs 模块的目录 |
|
||
| | assetdir | 为开发模式编译的前端资产的目录。 这通常是推断的，可以留空。 |
|
||
| | reloaddirs | 以逗号分隔的附加目录列表，用于监视更改并在开发模式下触发重新加载。 只有一些更高级的资产配置才需要这样做。 |
|
||
|
||
</p>
|