Skip to content

【Zig 日报】项目分享:zero-native 使用 Web UI 构建原生桌面应用 #329

@jiacai2050

Description

@jiacai2050

zero-native 是一个支持选择多种 Web 引擎的 Zig 桌面应用外壳。你可以使用系统内置的 WebView(macOS 上的 WKWebView 或 Linux 上的 WebKitGTK)来构建轻量级应用,也可以在 macOS 上通过 CEF 捆绑 Chromium,以获得高度可控的 Chromium 渲染效果。只需不到一分钟,即可创建一个带有 Web UI 的原生桌面应用。

Beta 版本范围

当前 Beta 版本主要面向 macOS 桌面应用。

  • 系统 WebView 构建版支持:macOS 和 Linux。
  • Chromium/CEF 构建及打包:目前仅限 macOS。
  • 后续路线图:Windows 支持以及 Linux 上的 Chromium 支持。

先决条件

  • Zig 0.16.0 或更高版本。
  • Node.js 及 npm(用于生成前端)。
  • macOS 11 或更高版本,或 Linux(Windows 支持开发中)。

创建项目

zero-native init my_app --frontend next
cd my_app

前端选项支持: next, vite, react, svelte, vue

该命令将构建一个完整的 zero-native 项目,结构如下:

  • build.zig:Zig 构建配置(包含平台、追踪、调试覆盖层、自动化、JS 桥接及 Web 引擎选项)。
  • build.zig.zon:Zig 包清单,声明 zero-native 依赖。
  • app.zon:应用元数据(名称、图标、权限、桥接命令、安全策略、窗口定义)。
  • src/main.zig:包含 app() 及可选 bridge() 方法的应用结构体。
  • src/runner.zig:平台连接(追踪汇聚、文件日志、崩溃捕获、状态存储、运行时初始化)。
  • assets/icon.icns:macOS 打包应用图标。
  • frontend/:所选框架的前端起始代码。

运行应用

首次构建前端时会自动安装依赖。应用将打开一个原生窗口,并使用 WebView 渲染 HTML。

macOS Beta 开发路径

在验证 macOS Beta 应用时,请遵循以下路径:

zero-native init my_app --frontend next
cd my_app
zig build run
zero-native cef install
zig build run
zero-native package --target macos --signing identity --identity "Developer ID Application: 你的名字"
zero-native doctor --manifest app.zon --strict

在运行 Chromium 之前,请在 app.zon 中设置 .web_engine = "chromium" 以及 .cef = .{ .dir = "third_party/cef/macos", .auto_install = false }。虽然 -Dweb-engine--web-engine 仍可用于临时覆盖,但常规的应用工作流会读取清单文件。

对于前端框架,在开发阶段请通过开发服务器运行前端,打包时再构建静态资源进行发布。


Hello World 示例

最简单的 zero-native 应用只需提供名称和内联 HTML:

const HelloApp = struct {
    fn app(self: *@This()) zero_native.App {
        return .{
            .context = self,
            .name = "hello",
            .source = zero_native.WebViewSource.html(
                \\<!doctype html>
                \\<html>
                \\<body style="font-family: system-ui; padding: 2rem;">
                \\  <h1>Hello from zero-native</h1>
                \\</body>
                \\</html>
            ),
        };
    }
};

进阶步骤

  • Web 引擎 —— 在系统 WebView 和 Chromium (CEF) 之间做出选择。
  • 应用模型 —— 了解应用、资源及生命周期回调的工作原理。
  • 前端项目 —— 如何在 zero-native 中使用 React、Vue 或 Svelte。
  • 桥接 (Bridge) —— 从 JavaScript 调用原生 Zig 代码。
  • 安全 —— 权限、策略及导航规则。

加入我们

Zig 中文社区是一个开放的组织,我们致力于推广 Zig 在中文群体中的使用,有多种方式可以参与进来:

  1. 供稿,分享自己使用 Zig 的心得
  2. 改进 ZigCC 组织下的开源项目
  3. 加入微信群Telegram 群组

Metadata

Metadata

Assignees

No one assigned

    Labels

    日报daily report

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions