尧图网页设计 
桌面应用跨平台【免费下载链接】nativeToolkit for building native desktop apps项目地址https://gitcode.com/gh_mirrors/ze/native点击查看免费下载Native SDKToolkit for building native desktop apps是一个用 Zig 编写原生外壳、以 Web 技术栈驱动界面层的桌面应用工具包。本指南以仓库中的 Vue 示例 为蓝本讲解如何用 Vue 3 Vite 编写前端用 Zig 搭建原生 WebView 外壳并打通「生产构建」与「开发热更新」两种运行模式。读完本文你将掌握zig build run/zig build dev的完整用法、app.zon清单的关键配置字段以及如何将示例独立移植到仓库之外使用。示例整体架构Vue 示例位于 examples/vue是一个刻意保持「极简」的入门工程目录结构如下examples/vue/ ├── app.zon # Native SDK 应用清单元数据、窗口、前端、安全策略 ├── src/ │ ├── main.zig # Zig 入口定义 App 与 WebView 前端源 │ └── runner.zig # 通用运行器解析 app.zon、启动 Runtime ├── frontend/ │ ├── index.html # Vite 入口 HTML │ ├── package.json # Vue 3 Vite 依赖与脚本 │ ├── vite.config.js # Vite 配置接入 vitejs/plugin-vue │ └── src/ │ ├── App.vue # 根组件检测原生桥接是否可用 │ ├── main.js # createApp 挂载点 │ └── style.css # 页面样式 └── README.md技术栈分工非常清晰Vue 负责全部 UIZig 负责窗口、WebView、安全策略等原生能力。前端产物最终由原生外壳以 WebView 内容的形式加载二者通过环境变量与清单配置衔接。快速运行zig build run在 examples/vue 目录下执行zig build run该命令会自动完成三件事README 原话安装前端依赖npm install、构建前端产物vite build输出到frontend/dist、打开加载了 WebView 内容的原生应用外壳。也就是说一条命令即可走完「依赖 → 构建 → 启动」的完整链路。从源码看前端产物正是由 src/main.zig 中的productionSource注入的fn app(self: *This()) native_sdk.App { return .{ .context self, .name vue-example, .source native_sdk.frontend.productionSource(.{ .dist frontend/dist }), .source_fn source, }; }productionSource与sourceFromEnv见 src/main.zig都指向frontend/dist作为生产资源目录index.html作为入口。入口测试也验证了这一点src/main.zigtest production source points at Vue build output { const source native_sdk.frontend.productionSource(.{ .dist frontend/dist }); try std.testing.expectEqual(native_sdk.WebViewSourceKind.assets, source.kind); try std.testing.expectEqualStrings(frontend/dist, source.asset_options.?.root_path); }前置条件示例在app.zon中声明支持macos与linux平台并依赖系统 WebView 引擎web_engine system请确保本地已安装 Zig 工具链与对应平台的 WebView 运行时。开发模式zig build devzig build dev是面向开发者的热更新模式zig build dev其工作流程README 原话从app.zon中读取命令启动 Vue dev server等待http://127.0.0.1:5173/可访问然后以NATIVE_SDK_FRONTEND_URL环境变量的方式把该地址传给原生外壳并启动应用。这样 Vue 的 HMR 热更新能力就能直接作用到桌面窗口里改前端代码无需重启原生进程。dev server 的具体行为全部配置在 app.zon 的frontend.dev块.frontend .{ .dist frontend/dist, .entry index.html, .spa_fallback true, .dev .{ .url http://127.0.0.1:5173/, .command .{ npm, --prefix, frontend, run, dev, --, --host, 127.0.0.1 }, .ready_path /, .timeout_ms 30000, }, },各字段含义字段取值说明distfrontend/dist生产构建输出目录entryindex.htmlWebView 加载的入口文件spa_fallbacktrue单页应用路由回退历史模式路由刷新时不 404dev.urlhttp://127.0.0.1:5173/开发模式加载地址dev.commandnpm --prefix frontend run dev -- --host 127.0.0.1dev server 启动命令绑定 127.0.0.1 而非默认的 localhostdev.ready_path/就绪探测路径请求成功即认为服务已启动dev.timeout_ms30000等待 dev server 就绪的超时时间毫秒值得注意--host 127.0.0.1与allowed_origins中的http://127.0.0.1:5173是配套的——开发地址被显式列入白名单确保 WebView 可以加载该来源。app.zon一份清单定义整个原生应用app.zon是 Native SDK 应用的核心清单examples/vue/app.zon 完整声明了应用的身份、能力、前端与安全策略.{ .id dev.native_sdk.vue-example, .name vue-example, .display_name Vue Example, .version 0.1.0, .platforms .{ macos, linux }, .permissions .{}, .capabilities .{ webview }, .frontend .{ ... }, .security .{ .navigation .{ .allowed_origins .{ zero://app, zero://inline, http://127.0.0.1:5173 }, .external_links .{ .action deny }, }, }, .web_engine system, .cef .{ .dir third_party/cef/macos, .auto_install false }, .windows .{ .{ .label main, .title Vue Example, .width 720, .height 480, .restore_state true }, }, }逐项解读身份字段iddev.native_sdk.vue-example、name、display_name、version。从 runner.zig 的appInfo可以看到运行时会把display_name、version、description等字段从清单读取进AppInfo作为操作系统菜单、Dock、About 面板展示的身份信息——即 dev 运行与打包后的Info.plist使用同一套身份。平台与能力platforms .{ macos, linux }capabilities .{ webview }声明应用需要 WebView 能力。runner 中的manifestHasWebContent()runner.zig正是依据webview能力或frontend块来判断应用是否承载 Web 内容进而决定是否生成 Reload 等 Web 相关菜单项。安全策略allowed_origins白名单包含zero://app、zero://inlineSDK 内部协议和http://127.0.0.1:5173开发服务器external_links.action deny表示拒绝打开外部链接防止 WebView 被导航到未知来源。这一策略在 src/main.zig 中通过dev_origins数组与RunOptions.security再次传入 Runtime双重保障。Web 引擎web_engine system使用系统 WebViewmacOS WKWebView / Linux WebKitGTKcef.dir指向third_party/cef/macosauto_install false表明默认不自动安装 CEF 组件。窗口定义一个label main的主窗口标题Vue Example尺寸 720×480restore_state true开启窗口状态恢复记忆上次位置与大小。Runner 会把windows清单逐条解析成WindowOptionsrunner.zig支持x/y、width/height、resizable、restore_state、restore_policy等字段未声明的字段使用默认值如默认 720×480、可缩放、restore_policy默认clamp_to_visible_screen。窗口状态实际由 runner.zig 的prepareStateStore加载到window_state.Store中实现位置记忆。Zig 原生外壳main.zig 与 runner.zigsrc/main.zig是应用真正的入口。它只做了两件关键的事声明App通过productionSource/sourceFromEnv告诉 Runtime「前端资源在哪」调用runner.runWithOptions传入应用名、窗口标题、bundle id 与安全策略后把控制权交给通用运行器pub fn main(init: std.process.Init) !void { var app App{ .env_map init.environ_map }; try runner.runWithOptions(app.app(), .{ .app_name Vue Example, .window_title Vue Example, .bundle_id dev.native_sdk.vue-example, .security .{ .navigation .{ .allowed_origins dev_origins }, }, }, init); }src/runner.zig则是所有示例共用的「样板代码」它负责在 comptime 读取app.zon、构建AppInfo、初始化平台层macOS / Linux / Windows / Null、设置日志与 trace 输出、把清单中的快捷键与窗口还原为运行时对象最后在堆上创建native_sdk.Runtime并执行runtime.run(app)。Runtime 体积达数十 MB因此 runner.zig 特意注释说明必须用堆分配而非栈上实例。sourceFromEnvmain.zig则是开发模式的关键当NATIVE_SDK_FRONTEND_URL存在时WebView 直接加载该 URL否则回退到本地打包资源。这正是zig build dev与zig build run在同一个 Zig 入口下共存的机制。前端实现Vue 组件与原生桥接探测前端是标准的 Vite Vue 3 工程frontend/package.json 依赖vue ^3.5.34开发依赖vite ^8.0.11与vitejs/plugin-vue ^6.0.6vite.config.js 只做了最小配置——注册 Vue 插件。构建脚本dev/build/preview均指向 Vite 命令。App.vue 展示了示例与原生层交互的「最小姿势」在onMounted中检查window.zero是否存在从而判断 Native bridge 是否可用script setup import { ref, onMounted } from vue; const bridge ref(checking...); onMounted(() { bridge.value window.zero ? available : not enabled; }); /scriptwindow.zero是 Native SDK 注入到 WebView 的桥接对象供前端调用系统能力。这为你自己的项目提供了起点桥接对象探测成功后即可通过它调用文件、存储、通知、凭据等原生能力相关实现可参考 runtime/effects_*.zig 系列文件与 examples 中system-monitor、kanban等更复杂的示例。将示例移出仓库独立使用示例默认通过相对路径../../引用 Native SDK 框架即仓库根目录因此脱离仓库后需要覆盖该路径。README 给出的命令是zig build run -Dnative-sdk-path/path/to/native-sdk该选项在示例的构建脚本中以b.option([]const u8, native-sdk-path, Path to the Native SDK framework checkout)声明参见 examples/hello/build.zig 等同构代码默认指向仓库内的 SDK 路径传入自定义路径即可让示例独立构建运行。同仓库的 React 示例、Next.js 示例 采用完全一致的模式可以作为对照参考。小结Native SDK 的 Vue 示例展示了一条「Vue 管界面、Zig 管原生」的桌面应用开发路径生产模式zig build run一条命令完成依赖安装、前端构建与原生外壳启动开发模式zig build dev通过app.zon内置的 dev server 配置 NATIVE_SDK_FRONTEND_URL环境变量把 Vite HMR 直接带进桌面窗口清单驱动应用身份、窗口、能力、安全策略全部收敛在 app.zon 一个文件中Zig 侧只需极少样板桥接入口前端通过window.zero探测并调用原生能力。以此示例为起点配合 examples 下的react、svelte、next等同构示例以及 docs 与 skills/native-sdk/SKILL.md 中的进阶资料即可快速搭建你自己的跨端桌面应用。赞分享桌面应用跨平台【免费下载链接】nativeToolkit for building native desktop apps项目地址https://gitcode.com/gh_mirrors/ze/native点击查看免费下载相关推荐Native SDK 实战用 Zig 与 app.zon 构建 native-first 桌面应用外壳native-shell 示例深度解析Native SDK 实战用 Zig 与 app.zon 构建 native first 桌面应用外壳native shell 示例深度解析 本篇技术指南桌面应用跨平台Vue-Vben-Admin快速构建桌面应用Electron实战完整指南Vue Vben Admin快速构建桌面应用Electron实战完整指南 你是否曾想过将功能强大的Vue Vben Admin后台管理系统打包成独立的桌面应前端Gloo与现有JS项目集成指南如何在传统应用中嵌入Rust模块 Gloo与现有JS项目集成指南如何在传统应用中嵌入Rust模块 Gloo是一个用于构建快速、可靠的Web应用程序和库的模块化工具包专为Rust和Web上一篇揭秘mynlp平均感知机从原理到代码教你构建高性能序列标注模型下一篇ESP-NOW无线调试高电压环境下的设备日志远程采集技巧创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 用 Vue 与 Zig 构建原生桌面应用：Native SDK Vue 示例完整实战指南
桌面应用跨平台【免费下载链接】nativeToolkit for building native desktop apps项目地址https://gitcode.com/gh_mirrors/ze/native点击查看免费下载Native SDKToolkit for building native desktop apps是一个用 Zig 编写原生外壳、以 Web 技术栈驱动界面层的桌面应用工具包。本指南以仓库中的 Vue 示例 为蓝本讲解如何用 Vue 3 Vite 编写前端用 Zig 搭建原生 WebView 外壳并打通「生产构建」与「开发热更新」两种运行模式。读完本文你将掌握zig build run/zig build dev的完整用法、app.zon清单的关键配置字段以及如何将示例独立移植到仓库之外使用。示例整体架构Vue 示例位于 examples/vue是一个刻意保持「极简」的入门工程目录结构如下examples/vue/ ├── app.zon # Native SDK 应用清单元数据、窗口、前端、安全策略 ├── src/ │ ├── main.zig # Zig 入口定义 App 与 WebView 前端源 │ └── runner.zig # 通用运行器解析 app.zon、启动 Runtime ├── frontend/ │ ├── index.html # Vite 入口 HTML │ ├── package.json # Vue 3 Vite 依赖与脚本 │ ├── vite.config.js # Vite 配置接入 vitejs/plugin-vue │ └── src/ │ ├── App.vue # 根组件检测原生桥接是否可用 │ ├── main.js # createApp 挂载点 │ └── style.css # 页面样式 └── README.md技术栈分工非常清晰Vue 负责全部 UIZig 负责窗口、WebView、安全策略等原生能力。前端产物最终由原生外壳以 WebView 内容的形式加载二者通过环境变量与清单配置衔接。快速运行zig build run在 examples/vue 目录下执行zig build run该命令会自动完成三件事README 原话安装前端依赖npm install、构建前端产物vite build输出到frontend/dist、打开加载了 WebView 内容的原生应用外壳。也就是说一条命令即可走完「依赖 → 构建 → 启动」的完整链路。从源码看前端产物正是由 src/main.zig 中的productionSource注入的fn app(self: *This()) native_sdk.App { return .{ .context self, .name vue-example, .source native_sdk.frontend.productionSource(.{ .dist frontend/dist }), .source_fn source, }; }productionSource与sourceFromEnv见 src/main.zig都指向frontend/dist作为生产资源目录index.html作为入口。入口测试也验证了这一点src/main.zigtest production source points at Vue build output { const source native_sdk.frontend.productionSource(.{ .dist frontend/dist }); try std.testing.expectEqual(native_sdk.WebViewSourceKind.assets, source.kind); try std.testing.expectEqualStrings(frontend/dist, source.asset_options.?.root_path); }前置条件示例在app.zon中声明支持macos与linux平台并依赖系统 WebView 引擎web_engine system请确保本地已安装 Zig 工具链与对应平台的 WebView 运行时。开发模式zig build devzig build dev是面向开发者的热更新模式zig build dev其工作流程README 原话从app.zon中读取命令启动 Vue dev server等待http://127.0.0.1:5173/可访问然后以NATIVE_SDK_FRONTEND_URL环境变量的方式把该地址传给原生外壳并启动应用。这样 Vue 的 HMR 热更新能力就能直接作用到桌面窗口里改前端代码无需重启原生进程。dev server 的具体行为全部配置在 app.zon 的frontend.dev块.frontend .{ .dist frontend/dist, .entry index.html, .spa_fallback true, .dev .{ .url http://127.0.0.1:5173/, .command .{ npm, --prefix, frontend, run, dev, --, --host, 127.0.0.1 }, .ready_path /, .timeout_ms 30000, }, },各字段含义字段取值说明distfrontend/dist生产构建输出目录entryindex.htmlWebView 加载的入口文件spa_fallbacktrue单页应用路由回退历史模式路由刷新时不 404dev.urlhttp://127.0.0.1:5173/开发模式加载地址dev.commandnpm --prefix frontend run dev -- --host 127.0.0.1dev server 启动命令绑定 127.0.0.1 而非默认的 localhostdev.ready_path/就绪探测路径请求成功即认为服务已启动dev.timeout_ms30000等待 dev server 就绪的超时时间毫秒值得注意--host 127.0.0.1与allowed_origins中的http://127.0.0.1:5173是配套的——开发地址被显式列入白名单确保 WebView 可以加载该来源。app.zon一份清单定义整个原生应用app.zon是 Native SDK 应用的核心清单examples/vue/app.zon 完整声明了应用的身份、能力、前端与安全策略.{ .id dev.native_sdk.vue-example, .name vue-example, .display_name Vue Example, .version 0.1.0, .platforms .{ macos, linux }, .permissions .{}, .capabilities .{ webview }, .frontend .{ ... }, .security .{ .navigation .{ .allowed_origins .{ zero://app, zero://inline, http://127.0.0.1:5173 }, .external_links .{ .action deny }, }, }, .web_engine system, .cef .{ .dir third_party/cef/macos, .auto_install false }, .windows .{ .{ .label main, .title Vue Example, .width 720, .height 480, .restore_state true }, }, }逐项解读身份字段iddev.native_sdk.vue-example、name、display_name、version。从 runner.zig 的appInfo可以看到运行时会把display_name、version、description等字段从清单读取进AppInfo作为操作系统菜单、Dock、About 面板展示的身份信息——即 dev 运行与打包后的Info.plist使用同一套身份。平台与能力platforms .{ macos, linux }capabilities .{ webview }声明应用需要 WebView 能力。runner 中的manifestHasWebContent()runner.zig正是依据webview能力或frontend块来判断应用是否承载 Web 内容进而决定是否生成 Reload 等 Web 相关菜单项。安全策略allowed_origins白名单包含zero://app、zero://inlineSDK 内部协议和http://127.0.0.1:5173开发服务器external_links.action deny表示拒绝打开外部链接防止 WebView 被导航到未知来源。这一策略在 src/main.zig 中通过dev_origins数组与RunOptions.security再次传入 Runtime双重保障。Web 引擎web_engine system使用系统 WebViewmacOS WKWebView / Linux WebKitGTKcef.dir指向third_party/cef/macosauto_install false表明默认不自动安装 CEF 组件。窗口定义一个label main的主窗口标题Vue Example尺寸 720×480restore_state true开启窗口状态恢复记忆上次位置与大小。Runner 会把windows清单逐条解析成WindowOptionsrunner.zig支持x/y、width/height、resizable、restore_state、restore_policy等字段未声明的字段使用默认值如默认 720×480、可缩放、restore_policy默认clamp_to_visible_screen。窗口状态实际由 runner.zig 的prepareStateStore加载到window_state.Store中实现位置记忆。Zig 原生外壳main.zig 与 runner.zigsrc/main.zig是应用真正的入口。它只做了两件关键的事声明App通过productionSource/sourceFromEnv告诉 Runtime「前端资源在哪」调用runner.runWithOptions传入应用名、窗口标题、bundle id 与安全策略后把控制权交给通用运行器pub fn main(init: std.process.Init) !void { var app App{ .env_map init.environ_map }; try runner.runWithOptions(app.app(), .{ .app_name Vue Example, .window_title Vue Example, .bundle_id dev.native_sdk.vue-example, .security .{ .navigation .{ .allowed_origins dev_origins }, }, }, init); }src/runner.zig则是所有示例共用的「样板代码」它负责在 comptime 读取app.zon、构建AppInfo、初始化平台层macOS / Linux / Windows / Null、设置日志与 trace 输出、把清单中的快捷键与窗口还原为运行时对象最后在堆上创建native_sdk.Runtime并执行runtime.run(app)。Runtime 体积达数十 MB因此 runner.zig 特意注释说明必须用堆分配而非栈上实例。sourceFromEnvmain.zig则是开发模式的关键当NATIVE_SDK_FRONTEND_URL存在时WebView 直接加载该 URL否则回退到本地打包资源。这正是zig build dev与zig build run在同一个 Zig 入口下共存的机制。前端实现Vue 组件与原生桥接探测前端是标准的 Vite Vue 3 工程frontend/package.json 依赖vue ^3.5.34开发依赖vite ^8.0.11与vitejs/plugin-vue ^6.0.6vite.config.js 只做了最小配置——注册 Vue 插件。构建脚本dev/build/preview均指向 Vite 命令。App.vue 展示了示例与原生层交互的「最小姿势」在onMounted中检查window.zero是否存在从而判断 Native bridge 是否可用script setup import { ref, onMounted } from vue; const bridge ref(checking...); onMounted(() { bridge.value window.zero ? available : not enabled; }); /scriptwindow.zero是 Native SDK 注入到 WebView 的桥接对象供前端调用系统能力。这为你自己的项目提供了起点桥接对象探测成功后即可通过它调用文件、存储、通知、凭据等原生能力相关实现可参考 runtime/effects_*.zig 系列文件与 examples 中system-monitor、kanban等更复杂的示例。将示例移出仓库独立使用示例默认通过相对路径../../引用 Native SDK 框架即仓库根目录因此脱离仓库后需要覆盖该路径。README 给出的命令是zig build run -Dnative-sdk-path/path/to/native-sdk该选项在示例的构建脚本中以b.option([]const u8, native-sdk-path, Path to the Native SDK framework checkout)声明参见 examples/hello/build.zig 等同构代码默认指向仓库内的 SDK 路径传入自定义路径即可让示例独立构建运行。同仓库的 React 示例、Next.js 示例 采用完全一致的模式可以作为对照参考。小结Native SDK 的 Vue 示例展示了一条「Vue 管界面、Zig 管原生」的桌面应用开发路径生产模式zig build run一条命令完成依赖安装、前端构建与原生外壳启动开发模式zig build dev通过app.zon内置的 dev server 配置 NATIVE_SDK_FRONTEND_URL环境变量把 Vite HMR 直接带进桌面窗口清单驱动应用身份、窗口、能力、安全策略全部收敛在 app.zon 一个文件中Zig 侧只需极少样板桥接入口前端通过window.zero探测并调用原生能力。以此示例为起点配合 examples 下的react、svelte、next等同构示例以及 docs 与 skills/native-sdk/SKILL.md 中的进阶资料即可快速搭建你自己的跨端桌面应用。赞分享桌面应用跨平台【免费下载链接】nativeToolkit for building native desktop apps项目地址https://gitcode.com/gh_mirrors/ze/native点击查看免费下载相关推荐Native SDK 实战用 Zig 与 app.zon 构建 native-first 桌面应用外壳native-shell 示例深度解析Native SDK 实战用 Zig 与 app.zon 构建 native first 桌面应用外壳native shell 示例深度解析 本篇技术指南桌面应用跨平台Vue-Vben-Admin快速构建桌面应用Electron实战完整指南Vue Vben Admin快速构建桌面应用Electron实战完整指南 你是否曾想过将功能强大的Vue Vben Admin后台管理系统打包成独立的桌面应前端Gloo与现有JS项目集成指南如何在传统应用中嵌入Rust模块 Gloo与现有JS项目集成指南如何在传统应用中嵌入Rust模块 Gloo是一个用于构建快速、可靠的Web应用程序和库的模块化工具包专为Rust和Web上一篇揭秘mynlp平均感知机从原理到代码教你构建高性能序列标注模型下一篇ESP-NOW无线调试高电压环境下的设备日志远程采集技巧创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考