快速入门Electron

分类：Electron

创建：2020-08-15 16:35

Electron 是由 Github 开发，用HTML、CSS 和 JavaScript 来构建跨平台桌面应用程序的一个开源库。 Electron 通过将 Chromium 和 Node.js 合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用。

Electron 于2013年作为构建Github上可编程的文本编辑器Atom的框架而被开发出来。这两个项目在2014春季开源。目前它已成为开源开发者、初创企业和老牌公司常用的开发工具。

环境安装

目前官方的中文文档已经日渐丰富，下面的步骤也主要参考了官方文档。从开发的角度来看，Electron 应用本质上是一个 Node. js 应用程序。与 Node.js 模块相同，应用的入口是 package.json 文件。一个最基本的 Electron 应用一般来说会有如下的目录结构：

1. your-app
2.   ├── package.json
3.   ├── main.js 
4.   └── index.html

因此，我们可以创建项目了：

# 创建项目目录 并进入目录
mkdir my-electron-app && cd my-electron-app
# 初始化项目
npm init
# 安装开发依赖 electron模块
# 本步骤可能比较耗时，视网速而定
# electron和node版本有对应关系，需要注意
npm i electron -D
# 全局安装的话使用
# npm i electron -g
# Mac系统可能需要加sudo
# sudo npm i electron -D
# 如果使用的事root用户，可能需要这个
# sudo npm install -D electron --unsafe-perm=true --allow-root

npm init初始化命令会提示您在项目初始化配置中设置一些值为本教程的目的，有几条规则需要遵循：
entry point 应为 main.js.
author 与 description 可为任意值，但对于应用打包是必填项。

说明： --unsafe-perm：默认为false，如果为true则使用root用户安装，默认为非root用户安装 --allow-root：允许root

安装后，可以使用命令查看我们是否安装成功：

# 在项目目录下执行
npx electron -v
# 如果全局安装的话，直接使用
electron -v

我这里使用的不是全局安装，所有使用的是：npx electron -v

创建主脚本文件

创建页面

在Electron中，各个窗口显示的内容可以是本地HTML文件，也可以是一个远程URL。我们这里选择在本地创建一个index.html文件，内容我们可以随便编写，比如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>您好，世界</title>
</head>
<body>
    <h1>您好，世界！imshusheng.com</h1>
</body>
</html>

创建主脚本文件

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

目前Electron 对ESM支持不太完善，只能使用CommonJS规范。可以通过这里来查看适配进度。

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

// 编写一个创建窗口函数
function createWindow() {
    // 创建窗口
    const win = new BrowserWindow({
        width: 800,
        height: 600
    })
    // 窗口中加载 index.html
    win.loadFile('index.html')
}

// 当应用程序准备就绪时 执行
app.whenReady().then(() => {
    // 调用创建窗口的函数
    createWindow()

    // 当应用程序被激活时（例如点击应用程序的图标时）
    app.on('activate', () => {
        // 如果没有窗口存在，则打开个窗口
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow()
        }
    })
})

// 当所有窗口都关闭时
app.on('window-all-closed', () => {
    // 如果操作系统不是 macOS
    if (process.platform !== 'darwin') {
        // 退出应用程序
        app.quit()
    }
})

app 模块，用于控制应用程序的生命周期和事件处理。通过 app 模块，可以监听应用程序的各种事件，例如应用程序启动时、窗口关闭时、应用程序退出时等。app 模块还提供了一些方法和属性，用于管理应用程序的行为，例如启动应用程序、退出应用程序等。
BrowserWindow 模块，用于创建和控制应用程序的窗口。通过实例化 BrowserWindow，可以创建一个可见的窗口，并对其进行配置和操作，例如设置窗口的大小、加载网页内容、响应用户交互等。