前言
本文包含打包攒霹、自動(dòng)更新怯疤、簡易API、調(diào)試催束、進(jìn)程通信等相關(guān)知識(shí)點(diǎn)集峦，內(nèi)容較多，請(qǐng)酌情查看。
electron
簡介
Electron 是由 Github 開發(fā)少梁，是一個(gè)用 Html、css凯沪、JavaScript 來構(gòu)建桌面應(yīng)用程序的開源庫，可以打包為 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 頁面來展示用戶頁面铺敌，一個(gè) Electron 有且只有一個(gè)主進(jìn)程
Electron 使用 Chromium 來展示 web 頁面，每個(gè)頁面運(yùn)行在自己的渲染進(jìn)程中
快速開始
接下來屁擅，讓代碼來發(fā)聲偿凭，雷打不動(dòng)的 hello world
創(chuàng)建文件夾，并執(zhí)行 npm init -y派歌，生成 package.json 文件弯囊，下載 electron 模塊并添加開發(fā)依賴
mkdir electron_hello && cd electron_hello && npm init -y && npm i electron -D
下載速度過慢或失敗，請(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 })
// 加載頁面
win.loadFile('./index.html')
// 打開開發(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)并且沒有其他窗口打開時(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)用來羊赵。
調(diào)試
我們知道 Electron 有兩個(gè)進(jìn)程趟佃，主進(jìn)程和渲染進(jìn)程扇谣，開發(fā)過程中我們需要怎么去調(diào)試它們呢？老太太吃柿子闲昭，咱們撿軟的來
渲染進(jìn)程
BrowserWindow 用來創(chuàng)建和控制瀏覽器窗口罐寨，我們調(diào)用它的實(shí)例上的API即可
win = new BrowserWindow({width: 800, height: 600})
win.webContents.openDevTools() // 打開調(diào)試
調(diào)試起來是和 Chrome 是一樣的，要不要這么酸爽
主進(jìn)程
使用 VSCode 進(jìn)行調(diào)試
使用 VSCode 打開項(xiàng)目序矩，點(diǎn)擊調(diào)試按鈕
點(diǎn)擊調(diào)試后的下拉框
