桌面应用跨平台【免费下载链接】nodeguiA library for building cross-platform native desktop applications with Node.js and CSS . React NodeGui : https://react.nodegui.org and Vue NodeGui: https://vue.nodegui.org项目地址https://gitcode.com/gh_mirrors/no/nodegui点击查看免费下载本教程面向具备 Web 开发经验、熟悉 JavaScript 或 TypeScript 的开发者系统讲解 NodeGui 应用的基础结构从package.json与入口文件的目录组织到如何通过nodegui/nodegui模块创建原生窗口QMainWindow、理解JavaScript 包装器 原生 Qt 控件的运行原理再到常用原生组件与样式系统的快速上手。读完本文你将能独立搭建并运行第一个 NodeGui 桌面应用并清楚知道下一步深入学习的方向。NodeGui 开发的核心思想原生组件而非 Web 组件NodeGui 与 Electron 等方案的底层思路不同它不使用浏览器内核渲染界面而是以 Qt 的原生组件native widgets作为构建积木。也就是说你在代码里创建的不是 DOM 节点而是直接由操作系统图形框架绘制、与桌面环境紧密集成的原生控件。正因如此学习 NodeGui 并不需要掌握 HTML/CSS/DOM 的那套运行时模型你只需要熟悉 JavaScript 或 TypeScript 的基本语法了解 Node.js 模块系统require/import具备最基本的 Web 开发经验本教程即以此为读者画像。NodeGui 应用本质上是 Node.js 应用从开发流程看一个 NodeGui 应用本质上就是一个 Node.js 应用——它的起点是与普通 Node.js 模块完全一致的package.json。一个最小可运行的 NodeGui 应用只有两个文件your-app/ ├── package.json └── index.jspackage.json负责声明依赖其中必须包含nodegui/nodegui与启动脚本index.js则是入口文件负责创建窗口、处理应用运行期间可能遇到的各类系统事件。引入 NodeGui 模块NodeGui 提供的全部 API 都封装在nodegui/nodegui模块中像任何普通 Node.js 模块一样引入即可require(nodegui/nodegui);引入之后你依然可以使用 Node.js 的全部内置 API 以及整个 npm 生态中的任意模块——这正是 NodeGui 强大之处桌面 GUI 能力与 Node.js 服务器端能力共享同一个运行时。模块按命名空间导出nodegui/nodegui的导出采用命名空间组织。以窗口为例使用QMainWindow类即可创建一个原生主窗口。一个最简单的main.js或index.js如下const { QMainWindow } require(nodegui/nodegui); const win new QMainWindow(); win.show(); global.win win; // 防止 win 被垃圾回收上面代码中最后一行值得特别注意global.win win。NodeGui 的 JavaScript 包装对象与底层原生窗口通过 WrapperCache 维护映射如果 JS 侧引用被垃圾回收对应原生资源也可能被回收释放导致窗口消失。将窗口实例挂到global上可以阻止这种情况这是 NodeGui 编程中一个重要的内存管理习惯更深入的机制可参考 understanding-memory 指南。背后发生了什么JavaScript 包装器 原生 Qt 控件这段代码虽然看起来像 Web 开发但运行时环境完全不同运行的是普通 Node.js 应用而不是浏览器环境。没有 DOM、没有window、没有 HTML 渲染管线。你看到的窗口是 Qt 创建的原生控件。QMainWindow本质上是 QtQMainWindow的一个轻量级 JavaScript 包装器wrapper源码位于 QMainWindow.ts。你对包装器实例的每个方法调用最终都会作用于一个原生窗口控件。例如setWindowTitle()、setCentralWidget()、show()等都通过 Node-APInapi桥接层传递到 C 侧的 Qt 对象。这种JS 包装器 原生控件架构带来两个直接结果轻量相比基于浏览器内核的方案没有 Chromium/V8 之外多余的渲染开销更贴近操作系统更接近系统控件直接使用操作系统的原生绘制与事件体系行为和观感与桌面应用一致。从源码结构看这一架构可以印证C 侧每个控件都有一个对应的*_wrap.h/*_wrap.cpp绑定文件例如 qmainwindow_wrap.h它们通过napi.h把 Qt 类暴露给 JSTS 侧则在 src/lib 下按 QtCore / QtGui / QtWidgets 三个命名空间组织对应包装类。Qt 枚举值也以 TypeScript 枚举形式集中导出在 QtEnums/index.ts。运行官方入门示例nodegui-simple-starter动手实践最快的方式是克隆官方维护的入门仓库sedwards2009/nodegui-simple-starter并运行。开始之前请确保已安装 Git 与 npm。git clone https://github.com/sedwards2009/nodegui-simple-starter.git cd nodegui-simple-starter npm install npm run build npm run start命令说明命令作用npm install安装依赖。nodegui/nodegui的 postinstall 脚本会自动下载并配置 Qt详见scripts/setupMiniQt.js并编译原生 addonnodegui_core.nodenpm run build将 TypeScript/JavaScript 入口编译打包为可执行脚本npm run start通过 NodeGui 提供的qode运行时启动应用NodeGui 的qode是可执行文件与运行时封装见 package.json 中的bin.qode与 scripts/qode.js提示qode是 NodeGui 定制的 Node.js 运行时负责在正确的 GUI 事件循环下启动应用。更多环境配置细节macOS / Windows / Linux 的系统要求、nvm 建议、自编译 Qt 的可选方案可参考 getting-started 指南安装若失败可查阅 FAQ。除了基础窗口NodeGui 还能做什么常用原生组件NodeGui 已支持一批与 Web 元素对应的基础组件QWidget—— 类似 Web 世界的div用于包裹其他控件、提供结构层次QCheckBox—— 复选框QPushButton—— 按钮以及QLabel、QLineEdit、QComboBox、QListWidget、QTreeWidget、QTableWidget等大量控件。所有已支持组件的完整列表与 API 文档可在 QWidget 类文档 及其层级结构中找到generated/classes 目录下共 138 个类文档按组件逐一展开。以QWidget为例QWidget.ts 中说明它可封装其他控件并提供结构功能上类似 Web 的div同时负责其子控件的 Flex 布局计算Yoga 布局引擎见 FlexLayout。示例多组件组合仓库自带的演示入口 src/demo.ts 展示了组合多个组件的典型写法——创建主窗口、设置 central widget、用QBoxLayout与QStackedLayout组织页面、用QComboBox切换页面并通过addEventListener处理信号import { QMainWindow } from ./lib/QtWidgets/QMainWindow; import { QLabel } from ./lib/QtWidgets/QLabel; import { QWidget } from ./lib/QtWidgets/QWidget; import { QBoxLayout } from ./lib/QtWidgets/QBoxLayout; import { QStackedLayout } from ./lib/QtWidgets/QStackedLayout; import { QComboBox } from ./lib/QtWidgets/QComboBox; import { Direction } from ./lib/QtEnums; const win new QMainWindow(); win.setWindowTitle(QStackedLayout); const centralWidget new QWidget(); centralWidget.setObjectName(myroot); const rootLayout new QBoxLayout(Direction.TopToBottom); centralWidget.setLayout(rootLayout); const stackedLayout new QStackedLayout(); // ... 创建页面并 addWidget ... const combobox new QComboBox(); combobox.addItems([Page 1, Page 2, Page 3]); combobox.addEventListener(currentIndexChanged, (index) stackedLayout.setCurrentIndex(index)); rootLayout.addWidget(combobox); win.setCentralWidget(centralWidget); win.show(); (global as any).win win;这个例子体现了 NodeGui 的两个关键使用要点QMainWindow必须先通过setCentralWidget设置中央控件之后才能在中央控件上添加子控件与布局见 QMainWindow.ts 中的实现约束原生控件信号通过addEventListener订阅与 Web 的事件监听 API 保持一致。整个 npm 生态唾手可得除了 NodeGui 自身提供的模块你还可以使用Node.js 的全部模块生态任何能在 Node.js 中使用的 npm 模块文件系统、网络、数据库驱动等都能直接用于 NodeGui 应用无需额外适配。这意味着 NodeGui 应用可以直接复用现有的 Node.js 业务逻辑与工具库这也是它极其强大的根源之一。让界面更美观下一步学习样式系统原生控件默认的外观可能不够定制化。想让应用更漂亮、更符合品牌调性下一步应该学习 NodeGui 的样式系统——styling 指南styling.md是官方推荐的续篇。提前预告几个要点方便你建立全局认知两种样式入口全局样式表setStyleSheet与内联样式setInlineStyle全部控件均支持底层机制样式基于 Qt Style Sheets 语法与 Web CSS 几乎一致Flexbox 布局能力则由 Facebook 的Yoga布局引擎提供Yoga 源码见 src/cpp/include/deps/yoga选择器支持支持*、类型选择器、#objectNameID 选择器对应setObjectName、子元素组合器等多种 CSS2 选择器伪选择器支持hover、checked等伪状态可轻松实现交互反馈。一个最小示例内联样式即可让标签变色const { QLabel, QMainWindow } require(nodegui/nodegui); const win new QMainWindow(); const label new QLabel(win); label.setText(Hello world); label.setInlineStyle(color: green; background-color: white;); win.show(); global.win win;小结入门之后的进阶路线学习主题推荐文档环境搭建与 Hello Worldgetting-started应用基础结构本文tutorial样式与 Flex 布局styling、layout事件与信号处理handle-events、advanced-qevent-handling内存与包装器机制understanding-memory、wrapper_caching打包发布packaging至此你已经掌握了 NodeGui 应用的基本骨架一个 Node.js 应用 nodegui/nodegui原生组件 qode运行时。下一步装上nodegui-simple-starter动手跑通示例再顺着上面的路线图深入样式与事件就能开始构建自己的跨平台桌面应用了。赞分享桌面应用跨平台【免费下载链接】nodeguiA library for building cross-platform native desktop applications with Node.js and CSS . React NodeGui : https://react.nodegui.org and Vue NodeGui: https://vue.nodegui.org项目地址https://gitcode.com/gh_mirrors/no/nodegui点击查看免费下载相关推荐OpenCore Legacy Patcher终极指南让老Mac焕发新生的简单方法OpenCore Legacy Patcher终极指南让老Mac焕发新生的简单方法 想象一下你的老MacBook Pro还能运行最新的macOS系统吗这听操作系统固件驱动开发使用NodeGui构建高性能原生跨平台桌面应用使用NodeGui构建高性能原生跨平台桌面应用 在寻找一个既能提供高性能、又具备强大灵活性的解决方案来构建桌面应用程序吗NodeGui或许正是你需要的答案。这桌面应用跨平台使用NodeGUI构建高性能跨平台桌面应用程序使用NodeGUI构建高性能跨平台桌面应用程序 1、项目介绍 NodeGUI 是一个强大的库允许开发者使用熟悉的JavaScript和CSS来构建跨平台的原生桌面应用跨平台上一篇Python实现B站视频下载的终极指南突破会员限制的完整解决方案下一篇5分钟完成Windows和Office永久激活KMS_VL_ALL_AIO智能激活工具终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 NodeGui 入门教程：用 Node.js + Qt 原生组件构建跨平台桌面应用
桌面应用跨平台【免费下载链接】nodeguiA library for building cross-platform native desktop applications with Node.js and CSS . React NodeGui : https://react.nodegui.org and Vue NodeGui: https://vue.nodegui.org项目地址https://gitcode.com/gh_mirrors/no/nodegui点击查看免费下载本教程面向具备 Web 开发经验、熟悉 JavaScript 或 TypeScript 的开发者系统讲解 NodeGui 应用的基础结构从package.json与入口文件的目录组织到如何通过nodegui/nodegui模块创建原生窗口QMainWindow、理解JavaScript 包装器 原生 Qt 控件的运行原理再到常用原生组件与样式系统的快速上手。读完本文你将能独立搭建并运行第一个 NodeGui 桌面应用并清楚知道下一步深入学习的方向。NodeGui 开发的核心思想原生组件而非 Web 组件NodeGui 与 Electron 等方案的底层思路不同它不使用浏览器内核渲染界面而是以 Qt 的原生组件native widgets作为构建积木。也就是说你在代码里创建的不是 DOM 节点而是直接由操作系统图形框架绘制、与桌面环境紧密集成的原生控件。正因如此学习 NodeGui 并不需要掌握 HTML/CSS/DOM 的那套运行时模型你只需要熟悉 JavaScript 或 TypeScript 的基本语法了解 Node.js 模块系统require/import具备最基本的 Web 开发经验本教程即以此为读者画像。NodeGui 应用本质上是 Node.js 应用从开发流程看一个 NodeGui 应用本质上就是一个 Node.js 应用——它的起点是与普通 Node.js 模块完全一致的package.json。一个最小可运行的 NodeGui 应用只有两个文件your-app/ ├── package.json └── index.jspackage.json负责声明依赖其中必须包含nodegui/nodegui与启动脚本index.js则是入口文件负责创建窗口、处理应用运行期间可能遇到的各类系统事件。引入 NodeGui 模块NodeGui 提供的全部 API 都封装在nodegui/nodegui模块中像任何普通 Node.js 模块一样引入即可require(nodegui/nodegui);引入之后你依然可以使用 Node.js 的全部内置 API 以及整个 npm 生态中的任意模块——这正是 NodeGui 强大之处桌面 GUI 能力与 Node.js 服务器端能力共享同一个运行时。模块按命名空间导出nodegui/nodegui的导出采用命名空间组织。以窗口为例使用QMainWindow类即可创建一个原生主窗口。一个最简单的main.js或index.js如下const { QMainWindow } require(nodegui/nodegui); const win new QMainWindow(); win.show(); global.win win; // 防止 win 被垃圾回收上面代码中最后一行值得特别注意global.win win。NodeGui 的 JavaScript 包装对象与底层原生窗口通过 WrapperCache 维护映射如果 JS 侧引用被垃圾回收对应原生资源也可能被回收释放导致窗口消失。将窗口实例挂到global上可以阻止这种情况这是 NodeGui 编程中一个重要的内存管理习惯更深入的机制可参考 understanding-memory 指南。背后发生了什么JavaScript 包装器 原生 Qt 控件这段代码虽然看起来像 Web 开发但运行时环境完全不同运行的是普通 Node.js 应用而不是浏览器环境。没有 DOM、没有window、没有 HTML 渲染管线。你看到的窗口是 Qt 创建的原生控件。QMainWindow本质上是 QtQMainWindow的一个轻量级 JavaScript 包装器wrapper源码位于 QMainWindow.ts。你对包装器实例的每个方法调用最终都会作用于一个原生窗口控件。例如setWindowTitle()、setCentralWidget()、show()等都通过 Node-APInapi桥接层传递到 C 侧的 Qt 对象。这种JS 包装器 原生控件架构带来两个直接结果轻量相比基于浏览器内核的方案没有 Chromium/V8 之外多余的渲染开销更贴近操作系统更接近系统控件直接使用操作系统的原生绘制与事件体系行为和观感与桌面应用一致。从源码结构看这一架构可以印证C 侧每个控件都有一个对应的*_wrap.h/*_wrap.cpp绑定文件例如 qmainwindow_wrap.h它们通过napi.h把 Qt 类暴露给 JSTS 侧则在 src/lib 下按 QtCore / QtGui / QtWidgets 三个命名空间组织对应包装类。Qt 枚举值也以 TypeScript 枚举形式集中导出在 QtEnums/index.ts。运行官方入门示例nodegui-simple-starter动手实践最快的方式是克隆官方维护的入门仓库sedwards2009/nodegui-simple-starter并运行。开始之前请确保已安装 Git 与 npm。git clone https://github.com/sedwards2009/nodegui-simple-starter.git cd nodegui-simple-starter npm install npm run build npm run start命令说明命令作用npm install安装依赖。nodegui/nodegui的 postinstall 脚本会自动下载并配置 Qt详见scripts/setupMiniQt.js并编译原生 addonnodegui_core.nodenpm run build将 TypeScript/JavaScript 入口编译打包为可执行脚本npm run start通过 NodeGui 提供的qode运行时启动应用NodeGui 的qode是可执行文件与运行时封装见 package.json 中的bin.qode与 scripts/qode.js提示qode是 NodeGui 定制的 Node.js 运行时负责在正确的 GUI 事件循环下启动应用。更多环境配置细节macOS / Windows / Linux 的系统要求、nvm 建议、自编译 Qt 的可选方案可参考 getting-started 指南安装若失败可查阅 FAQ。除了基础窗口NodeGui 还能做什么常用原生组件NodeGui 已支持一批与 Web 元素对应的基础组件QWidget—— 类似 Web 世界的div用于包裹其他控件、提供结构层次QCheckBox—— 复选框QPushButton—— 按钮以及QLabel、QLineEdit、QComboBox、QListWidget、QTreeWidget、QTableWidget等大量控件。所有已支持组件的完整列表与 API 文档可在 QWidget 类文档 及其层级结构中找到generated/classes 目录下共 138 个类文档按组件逐一展开。以QWidget为例QWidget.ts 中说明它可封装其他控件并提供结构功能上类似 Web 的div同时负责其子控件的 Flex 布局计算Yoga 布局引擎见 FlexLayout。示例多组件组合仓库自带的演示入口 src/demo.ts 展示了组合多个组件的典型写法——创建主窗口、设置 central widget、用QBoxLayout与QStackedLayout组织页面、用QComboBox切换页面并通过addEventListener处理信号import { QMainWindow } from ./lib/QtWidgets/QMainWindow; import { QLabel } from ./lib/QtWidgets/QLabel; import { QWidget } from ./lib/QtWidgets/QWidget; import { QBoxLayout } from ./lib/QtWidgets/QBoxLayout; import { QStackedLayout } from ./lib/QtWidgets/QStackedLayout; import { QComboBox } from ./lib/QtWidgets/QComboBox; import { Direction } from ./lib/QtEnums; const win new QMainWindow(); win.setWindowTitle(QStackedLayout); const centralWidget new QWidget(); centralWidget.setObjectName(myroot); const rootLayout new QBoxLayout(Direction.TopToBottom); centralWidget.setLayout(rootLayout); const stackedLayout new QStackedLayout(); // ... 创建页面并 addWidget ... const combobox new QComboBox(); combobox.addItems([Page 1, Page 2, Page 3]); combobox.addEventListener(currentIndexChanged, (index) stackedLayout.setCurrentIndex(index)); rootLayout.addWidget(combobox); win.setCentralWidget(centralWidget); win.show(); (global as any).win win;这个例子体现了 NodeGui 的两个关键使用要点QMainWindow必须先通过setCentralWidget设置中央控件之后才能在中央控件上添加子控件与布局见 QMainWindow.ts 中的实现约束原生控件信号通过addEventListener订阅与 Web 的事件监听 API 保持一致。整个 npm 生态唾手可得除了 NodeGui 自身提供的模块你还可以使用Node.js 的全部模块生态任何能在 Node.js 中使用的 npm 模块文件系统、网络、数据库驱动等都能直接用于 NodeGui 应用无需额外适配。这意味着 NodeGui 应用可以直接复用现有的 Node.js 业务逻辑与工具库这也是它极其强大的根源之一。让界面更美观下一步学习样式系统原生控件默认的外观可能不够定制化。想让应用更漂亮、更符合品牌调性下一步应该学习 NodeGui 的样式系统——styling 指南styling.md是官方推荐的续篇。提前预告几个要点方便你建立全局认知两种样式入口全局样式表setStyleSheet与内联样式setInlineStyle全部控件均支持底层机制样式基于 Qt Style Sheets 语法与 Web CSS 几乎一致Flexbox 布局能力则由 Facebook 的Yoga布局引擎提供Yoga 源码见 src/cpp/include/deps/yoga选择器支持支持*、类型选择器、#objectNameID 选择器对应setObjectName、子元素组合器等多种 CSS2 选择器伪选择器支持hover、checked等伪状态可轻松实现交互反馈。一个最小示例内联样式即可让标签变色const { QLabel, QMainWindow } require(nodegui/nodegui); const win new QMainWindow(); const label new QLabel(win); label.setText(Hello world); label.setInlineStyle(color: green; background-color: white;); win.show(); global.win win;小结入门之后的进阶路线学习主题推荐文档环境搭建与 Hello Worldgetting-started应用基础结构本文tutorial样式与 Flex 布局styling、layout事件与信号处理handle-events、advanced-qevent-handling内存与包装器机制understanding-memory、wrapper_caching打包发布packaging至此你已经掌握了 NodeGui 应用的基本骨架一个 Node.js 应用 nodegui/nodegui原生组件 qode运行时。下一步装上nodegui-simple-starter动手跑通示例再顺着上面的路线图深入样式与事件就能开始构建自己的跨平台桌面应用了。赞分享桌面应用跨平台【免费下载链接】nodeguiA library for building cross-platform native desktop applications with Node.js and CSS . React NodeGui : https://react.nodegui.org and Vue NodeGui: https://vue.nodegui.org项目地址https://gitcode.com/gh_mirrors/no/nodegui点击查看免费下载相关推荐OpenCore Legacy Patcher终极指南让老Mac焕发新生的简单方法OpenCore Legacy Patcher终极指南让老Mac焕发新生的简单方法 想象一下你的老MacBook Pro还能运行最新的macOS系统吗这听操作系统固件驱动开发使用NodeGui构建高性能原生跨平台桌面应用使用NodeGui构建高性能原生跨平台桌面应用 在寻找一个既能提供高性能、又具备强大灵活性的解决方案来构建桌面应用程序吗NodeGui或许正是你需要的答案。这桌面应用跨平台使用NodeGUI构建高性能跨平台桌面应用程序使用NodeGUI构建高性能跨平台桌面应用程序 1、项目介绍 NodeGUI 是一个强大的库允许开发者使用熟悉的JavaScript和CSS来构建跨平台的原生桌面应用跨平台上一篇Python实现B站视频下载的终极指南突破会员限制的完整解决方案下一篇5分钟完成Windows和Office永久激活KMS_VL_ALL_AIO智能激活工具终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考