NW.js入门指南:从零开始构建桌面应用
2026-02-03 04:52:35作者:裘晴惠Vivianne
什么是NW.js?
NW.js(原名node-webkit)是一个基于Chromium和Node.js的开源框架,它允许开发者使用Web技术(HTML、CSS和JavaScript)来构建跨平台的桌面应用程序。NW.js的核心优势在于:
- 完整的浏览器环境:基于Chromium内核,支持所有现代Web API和最新的JavaScript特性
- Node.js集成:可以直接在页面中调用Node.js模块和API
- 原生能力:提供丰富的原生API,如文件系统访问、原生菜单、系统托盘等
- 跨平台:支持Windows、macOS和Linux三大主流操作系统
环境准备与安装
获取NW.js
开发者可以直接从NW.js官方网站下载预编译的二进制文件。建议选择SDK版本进行开发,因为它包含了开发者工具(DevTools),便于调试应用。
NW.js提供两种构建版本:
- 普通版本:适合生产环境,体积较小
- SDK版本:包含开发者工具,适合开发阶段使用
运行环境要求
- 操作系统:Windows 7+、macOS 10.10+或Linux
- 内存:建议至少2GB
- 磁盘空间:至少200MB可用空间
创建第一个NW.js应用
基础项目结构
一个最简单的NW.js应用只需要两个文件:
package.json- 应用清单文件index.html- 应用主页面
1. 创建package.json
{
"name": "my-first-nw-app",
"main": "index.html",
"version": "1.0.0",
"description": "我的第一个NW.js应用"
}
关键字段说明:
name:应用唯一标识符(必须全小写,无空格)main:指定应用启动时加载的入口文件version:应用版本号description:应用描述信息
2. 创建index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的NW.js应用</title>
</head>
<body>
<h1>欢迎使用NW.js</h1>
<p>这是一个简单的桌面应用示例</p>
</body>
</html>
运行应用
在命令行中导航到项目目录,然后执行:
/path/to/nw .
Windows用户也可以直接将项目文件夹拖拽到nw.exe上运行。
进阶功能示例
使用NW.js原生API
NW.js提供了丰富的原生API,下面是一个创建右键菜单的示例:
<script>
// 创建菜单对象
const menu = new nw.Menu();
// 添加菜单项
menu.append(new nw.MenuItem({
label: '复制',
click: () => document.execCommand('copy')
}));
// 监听右键事件
document.addEventListener('contextmenu', (e) => {
e.preventDefault();
menu.popup(e.x, e.y);
});
</script>
集成Node.js功能
在NW.js中可以直接使用Node.js模块,例如文件系统操作:
<script>
const fs = require('fs');
// 读取当前目录下的文件列表
fs.readdir('.', (err, files) => {
if (err) throw err;
console.log('当前目录文件:', files);
});
</script>
使用npm模块
NW.js完全支持npm生态系统,安装和使用方式与Node.js项目相同:
npm install lodash
然后在代码中使用:
const _ = require('lodash');
console.log(_.chunk([1, 2, 3, 4], 2)); // 输出: [[1, 2], [3, 4]]
调试与开发技巧
- 开发者工具:在SDK版本中按F12或右键选择"检查"打开开发者工具
- 控制台日志:使用
console.log()输出调试信息 - 热重载:修改代码后保存,按Ctrl+R刷新应用
- 远程调试:可以通过Chrome浏览器的远程调试功能连接NW.js应用
常见问题与解决方案
- 窗口白屏:检查
package.json中的main字段路径是否正确 - Node模块无法加载:确保原生模块使用nw-gyp重新编译
- 跨域请求问题:NW.js中默认没有同源策略限制
- 性能优化:对于计算密集型任务,考虑使用Web Worker
后续学习路径
掌握基础后,可以进一步学习:
- 应用打包与分发
- 使用NW.js原生UI组件
- 实现系统托盘功能
- 处理多窗口应用
- 应用自动更新机制
NW.js为Web开发者打开了通往桌面应用开发的大门,结合Web的灵活性和Node.js的强大能力,你可以构建出功能丰富、跨平台的桌面应用程序。
登录后查看全文
热门项目推荐
相关项目推荐
GLM-5智谱 AI 正式发布 GLM-5,旨在应对复杂系统工程和长时域智能体任务。Jinja00
GLM-5-w4a8GLM-5-w4a8基于混合专家架构,专为复杂系统工程与长周期智能体任务设计。支持单/多节点部署,适配Atlas 800T A3,采用w4a8量化技术,结合vLLM推理优化,高效平衡性能与精度,助力智能应用开发Jinja00
请把这个活动推给顶尖程序员😎本次活动专为懂行的顶尖程序员量身打造,聚焦AtomGit首发开源模型的实际应用与深度测评,拒绝大众化浅层体验,邀请具备扎实技术功底、开源经验或模型测评能力的顶尖开发者,深度参与模型体验、性能测评,通过发布技术帖子、提交测评报告、上传实践项目成果等形式,挖掘模型核心价值,共建AtomGit开源模型生态,彰显顶尖程序员的技术洞察力与实践能力。00
Kimi-K2.5Kimi K2.5 是一款开源的原生多模态智能体模型,它在 Kimi-K2-Base 的基础上,通过对约 15 万亿混合视觉和文本 tokens 进行持续预训练构建而成。该模型将视觉与语言理解、高级智能体能力、即时模式与思考模式,以及对话式与智能体范式无缝融合。Python00
MiniMax-M2.5MiniMax-M2.5开源模型,经数十万复杂环境强化训练,在代码生成、工具调用、办公自动化等经济价值任务中表现卓越。SWE-Bench Verified得分80.2%,Multi-SWE-Bench达51.3%,BrowseComp获76.3%。推理速度比M2.1快37%,与Claude Opus 4.6相当,每小时仅需0.3-1美元,成本仅为同类模型1/10-1/20,为智能应用开发提供高效经济选择。【此简介由AI生成】Python00
Qwen3.5Qwen3.5 昇腾 vLLM 部署教程。Qwen3.5 是 Qwen 系列最新的旗舰多模态模型,采用 MoE(混合专家)架构,在保持强大模型能力的同时显著降低了推理成本。00- RRing-2.5-1TRing-2.5-1T:全球首个基于混合线性注意力架构的开源万亿参数思考模型。Python00
项目优选
收起
deepin linux kernel
C
27
11
OpenHarmony documentation | OpenHarmony开发者文档
Dockerfile
567
3.84 K
🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer(第 2 版)》、《程序员面试金典(第 6 版)》题解
Java
68
20
Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台,包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分,采用java语言实现,可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用
Java
12
1
暂无简介
Dart
799
198
🎉 (RuoYi)官方仓库 基于SpringBoot,Spring Security,JWT,Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
1.37 K
779
喝着茶写代码!最易用的自托管一站式代码托管平台,包含Git托管,代码审查,团队协作,软件包和CI/CD。
Go
23
0
openEuler内核是openEuler操作系统的核心,既是系统性能与稳定性的基石,也是连接处理器、设备与服务的桥梁。
C
349
200
Ascend Extension for PyTorch
Python
377
450
无需学习 Kubernetes 的容器平台,在 Kubernetes 上构建、部署、组装和管理应用,无需 K8s 专业知识,全流程图形化管理
Go
16
1