1. 安装 Electron
- npm install -g package --registry=https://registry.npm.taobao.org 淘宝镜像
- npm install -g cnpm --registry=https://registry.npm.taobao.org 安装cnpm
- cnpm install -g electron 全局安装electron
- npx electron -v 查看electron版本
2. Electron 官网简介
Electron 是一个使用JavaScript、HTML和CSS等Web技术创建原生程序的框架，它负责比较难搞的部分，你只需把经历放在你的应用的核心上即可。
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 Electron 将 Chromium 和 Node.js 嵌入到了一个二进制文件中，因此它允许你仅需一个代码仓库，就可以撰写支持 Windows、macOS 和 Linux 的跨平台应用。
2.1 Web技术
Electron基于Chromium和Node.js，让你可以使用HTML、CSS和JavaScript创建应用
2.2 开源
Electron是一个由OpenJS基金会和一个活跃的贡献者社区管理的开源项目。
2.3 跨平台
Electron兼容Mac、Windows和Linux，可以构建出三个平台的应用程序。
3. 创建第一个Electron应用
- npm init 初始化项目，生成package.json文件
- 添加.gitignore文件 Github的Node.js gitignore模板
- npm install electron --save-dev 安装electron
3.1 package.json文件配置
{
"name": "electron-app",
"version": "1.0.0",
"description": "学习electron实现个人功能需求",
"main": "main.js", // 任何electron应用程序的入口都是main文件。这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制您应用的生命周期，显示原生界面。
"scripts": {
"start": "electron .", // 配置start命令
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Ably",
"license": "ISC",
"devDependencies": {
"electron": "^20.1.0"
}
}
3.2 创建页面
创建加载进该窗口的内容，在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>Document</title>
</head>
<body>
<h1>Hello Electron</h1>
<div>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
</div>
</body>
</html>
我们会发现，对于Node.js 版本，Chromium，Electron内内容并未指定，过后会使用JavaScript动态插入。
3.3 加载应用窗口
我们已经创建一个页面，那么如何才能将它加载至应用窗口中呢？需要两个Electron模块：
- app 模块，控制应用程序的时间生命周期
- BrowserWindow 模块，创建和管理应用程序窗口
main.js
// 配置窗口,将内容展示在窗口中
// 因为主进程运行着Node.js，故可以在main.js文件头部将它们导入作为CommonJS模块
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
const win = new BrowserWindow({
width: 888,
height: 666
}) // 创建一个宽为888，高为666的窗口
win.loadFile('index.html') // 这个窗口加载index.html文件
}
// 在Electron中，只有在app模块的ready事件被激发后才能创建浏览器窗口。可以通过使用app.whenReady() API 监听此事件。
app.whenReady().then(() => {
createWindow() // 调用该函数，打开一个我们配置好的窗口。 在whenReady()成功后调用createWindow()。不然会报错Cannot create BrowserWindow before app is ready
})
窗口配置成功后，我们可以执行yarn start查看electron的效果是否如我们所示，出现了一个宽888高666的窗口，展示内容为index.html中的内容
3.4 管理窗口的生命周期
我们现在可以打开浏览器窗口，但我们还需要一些额外的模块代码使其看起来更像各平台原生的。应用程序窗口再每个OS下有不同的行为，Electron将在app中实现这些约定的责任交给开发者。
一般而言，可以使用进程全局的platform属性来专门操作某些操作系统运行代码。
3.4.1 关闭所有窗口时退出应用
在Windows和Linux上，关闭所有窗口通常会完全退出一个应用程序。我们可以监听app模块的window-all-closed事件。如果用户不是在macOS(darwin)上运行程序则调用app.quit()，macOS程序无需做这项处理
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
3.4.2 如果没有窗口则打开一个窗口 (macOS)
- 当Linux和Windows应用在没有窗口打开时退出了，macOS应用通常即使在没有打开任何窗口的情况下也继续运行，并且在没有窗口可用的情况下激活应用时会打开新的窗口
- 为了实现这一特性，监听 app 模块的
activate事件。如果没有任何浏览器窗口是打开的，则调用 createWindow() 方法。 - 因为窗口无法在 ready 事件前创建，你应当在你的应用初始化后仅监听 activate 事件。 通过在您现有的 whenReady() 回调中附上您的事件监听器来完成这个操作。
app.whenReady().then(() => {
createWindow() // 调用该函数，打开一个我们配置好的窗口。 在whenReady()成功后调用createWindow()。不然会报错Cannot create BrowserWindow before app is ready
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
若想查看效果，可以将whenReady后的第一个createWindow()方法注释掉，我们在运行项目时会发现并没有窗口直接出现，点击electron图标时，触发activate事件，窗口出现
以上，窗口控件功能齐全。
4. 通过预加载脚本从渲染器访问Node.js
上述项目启动时我们会发现，只有展示静态的html内容，但是我们期望展示的各个内容的版本还未加载到内容中。最后我们需要做的就是输出Electron的版本号和它的依赖项到web页面中。
在主进程中通过Node的全局process对象访问这个信息是微不足道的。但是，你不能直接在主进程中编辑DOM，因为它无法访问渲染器文档上下文。它们存在于完全不同的进程。
预加载（preload）脚本包含了那些执行于渲染器进程中，且先于网页内容开始加载的代码 。 这些脚本虽运行于渲染器的环境中，却因能访问 Node.js API 而拥有了更多的权限。
预加载脚本可以在 BrowserWindow 构造方法中的 webPreferences 选项里被附加到主进程。
main.js中给对应进程增加预加载内容
const createWindow = () => {
const win = new BrowserWindow({
width: 888,
height: 666,
webPreferences: {
preload: path.join(__dirname, 'preload.js'), // 必须为绝对路径
}
}) // 创建一个宽为888，高为666的窗口，预加载preload.js文件中的内容
win.loadFile('index.html') // 这个窗口加载index.html文件
win.webContents.openDevTools() // 打开控制台
}
preload.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])
}
})
5. 页面增加css样式和js操作
- index.html中定义页面结构，引入对应的css文件和js文件
<!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>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<h1 class="my_title">Hello Electron</h1>
<div>
<button onclick="add()" id="myBtn"></button>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
</div>
<script src="./index.js"></script>
</body>
</html>
- index.css中设置样式
.my_title {
color: blue;
}
- index.js 定义页面自定义操作
let count = 0
function add() {
count ++
document.getElementById('myBtn').innerText = `当前count值： ${count}`
}
window.onload = function() {
document.getElementById('myBtn').innerText = `当前count值： ${count}`
}
6. 打包并分发应用程序
使用Electron Forge打包
npm install --save-dev @electron-forge/cli安装npx electron-forge import将 Electron Forge 添加到您应用的开发依赖中，并使用其"import"命令设置 Forge 的脚手架npm run make使用 Forge 的 make 命令来创建可分发的应用程序
Electron-forge 会创建 out 文件夹，您的软件包将在那里找到
7. 小知识
7.1 如何在electron窗口进行内容打印调试呢？
- 主进程main.js中打印，可以在调用终端看到
- 渲染进程中进行打印，可以在主进程中添加webContents.openDevTools()
const createWindow = () => {
const win = new BrowserWindow({
width: 888,
height: 666,
webPreferences: {
preload: '/preload.js', // 必须为绝对路径
}
}) // 创建一个宽为888，高为666的窗口
win.loadFile('index.html') // 这个窗口加载index.html文件
win.webContents.openDevTools() // 打开控制台
}
这样在启动electron后就会自动打开控制台，可查看对应渲染进程中的打印内容
安装步骤来源文章传送门
electron官网传送门
macOS中不需要app.quit()原因传送门
如果有用，点个赞呗~
总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
