NW.js入门指南：从零开始构建桌面应用

2026-02-03 05:19:43作者：伍霜盼Ellen

nw.js

项目地址：https://gitcode.com/gh_mirrors/nwj/nw.js

什么是NW.js？

NW.js（原名node-webkit）是一个基于Chromium和Node.js的开源框架，它允许开发者使用Web技术（HTML、CSS和JavaScript）来构建跨平台的桌面应用程序。NW.js的核心优势在于：

无缝整合Node.js：可以直接在浏览器环境中调用Node.js模块和API
完整Chromium支持：支持所有最新的Web标准和浏览器特性
原生应用打包：可将Web应用打包为各平台的原生可执行文件

环境准备

获取NW.js

开发者可以从官方网站获取预编译的NW.js二进制文件。建议选择SDK版本进行开发，因为它包含开发者工具（DevTools），便于调试应用。

版本选择建议

稳定版：适合生产环境使用
SDK版：适合开发阶段，包含调试工具
Nightly版：包含最新特性，但可能存在不稳定因素

创建第一个NW.js应用

基础项目结构

每个NW.js应用都需要一个package.json作为入口配置文件，以及至少一个HTML文件作为应用界面。

1. 创建package.json

{
  "name": "my-first-nw-app",
  "main": "index.html",
  "version": "1.0.0",
  "description": "我的第一个NW.js应用",
  "window": {
    "title": "NW.js示例",
    "width": 800,
    "height": 600
  }
}

关键字段说明：

name：应用唯一标识符
main：指定应用启动时加载的主页面
window：配置应用窗口的初始属性

2. 创建index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>我的NW.js应用</title>
</head>
<body>
  <h1>欢迎使用NW.js</h1>
  <p>这是一个基于Web技术的桌面应用示例</p>
  
  <script>
    // 这里可以编写JavaScript代码
    console.log('应用已启动');
  </script>
</body>
</html>

运行应用

在命令行中导航到项目目录，然后执行：

/path/to/nw .

Windows用户也可以直接将项目文件夹拖拽到nw.exe上运行。

进阶功能示例

1. 使用NW.js原生API

NW.js提供了丰富的原生API，例如创建系统菜单：

// 创建上下文菜单
const menu = new nw.Menu();

// 添加菜单项
menu.append(new nw.MenuItem({
  label: '关于',
  click: () => {
    nw.Window.get().showDevTools(); // 打开开发者工具
  }
}));

// 绑定右键事件
document.addEventListener('contextmenu', (e) => {
  e.preventDefault();
  menu.popup(e.x, e.y);
});

2. 集成Node.js模块

可以直接在页面中使用Node.js核心模块和npm包：

<script>
// 使用Node.js的fs模块
const fs = require('fs');

// 读取文件内容
fs.readFile('data.txt', 'utf8', (err, data) => {
  if (err) throw err;
  document.getElementById('content').innerText = data;
});

// 使用npm安装的第三方模块
const moment = require('moment');
console.log('当前时间:', moment().format('YYYY-MM-DD'));
</script>

3. 窗口控制

NW.js提供了强大的窗口管理API：

// 获取当前窗口
const win = nw.Window.get();

// 最小化窗口
document.getElementById('minimize').onclick = () => win.minimize();

// 全屏切换
document.getElementById('fullscreen').onclick = () => {
  win.isFullscreen ? win.leaveFullscreen() : win.enterFullscreen();
};

// 创建新窗口
document.getElementById('new-window').onclick = () => {
  nw.Window.open('popup.html', {
    width: 400,
    height: 300
  });
};

开发技巧与最佳实践

调试工具：使用SDK版本内置的开发者工具（快捷键F12）
代码组织：合理划分模块，避免全局污染
错误处理：对Node.js操作添加适当的错误处理
性能优化：注意内存管理，特别是处理大量DOM元素时
安全考虑：谨慎使用Node.js功能，特别是处理用户输入时

后续学习路径

掌握基础后，可以进一步学习：

应用打包与分发：将应用打包为各平台的可执行文件
原生UI集成：使用NW.js的原生UI组件
自动更新：实现应用自动更新机制
性能调优：分析和优化应用性能
跨平台适配：处理不同平台的兼容性问题

NW.js为Web开发者打开了通往桌面应用开发的大门，结合Node.js的强大功能，开发者可以构建出功能丰富、性能优异的跨平台应用。

nw.js

项目地址：https://gitcode.com/gh_mirrors/nwj/nw.js

登录后查看全文

NW.js入门指南：从零开始构建桌面应用

什么是NW.js？

环境准备

获取NW.js

版本选择建议

创建第一个NW.js应用

基础项目结构

1. 创建package.json

2. 创建index.html

运行应用

进阶功能示例

1. 使用NW.js原生API

2. 集成Node.js模块

3. 窗口控制

开发技巧与最佳实践

后续学习路径

热门内容推荐

最新内容推荐

项目优选

NW.js入门指南：从零开始构建桌面应用

什么是NW.js？

环境准备

获取NW.js

版本选择建议

创建第一个NW.js应用

基础项目结构

1. 创建package.json

2. 创建index.html

运行应用

进阶功能示例

1. 使用NW.js原生API

2. 集成Node.js模块

3. 窗口控制

开发技巧与最佳实践

后续学习路径

相关内容推荐

热门内容推荐

最新内容推荐

项目优选