前言
本文包含打包、自動(dòng)更新、簡(jiǎn)易API、調(diào)試、進(jìn)程通信等相關(guān)知識(shí)點(diǎn)，內(nèi)容較多，請(qǐng)酌情查看。
electron
簡(jiǎn)介
Electron 是由 Github 開(kāi)發(fā)，是一個(gè)用 Html、css、JavaScript 來(lái)構(gòu)建桌面應(yīng)用程序的開(kāi)源庫(kù)，可以打包為 Mac、Windows、Linux 系統(tǒng)下的應(yīng)用。
Electron 是一個(gè)運(yùn)行時(shí)環(huán)境，包含 Node 和 Chromium，可以理解成把 web 應(yīng)用運(yùn)行在 node 環(huán)境中
結(jié)構(gòu)
Electron 主要分為主進(jìn)程和渲染進(jìn)程，關(guān)系如下圖
Electron 運(yùn)行 package.json 中的 main 字段標(biāo)明腳本的進(jìn)程稱為主進(jìn)程
在主進(jìn)程創(chuàng)建 web 頁(yè)面來(lái)展示用戶頁(yè)面，一個(gè) Electron 有且只有一個(gè)主進(jìn)程
Electron 使用 Chromium 來(lái)展示 web 頁(yè)面，每個(gè)頁(yè)面運(yùn)行在自己的渲染進(jìn)程中
快速開(kāi)始
接下來(lái)，讓代碼來(lái)發(fā)聲，雷打不動(dòng)的 hello world
創(chuàng)建文件夾，并執(zhí)行 npm init -y，生成 package.json 文件，下載 electron 模塊并添加開(kāi)發(fā)依賴
mkdir electron_hello && cd electron_hello && npm init -y && npm i electron -D
下載速度過(guò)慢或失敗，請(qǐng)嘗試使用cnpm，安裝方式如下
# 下載cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 下載electron
cnpm i electron -D
創(chuàng)建index.js，并寫入以下內(nèi)容
const {app, BrowserWindow} = require('electron')
// 創(chuàng)建全局變量并在下面引用，避免被GC
let win
function createWindow () {
// 創(chuàng)建瀏覽器窗口并設(shè)置寬高
win = new BrowserWindow({ width: 800, height: 600 })
// 加載頁(yè)面
win.loadFile('./index.html')
// 打開(kāi)開(kāi)發(fā)者工具
win.webContents.openDevTools()
// 添加window關(guān)閉觸發(fā)事件
win.on('closed', () => {
win = null // 取消引用
})
}
// 初始化后 調(diào)用函數(shù)
app.on('ready', createWindow)
// 當(dāng)全部窗口關(guān)閉時(shí)退出。
app.on('window-all-closed', () => {
// 在 macOS 上，除非用戶用 Cmd + Q 確定地退出，
// 否則絕大部分應(yīng)用及其菜單欄會(huì)保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上，當(dāng)單擊dock圖標(biāo)并且沒(méi)有其他窗口打開(kāi)時(shí)，
// 通常在應(yīng)用程序中重新創(chuàng)建一個(gè)窗口。
if (win === null) {
createWindow()
}
})
創(chuàng)建index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1 id="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>
最后，修改 packge.json 中的 main 字段,并添加 start 命令
{
...
main:'index.js',
scripts:{
"start": "electron ."
}
}
執(zhí)行 npm run start 后，就會(huì)彈出我們的應(yīng)用來(lái)。
調(diào)試
我們知道 Electron 有兩個(gè)進(jìn)程，主進(jìn)程和渲染進(jìn)程，開(kāi)發(fā)過(guò)程中我們需要怎么去調(diào)試它們呢？老太太吃柿子，咱們撿軟的來(lái)
渲染進(jìn)程
BrowserWindow 用來(lái)創(chuàng)建和控制瀏覽器窗口，我們調(diào)用它的實(shí)例上的API即可
win = new BrowserWindow({width: 800, height: 600})
win.webContents.openDevTools() // 打開(kāi)調(diào)試
調(diào)試起來(lái)是和 Chrome 是一樣的，要不要這么酸爽
主進(jìn)程
使用 VSCode 進(jìn)行調(diào)試
使用 VSCode 打開(kāi)項(xiàng)目，點(diǎn)擊調(diào)試按鈕
點(diǎn)擊調(diào)試后的下拉框
