菜单

Electron 快速入门

2019年2月21日 - 计算机教程

XCel 项目总结:Electron 与 Vue 的性能优化

2017/03/01 · 基础技术 ·
Javascript,
算法

本文作者: 伯乐在线
刘健超-J.c
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者

XCEL 是由京东用户体验设计部凹凸实验室推出的一个 Excel
数据清洗工具,其通过可视化的方式让用户轻松地对 Excel 数据进行筛选。

XCEL 基于 Electron 和 Vue 2.x,它不仅跨平台(windows 7+、Mac 和
Linux),而且充分利用 Electron 多进程任务处理等功能,使其性能优异。

落地页:https://xcel.aotu.io/ ✨✨✨
项目地址:https://github.com/o2team/xcel ✨✨✨

快速入门

Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs
来创造桌面应用。你可以把它看作一个专注于桌面应用的 Node.js
的变体,而不是 Web 服务器。

这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反,Electron 使用
web 页面作为它的 GUI,所以你能把它看作成一个被 JavaScript
控制的,精简版的 Chromium 浏览器。

项目背景

用户研究的定量研究和轻量级数据处理中,均需对数据进行清洗处理,以剔除异常数据,保证数据结果的信度和效度。目前因调研数据和轻量级数据的多变性,对轻量级数据清洗往往采取人工清洗,缺少统一、标准的清洗流程,但对于调研和轻量级的数据往往是需要保证数据稳定性的,因此,在对数据进行清洗时最好有标准化的清洗方式。

主进程

在 Electron 里,运行 package.jsonmain
脚本的进程被称为主进程。在主进程运行的脚本可以以创建 web
页面的形式展示 GUI。

特性一览

渲染进程

由于 Electron 使用 Chromium 来展示页面,所以 Chromium
的多进程结构也被充分利用。每个 Electron
的页面都在运行着自己的进程,这样的进程我们称之为渲染进程

在一般浏览器中,网页通常会在沙盒环境下运行,并且不允许访问原生资源。然而,Electron
用户拥有在网页中调用 Node.js 的 APIs
的能力,可以与底层操作系统直接交互。

思路与实现

基于用研组的需求,利用 Electron 和 Vue 的特性对该工具进行开发。

主进程与渲染进程的区别

主进程使用 BrowserWindow 实例创建页面。每个 BrowserWindow
实例都在自己的渲染进程里运行页面。当一个 BrowserWindow
实例被销毁后,相应的渲染进程也会被终止。

主进程管理所有页面和与之对应的渲染进程。每个渲染进程都是相互独立的,并且只关心他们自己的页面。

由于在页面里管理原生 GUI
资源是非常危险而且容易造成资源泄露,所以在页面调用 GUI 相关的 APIs
是不被允许的。如果你想在网页里使用 GUI
操作,其对应的渲染进程必须与主进程进行通讯,请求主进程进行相关的 GUI
操作。

在 Electron,我们提供几种方法用于主进程和渲染进程之间的通讯。像
ipcRenderer
ipcMain
模块用于发送消息, remote
模块用于 RPC 方式通讯。这些内容都可以在一个 FAQ 中查看 how to share
data between web
pages

技术选型

打造你第一个 Electron 应用

大体上,一个 Electron 应用的目录结构如下:

your-app/
├── package.json
├── main.js
└── index.html

package.json 的格式和 Node 的完全一致,并且那个被 main
字段声明的脚本文件是你的应用的启动脚本,它运行在主进程上。你应用里的
package.json 看起来应该像:

{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}

注意:如果 main 字段没有在 package.json 声明,Electron会优先加载
index.js

main.js 应该用于创建窗口和处理系统事件,一个典型的例子如下:

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

// 保持一个对于 window 对象的全局引用,如果你不这样做,
// 当 JavaScript 对象被垃圾回收, window 会被自动地关闭
let win

function createWindow () {
  // 创建浏览器窗口。
  win = new BrowserWindow({width: 800, height: 600})

  // 加载应用的 index.html。
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

  // 打开开发者工具。
  win.webContents.openDevTools()

  // 当 window 被关闭,这个事件会被触发。
  win.on('closed', () => {
    // 取消引用 window 对象,如果你的应用支持多窗口的话,
    // 通常会把多个 window 对象存放在一个数组里面,
    // 与此同时,你应该删除相应的元素。
    win = 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', () => {
  // 在这文件,你可以续写应用剩下主进程代码。
  // 也可以拆分成几个文件,然后用 require 导入。
  if (win === null) {
    createWindow()
  }
})

// 在这文件,你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件,然后用 require 导入。

最后,你想展示的 index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    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>.
  </body>
</html>

实现思路

  1. 通过 js-xlsx 将 Excel 文件解析为 JSON 数据
  2. 根据筛选条件对 JSON 数据进行筛选过滤
  3. 将过滤后的 JSON 数据转换成 js-xlsx 指定的数据结构
  4. 利用 js-xlsx 对转换后的数据生成 Excel 文件

纸上得来终觉浅,绝知此事要躬行

运行你的应用

一旦你创建了最初的 main.jsindex.htmlpackage.json
这几个文件,你可能会想尝试在本地运行并测试,看看是不是和期望的那样正常运行。

相关技术

如果对某项技术比较熟悉,则可略读/跳过。

electron-prebuilt

electron
是一个 npm 模块,包含所使用的 Electron 预编译版本。
如果你已经用 npm 全局安装了它,你只需要按照如下方式直接运行你的应用:

electron .

如果你是局部安装,那运行:

Electron

macOS / Linux

$ ./node_modules/.bin/electron .

Electron 是什么?

Electron 是一个可以用 JavaScript、HTML 和 CSS
构建桌面应用程序的。这些应用程序能打包到 Mac、Windows 和 Linux
系统上运行,也能上架到 Mac 和 Windows 的 App Store。

Windows

$ .\node_modules\.bin\electron .

为什么它如此重要?

通常来说,每个操作系统的桌面应用都由各自的原生语言进行编写,这意味着需要
3 个团队分别为该应用编写相应版本。而 Electron 则允许你用 Web
语言编写一次即可。

手工下载 Electron 二进制文件

如果你手工下载了 Electron
的二进制文件,你也可以直接使用其中的二进制文件直接运行你的应用。

它由什么组成?

Electron 结合了 ChromiumNode.js 和用于调用操作系统本地功能的
API(如打开文件窗口、通知、图标等)。

图片 1

Windows

$ .\electron\electron.exe your-app\

开发体验如何?

基于 Electron 的开发就像在开发网页,而且能够无缝地 使用
Node
。或者说:在构建一个 Node 应用的同时,通过 HTML 和 CSS
构建界面。另外,你只需为一个浏览器(最新的
Chrome
)进行设计(即无需考虑兼容性等)。

Linux

$ ./electron/electron your-app/

两个进程(重点)

Electron
有两种进程:『主进程』和『渲染进程』。部分模块只能在两者之一上运行,而有些则无限制。主进程更多地充当幕后角色,而渲染进程则是应用程序的各个窗口。

注:可通过任务管理器(PC)/活动监视器(Mac)查看进程的相关信息。

macOS

$ ./Electron.app/Contents/MacOS/Electron your-app/

Electron.app 里面是 Electron 发布包,你可以在
这里
下载到。

主进程

主进程,通常是一个命名为 main.js 的文件,该文件是每个 Electron
应用的入口。它控制了应用的生命周期(从打开到关闭)。它既能调用原生元素,也能创建新的(多个)渲染进程。另外,Node
API 是内置其中的。

图片 2

以发行版本运行

在你完成了你的应用后,你可以按照
应用部署
指导发布一个版本,并且以已经打包好的形式运行应用。

渲染进程

渲染进程是应用的一个浏览器窗口。与主进程不同,它能存在多个(注:一个
Electron
应用只能存在一个主进程)并且相互独立(它也能是隐藏的)。主窗口通常被命名为
index.html。它们就像典型的 HTML 文件,但 Electron 赋予了它们完整的
Node API。因此,这也是它与浏览器的区别。

图片 3

参照下面例子

复制并且运行这个库
electron/electron-quick-start

注意:运行时需要你的系统已经安装了
Git
Node.js(包含
npm)。

# 克隆这仓库
$ git clone https://github.com/electron/electron-quick-start
# 进入仓库
$ cd electron-quick-start
# 安装依赖库并运行应用
$ npm install && npm start

更多 apps 例子,查看 electron 社区创建的 list of
boilerplates

把它们想象成这样

Chrome(或其他浏览器)的每个标签页(tab)及其页面,就好比 Electron
中的一个单独渲染进程。即使关闭所有标签页,Chrome 依然存在。这好比
Electron 的主进程,能打开新的窗口或关闭这个应用。

注:在 Chrome
浏览器中,一个标签页(tab)中的页面(即除了浏览器本身部分,如搜索框、工具栏等)就是一个渲染进程。

图片 4

相互通讯

由于主进程和渲染进程各自负责不同的任务,而对于需要协同完成的任务,它们需要相互通讯。IPC就为此而生,它提供了进程间的通讯。但它只能在主进程与渲染进程之间传递信息(即渲染进程之间不能进行直接通讯)。

图片 5

汇成一句话

Electron 应用就像 Node 应用,它也依赖一个 package.json
文件。该文件定义了哪个文件作为主进程,并因此让 Electron
知道从何启动应用。然后主进程能创建渲染进程,并能使用 IPC
让两者间进行消息传递。

图片 6

至此,Electron
的基础部分介绍完毕。该部分是基于笔者之前翻译的一篇文章《Essential
Electron》
,译文可点击
这里


Vue 全家桶

该工具使用了 Vue、Vuex、Vuex-router。在工具基本定型阶段,由 1.x 升级到了
2.x。

为什么选择 Vue

对于笔者来说:

Vue 1.x -> Vue 2.0 的版本迁移用
vue-migration-helper
即可分析出大部分需要更改的地方。

网上已有很多关于 Vue 的教程,故在此不再赘述。至此,Vue 部分介绍完毕。


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图