菜单

项目总结,快速入门

2019年9月28日 - 前端排行
项目总结,快速入门

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 1
图片 2

1 赞 2 收藏
评论

Linux

$ ./electron/electron your-app/

webview

webview标签是被用来在你的Electron应用中嵌入“guest”(例如一个外部网页)内容。他们是非常相似的内嵌框架,但是不同之处在于每一个webview运行在一个指定的进程中。它并没有和你的网页拥有相同的权限,并且在你的应用和嵌入内容之间交互都是异步的。这将保持你的应用对于嵌入内容的安全性。

js-xlsx

该库支持各种电子表格格式的解析与生成。它由 JavaScript 实现,适用于前端和
Node。详情>>

目前支持读入的格式有(不断更新):

支持写出的格式有:

目前该库提供的 sheet_to_json 方法能将读入的 Excel 数据转为 JSON
格式。而对于导出操作,我们需要为 js-xlsx 提供指定的 JSON 格式。

更多关于 Excel 在 JavaScript
中处理的知识可查看凹凸实验室的《Node读写Excel文件探究实践》。但该文章存在两处问题(均在
js-xlsx 实战的导出表格部分):

  1. 生成头部时,Excel 的列信息简单地通过 String.fromCharCode(65+j)
    生成。当列大于 26 时会出现问题。这个问题会在后面章节中给出解决方案;
  2. 转换成 worksheet
    需要的结构处,出现逻辑性错误,并且会导致严重的性能问题。逻辑问题在此不讲述,我们看看性能问题:
    随着 ECMAScript 的不断更新,JavaScript
    变得更加强大和易用。尽管如此,我们还是要做到『物尽所用』,而不要『大材小用』,否则可能会得到“反效果”。这里导致性能问题的正是
    Object.assign()
    方法,该方法可以把任意多个源对象的可枚举属性拷贝至目标对象,并返回目标对象。由于该方法自身的实现机制,会在此案例中产生大量的冗余操作。在该案例中,单元格信息是唯一的,所以直接通过
    forEach 为一个空对象赋值即可。提升 N
    倍性能的同时,也把逻辑性错误解决了。

原来的:

JavaScript

var result = 某数组.reduce((prev, next) => Object.assign({}, prev,
{[next.position]: {v: next.v}}), {});

1
2
var result = 某数组.reduce((prev, next) => Object.assign({}, prev, {[next.position]: {v: next.v}}), {});
 

改为:

JavaScript

var result = 某数组.forEach((v, i) => data[v.position]= {v: v.v})

1
2
var result = 某数组.forEach((v, i) => data[v.position]= {v: v.v})
 

实践是检验真理的唯一标准

在理解上述知识后,下面就谈谈在该项目实践中总结出来的技巧、难点和重点

Windows

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

userland

这个术语来自于Unix社区,”userland”或”userspace”在运行在操作系统内核之外的程序中被提及。最近,这个术语已经在Node和npm社区中普及,用于区分”Node
core”和npm上记录的通过更大的”user”社区发布的包。

像Node,Electron是一个专注于有一个小的接口集合,并且这个集合提供所有的必须的为了开发多平台桌面程序的原生接口。这个设计理念使得Electron保持为一个灵活的工具,而不是过多的规定如何来使用它。Userland使得用户可以创建并分享工具,而这些工具提供基于“core”中有效内容之上的附加功能。

执行效率和渲染的优化

Windows

$ .\node_modules\.bin\electron .

这个页面定义了一些在Electron中经常使用的专有名词。

更贴近原生应用

Electron
的一个缺点是:即使你的应用是一个简单的时钟,但它也不得不包含完整的基础设施(如
Chromium、Node
等)。因此,一般情况下,打包后的程序至少会达到几十兆(根据系统类型进行浮动)。当你的应用越复杂,就越可以忽略文件体积问题。

众所周知,页面的渲染难免会导致『白屏』,而且这里采用了 Vue
这类框架,情况就更加糟糕了。另外,Electron
应用也避免不了『先打开浏览器,再渲染页面』的步骤。下面提供几种方法来减轻这种情况,以让程序更贴近原生应用。

  1. 指定 BrowserWindow 的背景颜色;
  2. 先隐藏窗口,直到页面加载后再显示;
  3. 保存窗口的尺寸和位置,以让程序下次被打开时,依然保留的同样大小和出现在同样的位置上。

对于第一点,若应用的背景不是纯白(#fff)的,那么可指定窗口的背景颜色与其一致,以避免渲染后的突变。

JavaScript

mainWindow = new BrowserWindow({ title: ‘XCel’, backgroundColor:
‘#f5f5f5’, };

1
2
3
4
5
mainWindow = new BrowserWindow({
    title: ‘XCel’,
    backgroundColor: ‘#f5f5f5’,
};
 

对于第二点,由于 Electron
本质是一个浏览器,需要加载非网页部分的资源。因此,我们可以先隐藏窗口。

JavaScript

var mainWindow = new BrowserWindow({ title: ‘ElectronApp’, show: false,
};

1
2
3
4
5
var mainWindow = new BrowserWindow({
    title: ‘ElectronApp’,
    show: false,
};
 

等到渲染进程开始渲染页面的那一刻,在 ready-to-show
的回调函数中显示窗口。

JavaScript

mainWindow.on(‘ready-to-show’, function() { mainWindow.show();
mainWindow.focus(); });

1
2
3
4
5
mainWindow.on(‘ready-to-show’, function() {
    mainWindow.show();
    mainWindow.focus();
});
 

对于第三点,笔者并没有实现,原因如下:

  1. 用户一般是根据当时的情况对程序的尺寸和位置进行调整,即视情况而定。
  2. 以上是我个人臆测,主要是我懒🐶。

其实现方式,可参考《4 must-know tips for building cross platform
Electron
apps》。

electron-prebuilt

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

electron .

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

ASAR

ASAR是Atom Shell Archive
Format的简称。一个asar文档是一个把文件都放在一个单独的文件中的简单的tar-like类型文件。Electron可以从中读取全部的文件而不用解压整个文件。

创造ASAR类型主要是为了在Windows下提高性能… TODO

汇成一句话

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

图片 3

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


主进程

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

renderer process

在你的应用中,渲染进程就是一个浏览器窗口。不同于主进程,可以有多个渲染进程并且每一个渲染进程都作为一个分隔的进程来运行。它们也可以被隐藏。

一般的浏览器中,网页通常运行在一个沙盒环境中,并且不允许调用本地资源。Electron的使用者有权利使用Node.js接口来与底层的操作系统哦交互。

参考:process,main
process

实现思路

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

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

手工下载 Electron 二进制文件

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

DMG

Apple Disk
Image是一个在MacOS上使用的打包类型。DMG文件通常用来分发应用的“安装文件”。electron-builder支持dmg作为一个打包目标。

技术选型

参照下面例子

复制并且运行这个库
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。

V8

V8是Google的开源JavaScrip引擎。它是用C++编写的并且被用在Google
Chrome中,Chrome是Google的开源浏览器。V8可以单独运行,或者被嵌入到任何C++应用中。

支持常见的编辑功能,如粘贴和复制

Electron 应用在 MacOS
中默认不支持『复制』『粘贴』等常见编辑功能,因此需要为 MacOS
显式地设置复制粘贴等编辑功能的菜单栏,并为此设置相应的快捷键。

JavaScript

// darwin 就是 MacOS if (process.platform === ‘darwin’) { var template =
[{ label: ‘FromScratch’, submenu: [{ label: ‘Quit’, accelerator:
‘CmdOrCtrl+Q’, click: function() { app.quit(); } }] }, { label: ‘Edit’,
submenu: [{ label: ‘Undo’, accelerator: ‘CmdOrCtrl+Z’, selector:
‘undo:’ }, { label: ‘Redo’, accelerator: ‘Shift+CmdOrCtrl+Z’, selector:
‘redo:’ }, { type: ‘separator’ }, { label: ‘Cut’, accelerator:
‘CmdOrCtrl+X’, selector: ‘cut:’ }, { label: ‘Copy’, accelerator:
‘CmdOrCtrl+C’, selector: ‘copy:’ }, { label: ‘Paste’, accelerator:
‘CmdOrCtrl+V’, selector: ‘paste:’ }, { label: ‘Select All’, accelerator:
‘CmdOrCtrl+A’, selector: ‘selectAll:’ }] }]; var osxMenu =
menu.buildFromTemplate(template); menu.setApplicationMenu(osxMenu); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// darwin 就是 MacOS
if (process.platform === ‘darwin’) {
    var template = [{
      label: ‘FromScratch’,
      submenu: [{
        label: ‘Quit’,
        accelerator: ‘CmdOrCtrl+Q’,
        click: function() { app.quit(); }
      }]
    }, {
      label: ‘Edit’,
      submenu: [{
        label: ‘Undo’,
        accelerator: ‘CmdOrCtrl+Z’,
        selector: ‘undo:’
      }, {
        label: ‘Redo’,
        accelerator: ‘Shift+CmdOrCtrl+Z’,
        selector: ‘redo:’
      }, {
        type: ‘separator’
      }, {
        label: ‘Cut’,
        accelerator: ‘CmdOrCtrl+X’,
        selector: ‘cut:’
      }, {
        label: ‘Copy’,
        accelerator: ‘CmdOrCtrl+C’,
        selector: ‘copy:’
      }, {
        label: ‘Paste’,
        accelerator: ‘CmdOrCtrl+V’,
        selector: ‘paste:’
      }, {
        label: ‘Select All’,
        accelerator: ‘CmdOrCtrl+A’,
        selector: ‘selectAll:’
      }]
    }];
    var osxMenu = menu.buildFromTemplate(template);
    menu.setApplicationMenu(osxMenu);
}
 

渲染进程

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

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

NSIS

Nullsoft Scriptable Install System是一个Microsoft
Windows下的脚本驱动的安装制作工具。它发布在免费软件许可证下,是一个类似于InstallShield的广泛的被用来替代商业专有产品的工具。electron-builder支持NSIS作为一个编译目标。

把它们想象成这样

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

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

图片 4

以发行版本运行

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

Brightray

Brightray是一个使libchromiumcontent更容易使用应用的静态库。它是专门为了Electron而创造的,但是也可以允许没有基于Electron的原生应用使用Chromium的渲染引擎。

Brightray是Electron的一个底层的依赖,大多数Electron的使用者并不用担心它。

斜分割线

如图:图片 5

分割线可以通过 ::after/::before 伪类元素实现一条直线,然后通过
transform:rotate();
旋转特定角度实现。但这种实现的一个问题是:由于宽度是不定的,因此需要通过
JavaScript 运算才能得到准确的对角分割线。

因此,这里可以通过 CSS 线性渐变
linear-gradient(to top right, transparent, transparent calc(50% - .5px), #d3d6db calc(50% - .5px), #d3d6db calc(50% + .5px), transparent calc(50% + .5px))
实现。无论宽高如何变,依然妥妥地自适应。

macOS

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

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

Squirrel

Squirrel是一个开源的框架,可以允许Electron应用自动升级到已经发布的最新版本。查看autoUpdater接口的使用Squirrel启动的信息。

开发体验如何?

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

打造你第一个 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>

libchromiumcontent

一个包含了Chromium内容模块和所有依赖(例如,Blink,V8等)的简单的共享库。

如何在渲染进程调用原生弹框?

在渲染进程中调用原本专属于主进程中的 API (如弹框)的方式有两种:

  1. IPC 通讯模块:先在主进程通过 ipcMain 进行监听,然后在渲染进程通过
    ipcRenderer 进行触发;
  2. remote 模块:该模块为渲染进程和主进程之间提供了快捷的通讯方式。

对于第二种方式,在渲染进程中,运行以下代码即可:

JavaScript

const remote = require(‘electron’).remote remote.dialog.showMessageBox({
type: ‘question’, buttons: [‘不告诉你’, ‘没有梦想’], defaultId: 0,
title: ‘XCel’, message: ‘你的梦想是什么?’ }

1
2
3
4
5
6
7
8
9
10
const remote = require(‘electron’).remote
 
remote.dialog.showMessageBox({
  type: ‘question’,
  buttons: [‘不告诉你’, ‘没有梦想’],
  defaultId: 0,
  title: ‘XCel’,
  message: ‘你的梦想是什么?’
}
 

主进程与渲染进程的区别

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

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

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

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

原文:https://github.com/electron/electron/blob/master/docs/glossary.md
译者:Lin

项目背景

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

快速入门

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

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

IPC

IPC是Inter-Process
Communication的简称。Electron使用IPC在主进程和渲染进程之间发送序列化的JSON消息。

关于作者:刘健超-J.c

图片 6

前端,在路上…
个人主页 ·
我的文章 ·
19 ·
    

图片 7

macOS / Linux

$ ./node_modules/.bin/electron .

main process

主进程,通常是一个叫做main.js的文件,是指向每一个Electron应用的入口。它控制着应用从打开到关闭的生命周期。它也管理着原生控件,比如MenuMenu BarDockTray等。主进程在应用中承担着创建每一个新的渲染进程的责任。全部的Node接口都在它里面。

每一个应用的主线程文件是在package.json文件中的main属性中被指定的。这是electron .如何知道启动时要执行哪个文件的原因。

参见:process,renderer
process

相关文章

发表评论

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

网站地图xml地图