NW.js 源码项目启动与配置教程

1. 项目目录结构及介绍

在克隆了 nwjs/chromium.src 仓库后，你会得到一个包含NW.js源码的目录。以下是主要的目录结构及其简要说明：

chromium.src/
├── build/           # 构建脚本和工具
├── docs/            # 项目文档
├── electron/        # Electron 的源码，NW.js 基于 Electron
├── third_party/     # 第三方依赖库和模块
├── tools/           # 构建和调试的工具
└── vui/             # NW.js 的用户界面组件

• build/：包含编译NW.js所需的构建脚本和工具。
• docs/：存放与项目相关的文档，包括开发指南和API文档。
• electron/：这是NW.js的核心部分，包含了Electron的源码，Electron是 NW.js 的底层框架。
• third_party/：包含项目所依赖的第三方库和模块。
• tools/：提供一些用于构建和调试的工具。
• vui/：包含NW.js的用户界面组件。

2. 项目的启动文件介绍

NW.js项目的启动通常依赖于Electron的启动机制。在electron/目录下，会有一个名为main.js的文件，这是Electron的主进程文件，通常情况下也是启动文件。

// main.js 示例代码
const { app, BrowserWindow } = require('electron');

function createWindow () {
  // 创建浏览器窗口
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  // 并加载应用的 index.html
  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // 在 macOS 上，当点击 dock 图标并且没有其他窗口打开时，通常会在应用程序中重新创建一个窗口
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

这个文件设置了应用程序的主窗口，并且在应用程序准备就绪时加载了应用的HTML文件。

3. 项目的配置文件介绍

NW.js的配置通常通过package.json文件进行。这个文件不仅定义了项目的元数据，还指定了程序的入口点和其他配置选项。

以下是一个package.json文件的示例：

{
  "name": "your-app-name",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "electron": "^11.0.1"
  }
}

在package.json中：

• "name"：指定应用的名称。
• "version"：指定应用的版本号。
• "main"：指定应用的入口文件，通常是主进程的文件。
• "scripts"：定义了运行脚本，这里的"start"脚本将启动Electron并运行当前目录下的应用。
• "dependencies"：列出了项目依赖的包，这里的"electron"是必需的，指定了Electron的版本。

要启动应用，你可以在命令行中运行npm start或yarn start，这将执行scripts中定义的start脚本。