摘要:当一个实例被销毁后,相应的渲染进程也会被终止。之所以命名为,主要是为了与主进程这个概念对应。部分在事件触发后才能使用。当全部窗口关闭时退出。主进程接收到消息并处理之后,会返回处理结果。
简介
Electron 是一个可以使用 Web 技术如 JavaScript、HTML 和 CSS 来创建跨平台原生桌面应用的框架。借助 Electron,我们可以使用纯 JavaScript 来调用丰富的原生 APIs。
Electron用 web 页面作为它的 GUI,而不是绑定了 GUI 库的 JavaScript。它结合了 Chromium、Node.js 和用于调用操作系统本地功能的 APIs(如打开文件窗口、通知、图标等)。
现在已经有很多由 Electron 开发应用,比如 Atom、Insomnia、Visual Studio Code 等。查看更多使用 Electron 构建的项目可以访问 [Apps Built on Electron
](https://electron.atom.io/apps/)
安装 electron 之前,需要安装 Node.js。如果没有安装,推荐使用 nvm 等 Node.js 版本管理工具进行安装/
然后建议修改 electron 的源为国内源:
$ export ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"
不然会出现如下错误:
Error: connect ETIMEDOUT 54.231.50.42:443 at Object.exports._errnoException (util.js:1016:11) at exports._exceptionWithHostPort (util.js:1039:20) at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1138:14)
安装 electron:
$ npm install electron -g进程
Electron 的进程分为主进程和渲染进程。
主进程在 electron 里面,运行 package.json 里面 main 脚本的进程成为主进程。主进程控制整个应用的生命周期,在主进程中可以创建 Web 形式的 GUI,而且整个 Node API 是内置其中。
渲染进程每个 electron 的页面都运行着自己的进程,称为渲染进程。
主进程与渲染进程的联系及区别主进程使用 BrowserWindow 实例创建页面。每个 BrowserWindow 实例都在自己的渲染进程里运行页面。当一个 BrowserWindow 实例被销毁后,相应的渲染进程也会被终止。
主进程管理所有页面和与之对应的渲染进程。每个渲染进程都是相互独立的,并且只关心他们自己的页面。
在 electron 中,页面不直接调用底层 APIs,而是通过主进程进行调用。所以如果你想在网页里使用 GUI 操作,其对应的渲染进程必须与主进程进行通讯,请求主进程进行相关的 GUI 操作。
在 electron 中,主进程和渲染进程的通信主要有以下几种方式:
ipcMain、ipcRender
Remote 模块
进程通信将稍后详细介绍。
打造第一个 Electron 应用以下所有代码可以在 https://github.com/nodejh/electron-quick-start 找到。
一个最简单的 electron 应用目录结构如下:
electron-demo/ ├── package.json ├── main.js └── index.html
package.json 与 Node.js 的完全一致,所以我们可以使用 npm init 来生成。然后将 "main": "index.js" 修改为 "main": "main.js"。之所以命名为 main.js,主要是为了与主进程这个概念对应。
main.js创建 main.js 文件并添加如下代码:
const electron = require("electron"); const { app, // 控制应用生命周期的模块 BrowserWindow, // 创建原生浏览器窗口的模块 } = electron; // 保持一个对于 window 对象的全局引用,如果不这样做, // 当 JavaScript 对象被垃圾回收, window 会被自动地关闭 let mainWindow; function createWindow() { // 创建浏览器窗口。 mainWindow = new BrowserWindow({width: 800, height: 600}); // 加载应用的 index.html。 // 这里使用的是 file 协议,加载当前目录下的 index.html 文件。 // 也可以使用 http 协议,如 mainWindow.loadURL("http://nodejh.com")。 mainWindow.loadURL(`file://${__dirname}/index.html`); // 启用开发工具。 mainWindow.webContents.openDevTools(); // 当 window 被关闭,这个事件会被触发。 mainWindow.on("closed", () => { // 取消引用 window 对象,如果你的应用支持多窗口的话, // 通常会把多个 window 对象存放在一个数组里面, // 与此同时,你应该删除相应的元素。 mainWindow = null; }); } // Electron 会在初始化后并准备 // 创建浏览器窗口时,调用这个函数。 // 部分 API 在 ready 事件触发后才能使用。 app.on("ready", createWindow); // 当全部窗口关闭时退出。 app.on("window-all-closed", () => { // 在 macOS 上,除非用户用 Cmd + Q 确定地退出, // 否则绝大部分应用及其菜单栏会保持激活。 if (process.platform !== "darwin") { app.quit(); } }); app.on("activate", () => { // 在 macOS 上,当点击 dock 图标并且该应用没有打开的窗口时, // 绝大部分应用会重新创建一个窗口。 if (mainWindow === null) { createWindow(); } });
关于 app 和 BrowserWindow 对象和实例的更多用法可参考 electron 的文档:
app
BrowserWindow
index.html然后编辑需要展示的 index.html:
Hello World! Hello World!
We are using Node.js and Electron
在这个例子中,我们显示出了 electron 使用的 Node.js 版本和 electron 的版本。index.html 跟网页的 HTML 一摸一样,只是多了一些 electron 的全局对象。
运行因为前面已经全局安装了 electron,所以我们可以使用 electron 命令来运行项目。在 electron-demo/ 目录里面运行下面的命令:
$ electron .
然后会弹出一个 electron 应用客户端,如图所示:
因为在主进程中启用了开发模式 mainWindow.webContents.openDevTools(),所以默认启动开发者工具。
如果是局部安装的 electron,即 npm install --save electron,则可以运行下面的命令来启动应用:
$ ./node_modules/.bin/electron .进行通信
对于 electron 来说,主进程和渲染进程直接的通信是必不可少的。
前面提到过 electron 进程间的通信的方式主要有两种,一种是用于发送消息的 ipcMain 和 ipcRenderer 模块,一种用于 RPC 的 remote 模块。
现在假设一个业务场景,用户在页面中输入文本消息,渲染进程将消息发送给主进程,主进程处理后将处理结果返回给页面。为了方便起见,主进程的处理就假设为翻转文本。当然,这个功能在前端完全可以实现,这里只是为了演示进程通信。
ipcMain 和 ipcRenderer首先在渲染进程中添加一个输入框和一个按钮,并实现点击按钮获取输入框的内容。然后使用 ipcRenderer 发送消息。主进程接收到消息并处理之后,会返回处理结果。所以渲染进程中还需要接收主进程的消息。
修改 index.html,添加下面的代码:
接下来在主进程中接收渲染进程的消息,并进行处理(翻转字符串),然后将处理结果发送给主进程。修改 main.js 如下:
//... // 监听渲染进程发送的消息 ipcMain.on("asynchronous-message", (event, arg) => { const reply = arg.split("").reverse().join(""); console.log("reply: ", reply); // 发送消息到主进程 event.sender.send("asynchronous-reply", reply); });
然后重新运行项目。在页面的输入框内输入字符,点击按钮,就能弹出如下的弹出框,说明渲染进程与主进程通信成功:
remoteremote 模块提供了一种在渲染进程(网页)和主进程之间进行进程间通讯(IPC)的简便途径。
使用 remote 模块,我们可以很方便地调用主进程对象的方法,而不需要发送消息。
在 index.html 的 标签中添加如下代码:
// 引入 remote 模块 var remote = require("electron").remote; // 获取主进程中的 BrowserWindow 对象 var BrowserWindow = remote.BrowserWindow; // 创建一个渲染进程 var win = new BrowserWindow({ width: 200, height: 150 }); win.loadURL("http://nodejh.com");
然后使用 ctr + r 组合键刷新应用,就会看到创建出的一个新窗口。
打包Electron 应用开发完成之后,还需要将其打包成对应平台的客户端。常用的打包工具有 electron-packager 和 asar。
这里以 electron-packager 为例。首先全局安装 electron-packager:
$ npm install electron-packager -g
然后在项目中安装 electron:
$ npm install electron --save-dev
然后打包:
$ electron-packager . electron-demo总结
本文首先对 electron 做了简单的介绍,然后讲解了 electron 进程的概念,其进程包括主进程和渲染进程。然后创建了一个简单的 electron 应用,并通过实现一个简单的应用场景,对 electron 进程间的通信做了实践。总体来说,使用 electron 创建桌面客户端的开发体验跟写 Node.js 和网页差不多。但本文对内置模块比如 app、ipcMain、ipcRender、remote 等的介绍比较粗浅,涉及到一些内置模块的使用,还需要继续查询 electron 的官方文档,只有实践越多,才能越熟悉。
https://github.com/nodejh/nodejh.github.io/issues/39
--
https://github.com/nodejh/electron-quick-start
electron/electron
electron中文教程
Electron 中文文档
Electron开发桌面应用
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/83896.html
摘要:快速入门提供了丰富的本地操作系统的,使你能够使用纯来创建桌面应用程序。这并不意味着是一个绑定图形用户界面的库。每个页面在里是运行在自己的进程里,这些进程被称为渲染进程。有些只能在该事件发生后才能被使用。 快速入门 Electron提供了丰富的本地(操作系统)的API,使你能够使用纯JavaScript来创建桌面应用程序。与其它各种的Node.js运行时不同的是Electron专注于桌面...
electronjs 是什么?可以用javascript写,windows / mac / linux 界面程序的开发框架。参看:https://electronjs.org/ https://electronjs.org/docs 快速开始必备的条件: nodejs的安装 git git clone https://github.com/electron/e...cd electron-q...
electronjs 是什么?可以用javascript写,windows / mac / linux 界面程序的开发框架。参看:https://electronjs.org/ https://electronjs.org/docs 快速开始必备的条件: nodejs的安装 git git clone https://github.com/electron/e...cd electron-q...
摘要:一份开发者必备的技能清单,请查收。入门查漏补缺深入学习查看原图下载源文件使用快速上手,并了解其中的概念。官方教程入门教程小书文章精读,问题解答。 一份react开发者必备的技能清单,请查收。入门、查漏补缺、深入学习... showImg(https://segmentfault.com/img/remote/1460000018000950?w=1965&h=3332); 查看原图 ...
摘要:本文主要讲解的入门。可以帮助我们管理包的下载依赖部署发布等。可以认为是中的。后续使用中,全部替换为即可。命令根据它,自动下载所需模块用于创建窗口和处理系统事件安装包的位置。 Electron是什么 可以认为Electron是一种运行环境库,我们可以基于此,用HTML、JS和CSS写桌面应用。PC端的UI交互,主要有web应用和桌面应用。具体采用哪种方式,主要看系统的应用场景,哪个更合适...
阅读 1570·2021-09-24 10:38
阅读 1497·2021-09-22 15:15
阅读 3058·2021-09-09 09:33
阅读 904·2019-08-30 11:08
阅读 637·2019-08-30 10:52
阅读 1251·2019-08-30 10:52
阅读 2342·2019-08-28 18:01
阅读 518·2019-08-28 17:55