Electron學習筆記（Mac）
參考資料：官方指南中文版快速入門
官網例子Electron-quick-start
quick-start安裝與運行
值得注意的是，這是一個不完整的應用，需要通過terminal來啟動。
# 從GitHub克隆到本地
$ git clone https://github.com/electron/electron-quick-start
# 切換到quick start目錄
$ cd electron-quick-start
# 安裝依賴庫，并運行程序
$ npm install && npm start
# 關閉程序, 或在程序運行時使用Command+Q來退出程序
$ Control + C
安裝依賴庫的事件可能會比較久，耐心一點等待。
運行之后界面如圖：
Paste_Image.png
Hello World!
We are using Node.js 7.4.0, Chromium 56.0.2924.87, and Electron 1.6.5.
quick-start目錄結構
--- electron-quick-start
|--- + node_modules
|--- - package.json
|--- - main.js
|--- - index.html
|--- - renderer.js
|--- - README.md
|--- - LICENSE.md
package.json文件
package.json提供應用的基本信息
-
name字段表示應用或是程序名稱為electron-quick-start; -
version顯示當前程序的版本號為1.0.0 -
main字段聲明的main.js為程序的啟動腳本程序，它運行在主進程上。當未聲明時，Electron會優先加載index.js;
# package.js文件內容（quick-start）
{
"name": "electron-quick-start",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"repository": "https://github.com/electron/electron-quick-start",
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"electron": "~1.6.2"
}
}
main.js文件
main.js文件用于創建窗口和處理系統事件
/********************
** main.js文件內容 **
********************/
// 導入electron模塊
const electron = require('electron')
// 應用生命控制app
const app = electron.app
// 創建一個原生瀏覽器窗口
const BrowserWindow = electron.BrowserWindow
// 引入path和URL模塊
const path = require('path')
const url = require('url')
// 保持對窗口對象的全局引用
// 否則，窗口對象會在JS對象垃圾回收時自動關閉
let mainWindow
function createWindow () {
// 創建瀏覽窗口
mainWindow = new BrowserWindow({width: 800, height: 600})
// 加載app的index.html文件
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// Open the DevTools.打開開發者工具DevTools
// mainWindow.webContents.openDevTools()
// Emitted when the window is closed. 當窗口被關閉時，觸發此事件
mainWindow.on('closed', function () {
// 取消引用 window 對象，如果你的應用支持多窗口的話，
// 通常會把多個 window 對象存放在一個數組里面，
// 與此同時，你應該刪除相應的元素。
mainWindow = null
})
}
// Electron初始化完成，并準備好創建瀏覽窗口之后
// 調用函數createWindow
// 一些API也只有在此事件（ready）觸發之后才能使用
app.on('ready', createWindow)
// 當所有窗口被關閉時，即事件window-all-closed被觸發后，退出程序
app.on('window-all-closed', function () {
// 對于MacOS用戶，往往需要使用command+q完全退出程序
// 否則，絕大部分其菜單欄會保持激活狀態。即程序并未完全退出。
// 對于非Darwin平臺來講，如Windows，則直接退出程序
if (process.platform !== 'darwin') {
app.quit()
}
})
// 若程序activate事件被觸發時，執行該操作，創建一個新窗口
app.on('activate', function () {
// 在Mac系統中，若其他窗口都已關閉，點擊dock面板上的程序圖標時
// 會重新創建一個窗口
if (mainWindow === null) {
createWindow()
}
})
// 在這文件，你可以續寫應用剩下主進程代碼。
// 也可以拆分成幾個文件，然后用 require 導入。
index.html文件
實際自己的程序時，假若已有一個網頁就搞定的程序，可以直接將此index.html文件替換為自己的文件即可。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<!-- 再次渲染進程中，你可以使用任何Node.js的API -->
We are using Node.js <script>document.write(process.versions.node)</script>,
Chromium <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
<script>
// 同樣的，你也可以在此進程中引入其他文件
require('./renderer.js')
</script>
</html>
運行程序
預編譯運行electron-prebuilt
- 如果使用
npm安裝了Electron，則electron模塊內包含了所有使用的預編譯版本。
可以直接在程序主目錄下使用$ electron .命令來運行你的程序； - 若是局部安裝，則需要添加
electron模塊的相對路徑，比如Mac系統內為$ .node_modules/.bin/electron .。
發行版本運行
應用部署
1. 拷貝所有資源文件來分發程序
下載prebuilt binaries, 可以選擇下載最新版本，也可以選擇其他的。比如electron-v1.3.15-darwin-x64.zip。解壓后，得到同名文件夾， 其目錄結構如下：
--- electron-v1.3.15-darwin-x64.zip
|--- Electron
|--- LICENSE
|--- LICENSES.chromium.html
|--- version
右鍵查看Electron--> “查看包內容”，目錄結構如下：
--- Electron
|--- + Frameworks
|--- + MacOS
|--- + Resources
|--- Info.plist
|--- PkgInfo
然后，將程序應用，如electron-quick-start，改名為app。 electron-quick-start <u>重命名為--></u> app。并將app放置在Electron資源文件夾Resources內,：
electron/Electron.app/Contents/Resources/app/
├── package.json
├── main.js
└── index.html
├── ...
到此，拷貝資源方式來分發一個完整的APP應用就完成了。
2. 打包為asar文件防止源代碼暴露
asarGitHub地址點擊asar。安裝時，強烈建議<u>全局安裝</u>。
打包app.asar文件，其他可以教程可以參考其GitHub教程。
$ npm install -g asar
$ asar -V
######V1.30.0######
$ asar pack electron-quick-start app.asar
打包完成之后，將app.asar復制到Electron資源文件夾下，替代原先的app資源文件。
electron/Electron.app/Contents/Resources/
└── app.asar
打開Electron APP圖標運行，正常運行說明打包成功。
重命名是件復雜的事情，建議不要手動來操作。手動改名點這里
第三方打包工具
npm來安裝第三方庫工具，具體安裝方式詳見各自README文件。
