electron介绍以及开发文档

electron yekong

Electron 是一款开放源代码库,可用于构建跨平台桌面应用程序。通过 Electron,你可以使用 Web 技术(如 HTML、CSS 和 JavaScript)来开发原生应用程序。Electron 应用程序可以在 macOS、Windows 和 Linux 上运行。

Electron 开发文档地址

Electron 的官方开发文档是了解 Electron 开发的最佳资源,包括 API 文档、教程、示例和指导方针。你可以在以下链接找到它:

Electron 官方文档

简单实例

以下是一个基本的 Electron 应用程序示例,该应用程序创建一个窗口并加载一个 HTML 文件:

1. 创建 main.js 文件(主进程代码)

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('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

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

2. 创建 index.html 文件(渲染进程代码)

<!DOCTYPE html>
<html>
  <head>
    <title>My Electron App</title>
  </head>
  <body>
    <h1>Hello Electron!</h1>
  </body>
</html>

3. 创建 package.json 文件

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^21.4.4"
  }
}

4. 安装 Electron

在项目目录中运行以下命令来安装 Electron:

npm install

5. 启动应用程序

使用以下命令启动应用程序:

npm start

这将启动 Electron 应用程序并显示一个包含 "Hello Electron!" 的窗口。

这是一个非常基本的 Electron 应用程序示例,展示了 Electron 的基础概念和功能。更复杂的应用程序可能会包括多个窗口、自定义菜单、系统托盘图标等,所有这些都可以在 Electron 的官方文档中找到详细的指导。

使用electron开发小工具

使用electron开发一款单页模板下载助手

喜欢