nodejs electron

作者：风中孤狼发布日期:2025-04-11 浏览:100

// main.js - Electron主进程文件

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

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  });

  win.loadFile('index.html');
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

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

// preload.js - 预加载脚本

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector);
    if (element) element.innerText = text;
  };

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type]);
  }
});

// index.html - 渲染进程的HTML文件

<!DOCTYPE html>
<html>
  <head>
    <title>Electron App</title>
  </head>
  <body>
    <h1>Hello from Electron!</h1>
    <p>Chrome version: <span id="chrome-version"></span></p>
    <p>Node.js version: <span id="node-version"></span></p>
    <p>Electron version: <span id="electron-version"></span></p>
  </body>
</html>

解释说明：

main.js：这是Electron应用程序的主进程文件。它负责创建和管理浏览器窗口（BrowserWindow），并处理应用程序的生命周期事件。
preload.js：这是一个预加载脚本，它在渲染进程（即网页）加载之前执行。它可以用于向网页暴露一些Node.js功能或与主进程通信。
index.html：这是渲染进程的HTML文件，显示了一个简单的页面，展示了当前使用的Chrome、Node.js和Electron的版本号。

通过这些代码，你可以创建一个基本的Electron应用程序，它会打开一个窗口并显示Electron、Chrome和Node.js的版本信息。

上一篇：js 获取当前经纬度

下一篇：js for循环异步请求按顺序执行