简介

Electron是一个使用HTML、CSS和JavaScript构建桌面应用程序的框架。嵌入Chromium和nodejs到二进制Electron中，将允许在Windows上创建运行跨平台应用（Linux、MacOS）。

所需知识点

在使用Electron之前，需要掌握web开发以及nodejs,推荐在下边学习：

来自Mozilla开发社区(Mozilla Developer Network)的web入门教程
NodeJS官方入门指南

笔记内容部分为复制官方文档，官方文档地址：点击打开

快速入门

安装环境

首先，Electron需要Nodejs运行环境，前往官网下载最新LTS版安装，验证安装是否成功，可以在终端运行以下命令：

node -v
npm -v

安装成功的话，将会在终端输出nodejs和npm版本信息

创建Helloworld项目

创建项目目录以及安装依赖和配置nodejs

Electron应用程序遵循与其他Nodejs项目相同的目录结构。因此，需要新建一个helloworld目录，进入目录，打开终端，输入npm init初始化，得到一个package.json,接下来使用npm install --save-dev electron安装electron到开发环境依赖中。

注：如果下载过慢或者无法下载，可以设置使用淘宝镜像 npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/
更多解决方法查看：高级安装

最后，您希望能够执行 Electron 如下所示，在您的 package.json配置文件中的scripts字段下增加一条start命令 electron .。此时， package.json 应该是如下这样：

{"name": "helloworld","version": "1.0.0","description": "helloworld","main": "main.js","scripts": {"start": "electron ."},"author": "wzker","license": "ISC","devDependencies": {"electron": "^14.0.1"}
}

此时使用 npm start 就能启动应用

运行主进程

在Electron中，入口都是main文件，它控制应用的主进程，是位于完整的nodejs环境，负责控制应用的生命周期、显示界面和执行特殊操作并管理渲染进程。

运行启动时，Electron会根据package.json的main配置来查找运行入口文件，此时需要在项目根目录创建一个文件，这里是main.js

创建页面

在可以为我们的应用创建窗口前，我们需要先创建加载进该窗口的内容。在 Electron 中，每个窗口中无论是本地的HTML文件还是远程URL都可以被加载显示。

这里创建一个 html 目录，里面创建一个 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>HelloWorld</title>
</head><body><h1>HelloWorld</h1>
</body></html>

在一个窗口中打开我们的HelloWorld页面

这时候，我们需要用到Electron的app和BrowserWindow模块

app模块用于控制应用程序的事件生命周期
BrowserWindow模块用于创建和管理他的窗口

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

然后，使用 createWindow()方法来讲 index.html 载入到 BrowserWindow 实例中。

function newWindow() {const myWindow = new BrowserWindow({width: 500,height: 300,});myWindow.loadFile('html/index.html');
}

接下来只需要调用 newWindow() 来打开新的窗口。

在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口。可以通过使用 app.whenReady() API来监听此事件。在whenReady()成功后调用createWindow()。

app.whenReady().then(() => {newWindow();
});

此时，已经可以运行并打开Helloworld窗口

管理窗口生命周期

虽然你现在可以打开一个浏览器窗口，但你还需要一些额外的模板代码使其看起来更像是各平台原生的。应用程序窗口在每个OS下有不同的行为，Electron将在app中实现这些约定的责任交给开发者们。

一般而言，你可以使用进程全局的 platform 属性来专门为某些操作系统运行代码。

关闭所有窗口时退出应用 (Windows & Linux)

在Windows和Linux上，关闭所有窗口通常会完全退出一个应用程序。

app.on('window-all-closed', function () {if (process.platform !== 'darwin') app.quit()
})

如果没有窗口打开则打开一个窗口 (macOS)

当 Linux 和 Windows 应用在没有窗口打开时退出了，macOS 应用通常即使在没有打开任何窗口的情况下也继续运行，并且在没有窗口可用的情况下激活应用时会打开新的窗口。

因为窗口无法在 ready 事件前创建，你应当在你的应用初始化后仅监听 activate 事件。通过在您现有的 whenReady() 回调中附上您的事件监听器来完成这个操作。

app.whenReady().then(() => {createWindow()app.on('activate', function () {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})

通过预加载脚本从渲染器访问Node.js （在页面打开后加入Electron信息）

在主进程中，他是无法访问渲染器的DOM，因为他们位于两个不同的进程

这时，就可以使用预加载脚本连接渲染器，预加载脚本会在渲染页面之前加载，可以访问渲染器的全局和document还有nodejs环境。

创建一个 preload.js,内容写入如下：

window.addEventListener('DOMContentLoaded', () => {const $el = document.getElementById("version");$el.innerText = process.version['electron'];
});

接着在主进程打开新窗口的时候添加preload载入预加载脚本

// 在文件头部引入 Node.js 中的 path 模块
const path = require('path')// 修改现有的 createWindow() 函数
function createWindow () {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js')}})win.loadFile('index.html')
}
// ...

渲染器的额外脚本

渲染器运行在正常的web浏览器环境中，因此，可以在idnex.html中引入想要的任意脚本

<script src="js/my.js"></script>

至此，已经完美运行Helloworld，接下来将介绍如何打包

打包Helloworld应用

最快捷的打包方式是使用 Electron Forge

1.将 Electron Forge 添加到您应用的开发依赖中，并使用其"import"命令设置 Forge 的脚手架：

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

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

npm run make

打包生成文件在out目录内

Electron开发桌面应用（一） Helloworld相关推荐

送你一份用Electron开发桌面应用的避坑指南【送3本书，含犀牛书】
大家好,我是若川.持续组织了5个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,新年第一次送3本书.抽奖规则见文末. 如今,Electron 领域发生了重大的变革,Electro ...
Electron开发桌面应用
由 Bazzzinga威同学翻译自 Medium.https://medium.com/developers-writing/building-a-desktop-application-with- ...
记一次electron开发桌面英语(自用，类歌词）
记一次electron开发桌面英语(自用,类歌词) 晒一下自己的考试成绩单,不感兴趣可以跳过制作初心进入正题功能安装(略) 项目结构目录 package.json main.js index. ...
采用electron开发桌面应用
什么是electron,能做什么? 1.electron是搭载谷歌v8内核的高性能的node环境 ,所有node能用的东西.这里都能用. 2.前端做桌面应用. 前端做桌面应用(electron, nw ...
JS是世界上最好的语言—— 使用Electron开发桌面应用(一)
Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用. 你可以把它看作一个专注于桌面应用的 Node. js 的变体,而不是 Web 服务器. ...
初识Electron开发桌面应用
Electron是什么? Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建跨平台(mac/window/linux)桌面 ...
electron 托盘图标闪烁_从零到一，用 Electron 开发桌面效率工具
Electron 已经不算新技术,最早是 github 从 Atom 编辑器衍生出来的框架.通过编写 Javascript, HTML, CSS 能快速编译出跨系统的桌面 app.Electron 的 ...
【Electron】 Electron 开发桌面应用（一）编写→运行→打包
一. 准备工作 1. 首先,我们要安装electron-prebuilt,它是一个npm模块,因此我们可以使用Npm来进行安装,它是一个electron的预编译版本. npm install -g e ...
electron forge 好用吗_在优麒麟上使用 Electron 开发桌面应用
使用 Web 标准来创建桌面 GUI,上手快.成本低.跨平台.自适应分辨率,这些都是 Electron 的优势.
使用electron开发桌面音乐播放器
一:主要技术栈前端:electron-vue+vue-router+axios+es6+pouchDB+node js+nsis; 二:目前已完成的功能音乐播放:包括播放进度条.歌曲切换.缓存条. ...

Electron开发桌面应用（一） Helloworld

简介