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 更加底層
相關資源：
