1. 前言
electron 官網:https://www.electronjs.org
electron 是跨平臺桌面應用開發工具,它兼容 mac、windows、linux,可以構建出三個平臺的應用程序
學習的好處:開發的應用程序,可以上架到應用商店獲得收益,也可以提高應聘時的競爭力,提高開發者的綜合能力
2. 安裝
初始化項目:運行以下命令即可,會生成一個 package.json 文件
npm init -y
安裝 electron 依賴,安裝中比較慢或遇到其他問題, 點擊查看解決方案
npm install -D electron
3. 初始化項目
如下所示,在 package.json 文件中可以看到主進程文件默認為 index.js,我們在項目根目錄下創建這個文件
{
"main": "index.js"
}
并且在 index.js 文件中添加以下代碼
const { BrowserWindow, app } = require('electron');
// 應用啟動后創建窗口
app.whenReady().then(() => {
const mainWindow = new BrowserWindow({
width: 300,
height: 300,
})
})
修改 package.json 文件,添加運行腳本,如下所示
{
"scripts": {
"dev": "electron ."
}
}
在項目根目錄,運行腳本命令就可以啟動 electron 了,會彈出一個窗口
npm run dev
4. 加載網頁或文件
const { BrowserWindow, app } = require('electron');
const path = require('path');
// 應用啟動后創建窗口
app.whenReady().then(() => {
const mainWindow = new BrowserWindow({
// 窗口大小
width: 300,
height: 300,
// 窗口置頂
alwaysOnTop: true,
// 窗口位置
x: 1500,
y: 100
})
// 加載網頁
// mainWindow.loadURL('http://www.837wan.com')
// 加載文件
mainWindow.loadFile(path.resolve(__dirname, 'index.html'))
})
5. 主進程和渲染進程
在 electron 應用程序中,主進程就是從 package.json 文件中的 main 腳本開始的進程。主進程中運行的 JS 可以調用操作系統的本地功能,因為它可以訪問 nodejs 標準庫。
主進程主要負責創建和控制瀏覽器窗口,管理應用程序的生命周期,以及運行應用程序的主要功能。主進程可以創建多個渲染進程,每一個渲染進程都是一個新的瀏覽器窗口或 web 頁面
根目錄下的 index.js 就是主進程文件,主進程中打印的結果會輸出到終端中
console.log('hello electron');
渲染進程負責運行用戶界面的 JS。每個 electron 都在其自己的渲染進程中運行
在默認情況下,渲染進程不能使用 nodejs 和 electron api,因為這可能產生安全問題
6. nodemon 刷新應用
在修改主進程文件后,每次都要重新執行 npm run dev
才會生效,如果想要修改為自動生效,可以使用 nodemon
安裝 nodemon 為運行時依賴
npm install -D nodemon
修改 package.json 文件,在 electron 啟動命令前面添加 nodemon --exec
即可
{
"scripts": {
"dev": "nodemon --exec electron ."
}
}
此時,當修改主進程文件 index.js 時,會自動刷新,但是它默認不監聽 html 文件的改動
在項目根目錄下創建配置文件 nodemon.json,將下面內容放入該文件就可以監聽 html 文件的修改了
{
"ignore": [
"dist",
"node_modules"
],
"colours": true,
"verbose": true,
"restartable": "rs",
"watch": [
"*.*"
],
"ext": "html,js"
}
7. 兼容 mac 系統的操作方式
mac 和 windows 不同,mac 的應用程序所有窗口都關閉,應用程序也不會退出
const { BrowserWindow, app } = require('electron');
const path = require('path');
// 創建窗口
const createWindow = () => {
const mainWindow = new BrowserWindow({
// 窗口大小
width: 300,
height: 300,
// 窗口置頂
alwaysOnTop: true,
// 窗口位置
x: 1500,
y: 100
})
// 加載文件
mainWindow.loadFile(path.resolve(__dirname, 'index.html'))
}
// 監聽應用啟動
app.whenReady().then(() => {
createWindow()
})
// 監聽所有窗口全部關閉
app.on('window-all-closed', () => {
// 當系統不是 mac 時,退出應用程序
console.log(process.platform);
if (process.platform != 'darwin') app.quit();
})
// 監聽應用激活
app.on('activate', () => {
createWindow()
})