wails/mkdocs-website/docs/zh/whats-new.md

v3有哪些新功能？

!!! note v3版本中将包含的功能可能会有所更改。

多窗口

现在可以创建多个窗口，并对每个窗口进行独立配置。

package main

import (
        _ "embed"
        "log"

        "github.com/wailsapp/wails/v3/pkg/application"
)

//go:embed assets/*
var assets embed.FS

func main() {

        app := application.New(application.Options{
                Name:        "多窗口演示",
                Assets: application.AssetOptions{
                        FS: assets,
                },
        })

        window1 := app.NewWebviewWindowWithOptions(application.WebviewWindowOptions{
                Title:  "窗口1",
        })

        window2 := app.NewWebviewWindowWithOptions(application.WebviewWindowOptions{
                Title:  "窗口2",
        })

		// 从embed.FS加载嵌入的html
        window1.SetURL("/")
		window1.Center()

		// 加载外部URL
        window2.SetURL("https://wails.app")

        err := app.Run()

        if err != nil {
                log.Fatal(err.Error())
        }
}

系统托盘

系统托盘允许您在桌面的系统托盘区域添加一个图标，并具有以下功能：

• 附加窗口（窗口将居中于系统托盘图标）
• 完整的菜单支持
• 亮/暗模式图标

package main

import (
	_ "embed"
	"log"
	"runtime"

	"github.com/wailsapp/wails/v3/pkg/application"
	"github.com/wailsapp/wails/v3/pkg/icons"
)

func main() {
	app := application.New(application.Options{
		Name:        "系统托盘演示",
		Mac: application.MacOptions{
			ActivationPolicy: application.ActivationPolicyAccessory,
		},
	})

	window := app.NewWebviewWindowWithOptions(application.WebviewWindowOptions{
		Width:       500,
		Height:      800,
		Frameless:   true,
		AlwaysOnTop: true,
		Hidden:      true,
		Windows: application.WindowsWindow{
			HiddenOnTaskbar: true,
		},
	})

	systemTray := app.NewSystemTray()

	// macOS上的模板图标支持
	if runtime.GOOS == "darwin" {
		systemTray.SetTemplateIcon(icons.SystrayMacTemplate)
	} else {
        // 亮/暗模式图标支持
        systemTray.SetDarkModeIcon(icons.SystrayDark)
        systemTray.SetIcon(icons.SystrayLight)
    }

    // 菜单支持
	myMenu := app.NewMenu()
	myMenu.Add("Hello World!").OnClick(func(_ *application.Context) {
		println("Hello World!")
	})
	systemTray.SetMenu(myMenu)

	// 这将使窗口居中于系统托盘图标，偏移量为5px
	// 单击系统托盘图标时，它将自动显示
	// 当窗口失去焦点时隐藏
	systemTray.AttachWindow(window).WindowOffset(5)

	err := app.Run()
	if err != nil {
		log.Fatal(err)
	}
}

插件

插件允许您扩展Wails系统的功能。不仅可以在Go中使用插件方法，还可以从Javascript中 调用插件方法。包含的插件有：

• kvstore - 键/值存储
• browser - 在浏览器中打开链接
• log - 自定义日志记录器
• oauth - 处理OAuth身份验证并支持60个提供商
• single_instance - 仅允许运行一个应用程序副本
• sqlite - 向应用程序添加SQLite数据库。使用现代纯Go库
• start_at_login - 注册/注销应用程序以在登录时启动

改进的绑定生成

v3使用新的静态分析器生成绑定。这使得生成绑定非常快速，并保留了绑定中的注释和参数 名称。默认情况下，绑定使用ID而不是字符串进行调用。这提供了性能提升，并允许使用混 淆工具，如garble。

通过在项目目录中运行 wails3 generate bindings 来生成绑定。

// @ts-check
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
// This file is automatically generated. DO NOT EDIT

import { main } from "./models";

window.go = window.go || {};
window.go.main = {
  GreetService: {
    /**
     * GreetService.Greet
     * Greet greets a person
     * @param name {string}
     * @returns {Promise<string>}
     **/
    Greet: function (name) {
      wails.CallByID(1411160069, ...Array.prototype.slice.call(arguments, 0));
    },

    /**
     * GreetService.GreetPerson
     * GreetPerson greets a person
     * @param person {main.Person}
     * @returns {Promise<string>}
     **/
    GreetPerson: function (person) {
      wails.CallByID(4021313248, ...Array.prototype.slice.call(arguments, 0));
    },
  },
};

改进的构建系统

在v2中，构建系统完全不透明且难以自定义。在v3中，可以使用标准的Go工具构建所有内 容。

v2构建系统完成的所有繁重工作，例如图标生成，已作为CLI中的工具命令添加。我们 将Taskfile整合到CLI中，以协调这些调用，以带来与v2相同的 开发人员体验。然而，这种方法在灵活性和易用性之间达到了最佳平衡，因为现在您可以根 据需要自定义构建过程。

您甚至可以使用make，如果那是您的菜！

build:darwin:
  summary: 构建应用程序
  platforms:
    - darwin
  cmds:
    - task: pre-build
    - task: build-frontend
    - go build -gcflags=all="-N -l" -o bin/{{.APP_NAME}}
    - task: post-build
  env:
    CGO_CFLAGS: "-mmacosx-version-min=10.13"
    CGO_LDFLAGS: "-mmacosx-version-min=10.13"
    MACOSX_DEPLOYMENT_TARGET: "10.13"

改进的事件

现在为许多运行时操作发出事件，允许您挂钩应用程序/系统事件。在存在常见平台事件的 地方，还发出了跨平台（通用）事件，允许您在跨平台上编写相同的事件处理方法。

还可以注册事件钩子。这些钩子类似于On方法，但是是同步的，并允许您取消事件。例 如，在关闭窗口之前显示确认对话框的示例。

package main

import (
	_ "embed"
	"log"
	"time"

	"github.com/wailsapp/wails/v3/pkg/application"
	"github.com/wailsapp/wails/v3/pkg/events"
)

//go:embed assets
var assets embed.FS

func main() {

	app := application.New(application.Options{
		Name:        "Events Demo",
		Description: "Events API演示",
		Assets: application.AssetOptions{
			FS: assets,
		},
		Mac: application.MacOptions{
			ApplicationShouldTerminateAfterLastWindowClosed: true,
		},
	})

	// 自定义事件处理
	app.Events.On("myevent", func(e *application.WailsEvent) {
		log.Printf("[Go] 收到WailsEvent事件: %+v\n", e)
	})

	// 特定于操作系统的应用程序事件
	app.On(events.Mac.ApplicationDidFinishLaunching, func(event *application.Event) {
        println("events.Mac.ApplicationDidFinishLaunching触发！")
	})

	// 平台无关事件
	app.On(events.Common.ApplicationStarted, func(event *application.Event) {
		println("events.Common.ApplicationStarted触发！")
	})

	win1 := app.NewWebviewWindowWithOptions(application.WebviewWindowOptions{
		Title: "关闭我需要3次确认！",
	})

	var countdown = 3

	// 注册钩子以取消窗口关闭
	win1.RegisterHook(events.Common.WindowClosing, func(e *application.WindowEvent) {
		countdown--
		if countdown == 0 {
			println("关闭！")
			return
		}
		println("不行！不关闭！")
		e.Cancel()
	})

	win1.On(events.Common.WindowFocus, func(e *application.WindowEvent) {
		println("[事件] 窗口焦点！")
	})

	err := app.Run()

	if err != nil {
		log.Fatal(err.Error())
	}
}

Wails标记语言（wml）

一种实验性的功能，使用纯HTML调用运行时方法，类似于htmx。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Wails ML演示</title>
  </head>
  <body style="margin-top:50px; color: white; background-color: #191919">
    <h2>Wails ML演示</h2>
    <p>此应用程序不包含任何Javascript！</p>
    <button wml-event="button-pressed">按我！</button>
    <button wml-event="delete-things" wml-confirm="确定吗？">
      删除所有内容！
    </button>
    <button wml-window="Close" wml-confirm="确定吗？">关闭窗口？</button>
    <button wml-window="Center">居中</button>
    <button wml-window="Minimise">最小化</button>
    <button wml-window="Maximise">最大化</button>
    <button wml-window="UnMaximise">取消最大化</button>
    <button wml-window="Fullscreen">全屏</button>
    <button wml-window="UnFullscreen">取消全屏</button>
    <button wml-window="Restore">还原</button>
    <div
      style="width: 200px; height: 200px; border: 2px solid white;"
      wml-event="hover"
      wml-trigger="mouseover"
    >
      悬停在我上面
    </div>
  </body>
</html>