Electron 是一个能让你使用 JavaScript, HTML 和 CSS 来创建桌面应用程序的框架。本文介绍了如何快速搭建起一个Eletron应用并发布。本文摘自Elestron官网。

介绍

Electron 是一个能让你使用 JavaScript, HTML 和 CSS 来创建桌面应用程序的框架。这些应用程序可以打包后在 macOS、Windows 和 Linux 上直接运行，或者通过 Mac App Store 或微软商店进行分发。
大名鼎鼎的VS Code就是用的Electon实现的跨平台哦！

前提条件

首先确认您是否已经安装好Node.js,输入以下命令确认Node已经安装。

node -v
npm -v

安装 Electron

为您的项目创建一个文件夹并安装 Electron：

mkdir my-electron-app && cd my-electron-app
npm init -y
npm i --save-dev electron

创建主脚本文件

主脚本指定了运行主进程的 Electron 应用程序的入口(就我们而言，是 main.js 文件)。通常，在主进程中运行的脚本控制应用程序的生命周期、显示图形用户界面及其元素、执行本机操作系统交互以及在网页中创建渲染进程。 Electron 应用程序只能有一个主进程。

主脚本可以如下所示：

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  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()
  }
})

创建网页

这是应用程序初始化后您想要显示的页面。此网页代表渲染过程。您可以创建多个浏览器窗口，每个窗口都使用自己的独立渲染进程。每个窗口都可以通过 nodeIntegration 选项完全访问 Node.js API。

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 style="background: white;">
    <h1>Hello World!</h1>
    <p>
        We are using node <script>document.write(process.versions.node)</script>,
        Chrome <script>document.write(process.versions.chrome)</script>,
        and Electron <script>document.write(process.versions.electron)</script>.
    </p>
</body>
</html>

修改您的 package.json 文件

您的 Electron 应用程序使用 package.json 文件作为主入口(像任何其它的 Node.js 应用程序)。您的应用程序的主脚本是 main.js，所以相应修改 package.json 文件：

{
    "name": "my-electron-app",
    "version": "0.1.0",
    "author": "your name",
    "description": "My Electron app",
    "main": "main.js"
}

注意：如果未设置 main 字段，Electron 将尝试加载包含在 package.json 文件目录中的 index.js 文件。
注意：author 和 description 字段对于打包来说是必要的，否则运行 npm run make 命令时会报错。

默认情况下， npm start 命令将用 Node.js 来运行主脚本。要使用 Electron 来运行脚本，您需要将其更改为这样：

{
    "name": "my-electron-app",
    "version": "0.1.0",
    "author": "your name",
    "description": "My Electron app",
    "main": "main.js",
    "scripts": {
        "start": "electron ."
    }
}

运行您的应用程序

npm start

Electron快速启动指南

发布

分发你新创建的应用最简单和快捷的方法是使用 Electron Forge。

1.导入 Electron Forge 到您的应用文件夹：


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

npx @electron-forge/cli import

✔ Checking your system
✔ Initializing Git Repository
✔ Writing modified package.json file
✔ Installing dependencies
✔ Writing modified package.json file
✔ Fixing .gitignore

We have ATTEMPTED to convert your app to be in a format that electron-forge understands.

Thanks for using "electron-forge"!!!

2.创建一个分发版本：

npm run make

> my-gsod-electron-app@1.0.0 make /my-electron-app
> electron-forge make

✔ Checking your system
✔ Resolving Forge Config
We need to package your application before we can make it
✔ Preparing to Package Application for arch: x64
✔ Preparing native dependencies
✔ Packaging Application
Making for the following targets: zip
✔ Making for target: zip - On platform: darwin - For arch: x64

Electron-forge 会创建 out 文件夹，您的软件包将在那里找到：

// MacOS 示例
out/
├── out/make/zip/darwin/x64/my-electron-app-darwin-x64-1.0.0.zip
├── ...
└── out/my-electron-app-darwin-x64/my-electron-app.app/Contents/MacOS/my-electron-app

目录CONTENT