WebUI项目中的多窗口顺序显示实现方法

2025-06-22 06:31:03作者：温艾琴Wonderful

Use any web browser or WebView as GUI, with your preferred language in the backend and modern web technologies in the frontend, all in a lightweight portable library.

项目地址：https://gitcode.com/gh_mirrors/we/webui

在WebUI项目中，开发者经常需要实现多个窗口的顺序显示，即第一个窗口关闭后再显示第二个窗口。本文将详细介绍如何通过事件监听机制实现这一功能。

问题背景

在WebUI的Zig绑定中，直接连续调用wait()方法并不能实现窗口的顺序显示。这是因为wait()会阻塞程序执行，导致后续代码无法运行。我们需要寻找一种更优雅的解决方案。

解决方案核心思路

通过事件监听机制，我们可以检测窗口的关闭事件，并在第一个窗口关闭后触发第二个窗口的显示。这种方法利用了WebUI的事件系统，实现了窗口间的有序切换。

具体实现步骤

全局变量声明：首先声明两个窗口变量作为全局变量，以便在事件处理函数中访问。
窗口初始化：在main函数中创建两个窗口实例。
事件绑定：为两个窗口绑定同一个事件处理函数。
显示第一个窗口：调用第一个窗口的show方法。
事件处理：在事件处理函数中检测窗口关闭事件，当第一个窗口关闭时显示第二个窗口。

代码实现详解

const std = @import("std");
const webui = @import("webui");

// 全局窗口变量声明
var nwin: webui = undefined;
var nwin2: webui = undefined;

pub fn main() !void {
    // 创建两个新窗口
    nwin = webui.newWindow();
    nwin2 = webui.newWindow();

    // 为两个窗口绑定事件处理函数
    _ = nwin.bind("", events);
    _ = nwin2.bind("", events);

    // 显示第一个窗口的内容
    _ = nwin.show("<html><head><script src=\"/webui.js\"></script></head> Hello World ! </html>");

    // 等待所有窗口退出
    webui.wait();

    // 清理资源
    webui.clean();
}

// 事件处理函数
fn events(e: webui.Event) void {
    std.debug.print("Event. \n", .{});
    switch (e.event_type) {
        .EVENT_CONNECTED => {
            std.debug.print("Connected. \n", .{});
        },
        .EVENT_DISCONNECTED => {
            std.debug.print("Disconnected. \n", .{});
            const win = e.getWindow();
            if (win.window_handle == nwin.window_handle) {
                std.debug.print("第一个窗口已关闭，显示第二个窗口 \n", .{});
                // 显示第二个窗口
                _ = nwin2.show("<html><head><script src=\"/webui.js\"></script></head> Hello AGAIN World 2 ! </html>");
            }
        },
        else => {},
    }
}