NW.js 入门实战用 Web 技术加 Node.js 构建跨平台桌面应用【免费下载链接】nw.jsCall all Node.js modules directly from DOM/WebWorker and enable a new way of writing applications with all Web technologies.项目地址: https://gitcode.com/gh_mirrors/nw/nw.jsNW.js原名 node-webkit是一套将 Chromium 渲染引擎与 Node.js 运行时深度整合的桌面应用开发框架本文基于本仓库的官方入门文档带你从零搭建第一个可运行的 NW.js 应用并深入源码理解应用启动、manifest 解析与原生 API 的底层原理。读完本文你将掌握 NW.js 应用的目录结构与 manifest 编写、三种典型应用形态纯 HTML、NW.js API、Node.js 模块以及 SDK 构建版本的选择与后续调试、打包的完整路径。一、NW.js 能做什么DOM 与 Node.js 的双向打通NW.js 建立在 Chromium 与 Node.js 两个内核之上官方文档原文它的核心能力可以概括为三点在浏览器环境直接调用 Node.jsDOM 中的 JavaScript 可以直接require()任意 Node.js 内置模块或第三方模块不再需要浏览器与 Node 进程之间的 IPC 桥接用全部 Web 技术写应用HTML、CSS、JavaScript 以及 Chromium 支持的一切 Web 能力Canvas、WebGL、最新 CSS 特性等都可以直接使用把 Web 应用打包成原生应用通过简单的目录结构与 manifest 声明即可将 Web 应用分发为 Windows、Linux、macOS 上的原生程序。从源码结构看这一架构体现在src/nw_content.cc、src/nw_base.cc等入口文件以及src/api/目录下按功能拆分的各 API 模块中——NW.js 的本质就是在 Chromium 的 content 层之上注入 Node.js 运行时再以nw全局对象向外暴露原生能力。二、获取 NW.js下载或自行编译优先选择 SDK 版本获取 NW.js 二进制有两种途径直接下载从 NW.js 官方站点获取与你的平台匹配的最新二进制包自行编译按照 Building NW.js 的指引从源码构建本仓库DEPS、BUILD.gn、nw.gypi及patch/patches/下的补丁文件即为构建所需的依赖与补丁体系。建议开发应用时推荐选用SDK build flavor。根据 Build Flavors 的说明SDK 版本内置 DevTools 调试工具与 NaCl 插件支持能力与 0.13.0 之前的旧版本构建一致而 Normal 版本是不含 DevTools 与 NaCl 的最小化构建适合发布场景以缩小体积。你的代码中可以用process.versions[nw-flavor]判断当前运行在哪种 flavor 下。三、第一个应用Hello WorldStep 1创建package.json应用清单在应用根目录创建如下文件{ name: helloworld, main: index.html }package.json是应用的 manifest 清单文件采用 JSON 格式。其中main指定 NW.js 启动时打开的第一个页面。如果指向 HTML 文件如本例的index.html则直接打开该页面也可以指向 JavaScript 文件见下方提示。name应用在 NW.js 体系中的唯一标识。根据 Manifest Format 的约束它必须是唯一的、小写字母数字、不含空格的名称可包含.、_、-字符。NW.js 会以name为目录名存放应用的用户数据因此应当全局唯一。将 JS 文件作为main的用法你可以把main设置为main.js此时 JS 文件会在后台页面中加载执行默认不会打开任何窗口。通常的用法是先在脚本里做初始化再手动打开窗口// 初始化你的应用 // 然后…… nw.Window.open(index.html, {}, function(win) {});Step 2创建index.html!DOCTYPE html html head titleHello World!/title /head body h1Hello World!/h1 /body /html这是一个完全普通的 HTML 文件你可以放心使用最新浏览器支持的所有 Web 技术。Step 3运行应用cd /path/to/your/app /path/to/nw .其中/path/to/nw是 NW.js 的可执行文件各平台名称不同平台二进制路径Windowsnw.exeLinuxnwmacOSnwjs.app/Contents/MacOS/nwjsWindows 小技巧在 Windows 上你可以直接把「包含package.json的文件夹」拖拽到nw.exe上即可运行应用。启动背后的机制NW.js 如何找到你的package.json运行nw .时NW.js 会按照一套固定的查找顺序定位 manifest。在 src/nw_package.cc 的Package::Package()构造函数中可以看到完整的解析链尝试自解压检查可执行文件自身路径macOS 上为nwjs.app/Contents/Resources/app.nw是否可初始化可执行文件同级目录加载与nw可执行文件同目录下的package.jsonpackage.nw压缩包查找可执行文件同级目录下的package.nw应用打包发布时的标准形态命令行参数依次尝试--nwapppath开关、以及第一个 CLI 位置参数即示例中的.兜底默认值全部失败时使用默认设置初始化。找到 manifest 后RelativePathToURI 会把相对路径形式的main字段拼接为file://URL而 GetStartupURL 负责最终产出启动页地址若未提供main则回退到nw:blank空白页。这也解释了为什么 Hello World 只需要一个package.json加一个index.html就能跑起来。仓库中的自动化测试test/auto/empty-app-exit-with-0/package.json使用的正是{name: test, main: index.html}这一最简形态验证了最小应用的可行性。四、使用 NW.js API打造原生右键菜单所有 NW.js API 都挂在全局nw对象上可以在 JavaScript 中直接使用。完整的 API 列表见 API 参考文档。下面这个例子演示如何创建原生上下文菜单右键菜单。创建index.html并写入!DOCTYPE html html head titleContext Menu/title /head body pRight click here to show context menu./p script // 创建一个空的上下文菜单 var menu new nw.Menu(); // 添加带 label 的菜单项 menu.append(new nw.MenuItem({ label: Item A, click: function(){ alert(You have clicked at Item A); } })); menu.append(new nw.MenuItem({ label: Item B })); menu.append(new nw.MenuItem({ type: separator })); menu.append(new nw.MenuItem({ label: Item C })); // 监听 contextmenu 事件 document.body.addEventListener(contextmenu, function(ev) { // 阻止浏览器默认右键菜单 ev.preventDefault(); // 在点击位置弹出原生菜单 menu.popup(ev.x, ev.y); return false; }, false); /script /body /html然后照常运行cd /path/to/your/app /path/to/nw .这里的关键 API 有new nw.Menu()创建原生菜单。根据 Menu API 的说明类型分为contextmenu上下文菜单与menubar菜单栏两种new nw.MenuItem({...})创建菜单项label为显示文本click为点击回调type: separator表示分隔线menu.popup(x, y)在屏幕坐标(x, y)处弹出菜单document.body.addEventListener(contextmenu, ...)拦截浏览器的默认右键行为。从源码看src/api/menu/menu.js 中Menu构造函数会对类型做校验contextmenu或menubar否则抛TypeErrorappend/insert/remove/removeAt负责维护菜单项集合popup通过nw.callObjectMethod把请求转发给 C 层。而 src/api/menu/menu.cc 的Menu::Call实现了Append、Insert、Remove、Popup、EnableShowEvent等底层方法其中Popup还会根据页面当前的缩放因子zoom factor对坐标进行换算保证在高缩放下菜单仍出现在正确位置——这是纯 Web 方案难以直接获得的原生细节。兼容旧写法NW.js 同时兼容require(nw.gui)这种旧式加载方式它返回的就是同一个nw对象迁移时无需改动业务代码。五、在 DOM 中直接调用 Node.js查询系统平台NW.js 最具颠覆性的能力是你可以直接在 DOM 的 JavaScript 里调用 Node.js 及其模块。下面的例子用 Node.js 的os模块查询操作系统平台!DOCTYPE html html head titleMy OS Platform/title /head body script // 使用 node.js 获取系统平台 var os require(os); document.write(You are running on , os.platform()); /script /body /html运行后页面上会直接显示当前系统平台如linux、win32、darwin。这意味着内置模块直接可用fs、path、os、child_process等 Node 核心模块在 DOM 中开箱即用npm 生态全量接入通过npm安装的第三方模块同样可以require注意原生模块的 ABI 差异npm install时编译的原生 Node 模块与 NW.js 的 ABI 不兼容必须用nw-gyp从源码重新编译后才能使用具体见 Use Native Node Modules。需要说明的是Node.js 能力是可控开关在 manifest 中设置nodejs: false即可整体禁用 Node 支持Manifest Format对应的底层实现是 nw_package.cc 中的Package::GetUseNode()——它默认返回true读取nodejs字段为false时才关闭。此外通过node-remote字段配合 Chrome 扩展的 match pattern 语法还可以控制哪些远程页面http/https/file/ftp等 scheme允许调用 Node。六、进阶指引调试、打包与发布完成上面的示例后你的下一站应该是Debugging with DevTools使用 DevTools 调试应用记得使用 SDK 构建版本Package and Distribute了解如何把应用打包、重分发用于生产环境FAQ查阅常见问题从 0.12 迁移到 0.13如果你的应用基于 0.12 或更早版本务必阅读迁移说明single-instance、toolbar、no-edit-menu等旧字段已在新版中废弃或行为变更。整个文档体系在 docs/index.md 中有完整索引分为For Users面向应用开发者、For Developers面向框架开发者、ReferencesAPI 参考三大部分。七、获取帮助NW.js 官方 wiki 上积累了大量实用资料且面向社区开放欢迎贡献你的实践经验可以在官方邮件列表或 Gitter 聊天室中提问交流遇到 bug 或希望提交新需求请在 GitHub 的 NW.js issue 区提交帮助项目持续改进。本文要点回顾NW.js 以package.jsonnamemain两个必需字段为应用入口通过nw .启动所有原生能力集中在全局nw对象如nw.Menu、nw.MenuItem、nw.WindowDOM 中可直接requireNode.js 模块。从src/nw_package.cc的加载链到src/api/menu/的原生菜单实现仓库源码为上述每一个行为都提供了可验证的依据掌握了这条主线你就可以开始构建自己的第一个 NW.js 桌面应用了。【免费下载链接】nw.jsCall all Node.js modules directly from DOM/WebWorker and enable a new way of writing applications with all Web technologies.项目地址: https://gitcode.com/gh_mirrors/nw/nw.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 NW.js 入门实战：用 Web 技术加 Node.js 构建跨平台桌面应用
NW.js 入门实战用 Web 技术加 Node.js 构建跨平台桌面应用【免费下载链接】nw.jsCall all Node.js modules directly from DOM/WebWorker and enable a new way of writing applications with all Web technologies.项目地址: https://gitcode.com/gh_mirrors/nw/nw.jsNW.js原名 node-webkit是一套将 Chromium 渲染引擎与 Node.js 运行时深度整合的桌面应用开发框架本文基于本仓库的官方入门文档带你从零搭建第一个可运行的 NW.js 应用并深入源码理解应用启动、manifest 解析与原生 API 的底层原理。读完本文你将掌握 NW.js 应用的目录结构与 manifest 编写、三种典型应用形态纯 HTML、NW.js API、Node.js 模块以及 SDK 构建版本的选择与后续调试、打包的完整路径。一、NW.js 能做什么DOM 与 Node.js 的双向打通NW.js 建立在 Chromium 与 Node.js 两个内核之上官方文档原文它的核心能力可以概括为三点在浏览器环境直接调用 Node.jsDOM 中的 JavaScript 可以直接require()任意 Node.js 内置模块或第三方模块不再需要浏览器与 Node 进程之间的 IPC 桥接用全部 Web 技术写应用HTML、CSS、JavaScript 以及 Chromium 支持的一切 Web 能力Canvas、WebGL、最新 CSS 特性等都可以直接使用把 Web 应用打包成原生应用通过简单的目录结构与 manifest 声明即可将 Web 应用分发为 Windows、Linux、macOS 上的原生程序。从源码结构看这一架构体现在src/nw_content.cc、src/nw_base.cc等入口文件以及src/api/目录下按功能拆分的各 API 模块中——NW.js 的本质就是在 Chromium 的 content 层之上注入 Node.js 运行时再以nw全局对象向外暴露原生能力。二、获取 NW.js下载或自行编译优先选择 SDK 版本获取 NW.js 二进制有两种途径直接下载从 NW.js 官方站点获取与你的平台匹配的最新二进制包自行编译按照 Building NW.js 的指引从源码构建本仓库DEPS、BUILD.gn、nw.gypi及patch/patches/下的补丁文件即为构建所需的依赖与补丁体系。建议开发应用时推荐选用SDK build flavor。根据 Build Flavors 的说明SDK 版本内置 DevTools 调试工具与 NaCl 插件支持能力与 0.13.0 之前的旧版本构建一致而 Normal 版本是不含 DevTools 与 NaCl 的最小化构建适合发布场景以缩小体积。你的代码中可以用process.versions[nw-flavor]判断当前运行在哪种 flavor 下。三、第一个应用Hello WorldStep 1创建package.json应用清单在应用根目录创建如下文件{ name: helloworld, main: index.html }package.json是应用的 manifest 清单文件采用 JSON 格式。其中main指定 NW.js 启动时打开的第一个页面。如果指向 HTML 文件如本例的index.html则直接打开该页面也可以指向 JavaScript 文件见下方提示。name应用在 NW.js 体系中的唯一标识。根据 Manifest Format 的约束它必须是唯一的、小写字母数字、不含空格的名称可包含.、_、-字符。NW.js 会以name为目录名存放应用的用户数据因此应当全局唯一。将 JS 文件作为main的用法你可以把main设置为main.js此时 JS 文件会在后台页面中加载执行默认不会打开任何窗口。通常的用法是先在脚本里做初始化再手动打开窗口// 初始化你的应用 // 然后…… nw.Window.open(index.html, {}, function(win) {});Step 2创建index.html!DOCTYPE html html head titleHello World!/title /head body h1Hello World!/h1 /body /html这是一个完全普通的 HTML 文件你可以放心使用最新浏览器支持的所有 Web 技术。Step 3运行应用cd /path/to/your/app /path/to/nw .其中/path/to/nw是 NW.js 的可执行文件各平台名称不同平台二进制路径Windowsnw.exeLinuxnwmacOSnwjs.app/Contents/MacOS/nwjsWindows 小技巧在 Windows 上你可以直接把「包含package.json的文件夹」拖拽到nw.exe上即可运行应用。启动背后的机制NW.js 如何找到你的package.json运行nw .时NW.js 会按照一套固定的查找顺序定位 manifest。在 src/nw_package.cc 的Package::Package()构造函数中可以看到完整的解析链尝试自解压检查可执行文件自身路径macOS 上为nwjs.app/Contents/Resources/app.nw是否可初始化可执行文件同级目录加载与nw可执行文件同目录下的package.jsonpackage.nw压缩包查找可执行文件同级目录下的package.nw应用打包发布时的标准形态命令行参数依次尝试--nwapppath开关、以及第一个 CLI 位置参数即示例中的.兜底默认值全部失败时使用默认设置初始化。找到 manifest 后RelativePathToURI 会把相对路径形式的main字段拼接为file://URL而 GetStartupURL 负责最终产出启动页地址若未提供main则回退到nw:blank空白页。这也解释了为什么 Hello World 只需要一个package.json加一个index.html就能跑起来。仓库中的自动化测试test/auto/empty-app-exit-with-0/package.json使用的正是{name: test, main: index.html}这一最简形态验证了最小应用的可行性。四、使用 NW.js API打造原生右键菜单所有 NW.js API 都挂在全局nw对象上可以在 JavaScript 中直接使用。完整的 API 列表见 API 参考文档。下面这个例子演示如何创建原生上下文菜单右键菜单。创建index.html并写入!DOCTYPE html html head titleContext Menu/title /head body pRight click here to show context menu./p script // 创建一个空的上下文菜单 var menu new nw.Menu(); // 添加带 label 的菜单项 menu.append(new nw.MenuItem({ label: Item A, click: function(){ alert(You have clicked at Item A); } })); menu.append(new nw.MenuItem({ label: Item B })); menu.append(new nw.MenuItem({ type: separator })); menu.append(new nw.MenuItem({ label: Item C })); // 监听 contextmenu 事件 document.body.addEventListener(contextmenu, function(ev) { // 阻止浏览器默认右键菜单 ev.preventDefault(); // 在点击位置弹出原生菜单 menu.popup(ev.x, ev.y); return false; }, false); /script /body /html然后照常运行cd /path/to/your/app /path/to/nw .这里的关键 API 有new nw.Menu()创建原生菜单。根据 Menu API 的说明类型分为contextmenu上下文菜单与menubar菜单栏两种new nw.MenuItem({...})创建菜单项label为显示文本click为点击回调type: separator表示分隔线menu.popup(x, y)在屏幕坐标(x, y)处弹出菜单document.body.addEventListener(contextmenu, ...)拦截浏览器的默认右键行为。从源码看src/api/menu/menu.js 中Menu构造函数会对类型做校验contextmenu或menubar否则抛TypeErrorappend/insert/remove/removeAt负责维护菜单项集合popup通过nw.callObjectMethod把请求转发给 C 层。而 src/api/menu/menu.cc 的Menu::Call实现了Append、Insert、Remove、Popup、EnableShowEvent等底层方法其中Popup还会根据页面当前的缩放因子zoom factor对坐标进行换算保证在高缩放下菜单仍出现在正确位置——这是纯 Web 方案难以直接获得的原生细节。兼容旧写法NW.js 同时兼容require(nw.gui)这种旧式加载方式它返回的就是同一个nw对象迁移时无需改动业务代码。五、在 DOM 中直接调用 Node.js查询系统平台NW.js 最具颠覆性的能力是你可以直接在 DOM 的 JavaScript 里调用 Node.js 及其模块。下面的例子用 Node.js 的os模块查询操作系统平台!DOCTYPE html html head titleMy OS Platform/title /head body script // 使用 node.js 获取系统平台 var os require(os); document.write(You are running on , os.platform()); /script /body /html运行后页面上会直接显示当前系统平台如linux、win32、darwin。这意味着内置模块直接可用fs、path、os、child_process等 Node 核心模块在 DOM 中开箱即用npm 生态全量接入通过npm安装的第三方模块同样可以require注意原生模块的 ABI 差异npm install时编译的原生 Node 模块与 NW.js 的 ABI 不兼容必须用nw-gyp从源码重新编译后才能使用具体见 Use Native Node Modules。需要说明的是Node.js 能力是可控开关在 manifest 中设置nodejs: false即可整体禁用 Node 支持Manifest Format对应的底层实现是 nw_package.cc 中的Package::GetUseNode()——它默认返回true读取nodejs字段为false时才关闭。此外通过node-remote字段配合 Chrome 扩展的 match pattern 语法还可以控制哪些远程页面http/https/file/ftp等 scheme允许调用 Node。六、进阶指引调试、打包与发布完成上面的示例后你的下一站应该是Debugging with DevTools使用 DevTools 调试应用记得使用 SDK 构建版本Package and Distribute了解如何把应用打包、重分发用于生产环境FAQ查阅常见问题从 0.12 迁移到 0.13如果你的应用基于 0.12 或更早版本务必阅读迁移说明single-instance、toolbar、no-edit-menu等旧字段已在新版中废弃或行为变更。整个文档体系在 docs/index.md 中有完整索引分为For Users面向应用开发者、For Developers面向框架开发者、ReferencesAPI 参考三大部分。七、获取帮助NW.js 官方 wiki 上积累了大量实用资料且面向社区开放欢迎贡献你的实践经验可以在官方邮件列表或 Gitter 聊天室中提问交流遇到 bug 或希望提交新需求请在 GitHub 的 NW.js issue 区提交帮助项目持续改进。本文要点回顾NW.js 以package.jsonnamemain两个必需字段为应用入口通过nw .启动所有原生能力集中在全局nw对象如nw.Menu、nw.MenuItem、nw.WindowDOM 中可直接requireNode.js 模块。从src/nw_package.cc的加载链到src/api/menu/的原生菜单实现仓库源码为上述每一个行为都提供了可验证的依据掌握了这条主线你就可以开始构建自己的第一个 NW.js 桌面应用了。【免费下载链接】nw.jsCall all Node.js modules directly from DOM/WebWorker and enable a new way of writing applications with all Web technologies.项目地址: https://gitcode.com/gh_mirrors/nw/nw.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考