Electron 快速入门

YanaDH

已于 2024-04-12 15:35:13 修改

阅读量441

点赞数

CC 4.0 BY-SA版权

分类专栏： Electron 文章标签： electron javascript

于 2023-05-06 11:39:35 首次发布

本文链接：https://blog.csdn.net/weixin_36757282/article/details/130523754

Electron 专栏收录该内容

1 篇文章

订阅专栏

文章介绍了Electron框架，它允许开发者使用JavaScript、HTML和CSS创建桌面应用。通过初始化package.json，安装Electron，编写main.js作为入口文件，以及创建index.html和preload.js，可以创建一个基础的Electron应用。最后，利用ElectronForge进行应用打包，生成可在不同操作系统上运行的安装包。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1 Electron 是什么

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 Electron 将 Chromium 和 Node.js 嵌入到了一个二进制文件中，因此它允许你仅需一个代码仓库，就可以撰写支持 Windows、macOS 和 Linux 的跨平台应用。

2 创建应用程序

初始化 package.json

npm init

修改 package.json

{
  "main": "main.js", // 入口文件为 main.js
  "description": "A minimal Electron application", // description 为 "" 会导致后续打包报错
  "scripts": {
    "dev": "electron .", // 启动 electron
  }
}

安装 electron 包

npm install --save-dev electron

若安装失败，设置一下 electron 下载镜像

npm config set electron_mirror "https://npmmirror.com/mirrors/electron/"

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

const 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', () => {
    // macOS 应用在没有打开任何窗口的情况下也继续运行
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', () => {
  // 除 macOS 外，应用关闭所有窗口则完全退出一个应用程序
  if (process.platform !== 'darwin') app.quit()
})

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <title>你好!</title>
  </head>
  <body>
    <h1>你好!</h1>
    我们正在使用 Node.js <span id="node-version"></span>, Chromium
    <span id="chrome-version"></span>, 和 Electron
    <span id="electron-version"></span>.
  </body>
</html>

// 通过预加载脚本从渲染器访问 Node.js
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

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

启动 electron

npm dev

在这里插入图片描述

3 打包应用程序

安装 Electron Forge

npm install --save-dev @electron-forge/cli

使用 Electron Forge 的"import"命令设置 Forge 的脚手架

npx electron-forge import

使用 Forge 的 make 命令来创建可分发的应用程序

npm run make

以上三个命令执行完后，会创建一个 out 文件夹，文件夹下包含安装包
在这里插入图片描述