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

裘晴惠Vivianne

于 2025-05-30 09:08:43 发布

阅读量334

点赞数 4

本文链接：https://blog.youkuaiyun.com/gitblog_00234/article/details/148325664

版权

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

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
  });
};