webview-nodejs 项目启动与配置教程

1. 项目的目录结构及介绍

webview-nodejs 项目是基于 Node.js 实现的一个简单的 webview 应用。以下是项目的目录结构及其简要介绍：

• node_modules/：存放项目依赖的第三方模块。
• src/：源代码目录，包含项目的所有 JavaScript 文件。
  • index.js：项目的主入口文件。
• static/：静态资源目录，存放 CSS、图片等静态文件。
• package.json：项目配置文件，定义项目依赖、脚本等。
• README.md：项目说明文件，介绍项目相关信息。

2. 项目的启动文件介绍

项目的启动文件为 index.js，以下是该文件的主要内容：

const { app, BrowserWindow } = require('electron');
const path = require('path');

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

  // 并加载应用的 index.html
  win.loadFile(path.join(__dirname, 'static', '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();
  }
});

这段代码主要完成了以下几件事情：

• 使用 Electron 的 app 和 BrowserWindow 模块创建一个浏览器窗口。
• 设置窗口的大小和 webPreferences 配置。
• 加载位于 static 目录下的 index.html 文件。
• 处理应用的生命周期事件，如窗口关闭、应用激活等。

3. 项目的配置文件介绍

项目的配置文件为 package.json，以下是该文件的主要内容：

{
  "name": "webview-nodejs",
  "version": "1.0.0",
  "description": "A simple webview app using Node.js and Electron.",
  "main": "index.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "node.js",
    "electron",
    "webview"
  ],
  "author": "Winterreisender",
  "license": "ISC",
  "dependencies": {
    "electron": "^11.0.1"
  }
}

这个配置文件主要包含以下信息：

• name：项目名称。
• version：项目版本。
• description：项目描述。
• main：项目的主入口文件。
• scripts：定义项目的启动脚本，这里通过 start 脚本启动 Electron 应用。
• keywords：项目关键词。
• author：项目作者。
• license：项目许可证。
• dependencies：项目依赖的第三方模块，这里是 Electron。