Electron 简介

最新推荐文章于 2025-03-30 20:06:31 发布

qichengzong_right

最新推荐文章于 2025-03-30 20:06:31 发布

阅读量900

点赞数 14

分类专栏：软件架构文章标签： electron

本文链接：https://blog.csdn.net/qichengzong_right/article/details/145713598

版权

软件架构专栏收录该内容

4 篇文章

订阅专栏

Electron 简介

Electron 简介
链接

Electron 简介

Electron 是一款框架，借助它，开发者能够运用 JavaScript、HTML 和 CSS 构建桌面应用程序。它把 Chromium 和 Node.js 嵌入二进制文件，让开发者仅维护一个 JavaScript 代码库，就能创建出可在 Windows、macOS 以及 Linux 系统上运行的跨平台应用，而且无需具备原生开发经验。

入门

建议新手从 tutorial 入手，它会引导你完成开发一个 Electron 应用程序并将其分发给用户的全过程。示例和 API 文档同样是值得探索、挖掘新知识的绝佳去处。

使用 Electron Fiddle 运行示例程序

Electron Fiddle 是一款基于 Electron 编写的沙盒应用程序，由 Electron 的维护团队提供支持。强烈推荐将其作为一款学习工具进行安装，以便在开发过程中对 Electron 的 API 进行测试，或者开发原型系统。

Fiddle 还与文档实现了深度集成。在浏览教程示例时，常常会在代码块下方看到一个 “Open in Electron Fiddle” 的按钮。要是安装了 Fiddle，点击这个按钮就会打开一个指向 fiddle.electronjs.org 的链接，它会自动将示例加载到 Fiddle 中，无需手动复制粘贴。

快速开始示例代码

main.js

const { app, BrowserWindow } = require('electron/main')
const path = require('node: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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
    <h1>Hello World!</h1>
    <p>
        We are using Node.js <span id="node-version"></span>,
        Chromium <span id="chrome-version"></span>,
        and Electron <span id="electron-version"></span>.
    </p>
</body>
</html>