1.简介
先来段代码感受下~~
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
varwindow =null;
app.on('ready',function() {
window =newBrowserWindow({width: 800, height: 600});
window.loadURL('https://web.itiger.com');
});
看起来像个普通的nodejs脚本。
官网介绍：仅仅使用JavaScript，HTML，CSS搭建跨平台桌面应用。
使用Chromium和Node.js。相当于一个浏览器的壳，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。所以可以随意的使用JavaScript，HTML，CSS开发。
跨平台：Windows，OS X，Linux....
2.主进程和渲染进程
2.1 主进程
在 Electron 里，运行package.json里main脚本的进程被称为主进程。在主进程运行的脚本可以创建 web 页面的形式展示 GUI。
2.2 渲染进程
由于 Electron 使用 Chromium 来展示页面，所以 Chromium 的多进程结构也被充分利用。每个 Electron 的页面都在运行着自己的进程，这样的进程我们称之为渲染进程。
2.3 主进程与渲染进程的区别
主进程使用 BrowserWindow 实例创建网页。每个 BrowserWindow 实例都在自己的渲染进程里运行着一个网页。当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。
主进程管理所有页面和与之对应的渲染进程。每个渲染进程都是相互独立的，并且只关心他们自己的网页。
由于在网页里管理原生 GUI 资源是非常危险而且容易造成资源泄露，所以在网页面调用 GUI 相关的 APIs 是不被允许的。如果你想在网页里使用 GUI 操作，其对应的渲染进程必须与主进程进行通讯，请求主进程进行相关的 GUI 操作。
2.4 主进程与渲染进程通信
使用IPC模块
一个例子，在主进程和渲染进程之间发送和处理消息:
//主进程
const ipcMain = require('electron').ipcMain;
ipcMain.on('asynchronous-message',function(event, arg) {
console.log(arg);// "pilipala"
event.sender.send('asynchronous-reply','hahahhaha');
});
// 渲染进程
const ipcRenderer = require('electron').ipcRenderer;
console.log(ipcRenderer.sendSync('synchronous-message','pilipala'));
ipcRenderer.on('asynchronous-reply',function(event, arg) {
console.log(arg);// "hahahhaha"
});
3. Electron API介绍
有些模块在主进程使用，有的在渲染进程使用，有些在主进程和渲染进程都可以
主进程API模块
3.1Electron BrowserWindow 模块
来段代码感受下~
const BrowserWindow = require('electron').remote.BrowserWindow;
varwin =newBrowserWindow({ width: 800, height: 600, show:false});
win.on('closed',function() { win =null; });
win.loadURL('https://web.itiger.com');
win.show();
new BrowserWindow 时很多参数，设置窗口大小，位置，是否全屏，阴影。title。主题等
参数：https://electron.atom.io/docs/api/browser-window/#new-browserwindowoptions
事件https://electron.atom.io/docs/api/browser-window/#instance-events
3.2 Electron webContents 模块
它负责渲染并控制网页，也是BrowserWindow对象的属性.
来段代码：
const BrowserWindow = require('electron').BrowserWindow;
varwin =newBrowserWindow({width: 800, height: 1500});
win.loadURL("https://web.itiger.com");
varwebContents = win.webContents;
检测网页内容的事件：https://electron.atom.io/docs/api/web-contents/#instance-events
3.3Electron ipcMain 模块
ipcMain模块是类EventEmitter(node 事件监听类)的实例.当在主进程中使用它的时候，它控制着由渲染进程(web page)发送过来的异步或同步消息.从渲染进程发送过来的消息将触发事件.
3.4Electron dialog 模块
来段代码：
const {dialog} = require('electron')
dialog.showOpenDialog({
properties:
['openFile','openDirectory','multiSelections']
})
支持不同的弹窗
方法：https://electron.atom.io/docs/api/dialog/#methods
实现效果：
3.5Electron menu 模块
menu类可以用来创建原生菜单，它可用作应用菜单和context 菜单.
来段代码：
const { app, Menu } = require('electron')
const template = [{
label: app.getName(),
submenu: [{
role:'reload'
}, {
type:'separator'
}, {
role:'hide'
}, {
role:'hideothers'
}, {
type:'separator'
}, {
role:'quit'
}]
}]
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
例子：
https://electron.atom.io/docs/api/menu/#examples
3.6Electron global-shortcut 模块
global-shortcut模块可以自定义操作的快捷键。注册的快捷键是系统全局的。
渲染进程模块
3.7 Electron ipcRenderer 模块
ipcRenderer模块是一个EventEmitter类的实例。你可以从渲染进程向主进程发送同步或异步消息. 也可以收到主进程的相应.
两个进程都可用的模块
3.8Electron crashReporter 模块
crash-reporter模块开启发送应用崩溃报告.
来段代码~~自动提交崩溃报告给服务器 :
const crashReporter = require('electron').crashReporter;
crashReporter.start({
productName:'YourName',
companyName:'YourCompany',
submitURL:'https://your-domain.com/url-to-submit',
autoSubmit:true});
4. tigertrade-desktop-app 项目介绍
4.1 目录结构
app --- 打包给用户的目录
build --- 构建目录 包括需要用到的证书，logo等
dist ----- 打包后
Two-Package Structure
两个package.json文件，原因：分离开发依赖和生成环境依赖
4.2 代码介绍
......
4.3 打包
electron-packager和electron-builder的选择
electron-builder是基于 electron-packager 实现的，并在此基础上做了 Two-Package.json Structure 的约定，以及自动更新等等功能。
扩展：
eletron和nw.js的区别
NW.js 原名 node-webkit
Electron 的原名是 Atom Shell
1. 应用的入口
在 NW.js 中，一个应用的主入口是一个页面。你在package.json中指定一个主页面，它会作为应用的主窗口被打开。
在 Electron 中，入口是一个 JavaScript 脚本。不同于直接提供一个URL，你需要手动创建一个浏览器窗口，然后通过 API 加载 HTML 文件。你还可以监听窗口事件，决定何时让应用退出。
2. Electron 的工作方式更像 Node.js 运行时。 Electron 的 APIs 更加底层
相关资源：
网友评论