Blog Entry

zig-webui试玩

Created: 2024/01/06
Updated: 2024/01/06

资料

webui-dev/zig-webui: Use any web browser as GUI, with Zig in the backend and HTML5 in the frontend.
webui-dev/webui: Use any web browser as GUI, with your preferred language in the backend and HTML5 in the frontend, all in a lightweight portable lib.

环境

Windows 10

❯ zig version
0.11.0

使用

新建项目

mkdir webuix
cd webuix
zig init-exe

引入webui

修改build.zig文件,加入:

    const zig_webui = b.dependency("zig-webui", .{
        .target = target,
        .optimize = optimize,
        .enable_tls = false,
        .is_static = true,
    });

    // add module
    exe.addModule("webui", zig_webui.module("webui"));

    // link library
    exe.linkLibrary(zig_webui.artifact("webui"));

添加或修改build.zig.zon, (在dependencies中增加zigwebui):

.{
    .name = "webuix",
    .version = "0.0.1",
    .minimum_zig_version = "0.11.0",
    .dependencies = .{
        .@"zig-webui" = .{
            // It is recommended to replace the following branch with commit id
            .url = "https://github.com/webui-dev/zig-webui/archive/main.tar.gz",
            .hash = "12201a01f9682c7b2caa3abe27e7aef824a3c421393b84e96aa2615e284bd87cd8bd",
        },
    },
    .paths = .{
        "",
    },
}

修改main.zig, (参考zig-webui/src/examples/minimal/main.zig)

const webui = @import("webui");

pub fn main() !void {
    var nwin = webui.newWindow();
    _ = nwin.show("<html><head><script src=\"webui.js\"></script></head> Hello World ! </html>");
    webui.wait();
}