01.安装、搭建项目
# 安装
mkdir electron-study-notes
cd electron-study-notes/
npm init -y
# 最好使用淘宝镜像，速度快
npm install electron --save-dev
# 主进程
在 Electron 里，运行 package.json 里 main 脚本的进程被称为主进程。在主进程运行的脚本可以以创建 web 页面的形式展示 GUI。
# 渲染进程
由于 Electron 使用 Chromium 来展示页面，所以 Chromium 的多进程结构也被充分利用。每个 Electron 的页面都在运行着自己的进程，这样的进程我们称之为渲染进程。
在一般浏览器中，网页通常会在沙盒环境下运行，并且不允许访问原生资源。然而，Electron 用户拥有在网页中调用 io.js 的 APIs 的能力，可以与底层操作系统直接交互。
# Electron 应用的目录结构
electron-study-notes/
├── package.json
├── main.js
└── index.html
package.json:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "electron ./main.js"
},
index.html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>最大最小化</title>
</head>
<body>
<div>
<button id="max">
最大化
</button>
<button id="min">最小化</button>
</div>
<script>
const {ipcRenderer} = require('electron')
const btn1 = document.querySelector('#max')
const btn2 = document.querySelector('#min')
btn1.addEventListener('click', ()=> {
ipcRenderer.send('change-frame', true)
})
btn2.addEventListener('click', ()=> {
ipcRenderer.send('change-frame', false)
})
</script>
</body>
</html>
main.js代码:
const { app, BrowserWindow, ipcMain } = require("electron");
const path = require("path");
let mainWindow;
app.on("ready", createWindow);
function createWindow() {
mainWindow = new BrowserWindow({
width: 1000,
height: 700,
// resizable: false,
// frame: false, //无边框窗口
webPreferences: {
nodeIntegration: true,
contextIsolation: false, // 解决渲染进程 报错 require is not defined
devTools: true,
webviewTag: true, //开启webview 标签 Electron >= 5 后需要开启
plugins: true,
enableRemoteModule: true,
nodeIntegrationInSubFrames: true,
},
});
mainWindow.webContents.openDevTools({
mode: "bottom",
});
mainWindow.loadURL(path.resolve(__dirname, "./index.html"));
mainWindow.on("close", () => {
mainWindow = null;
app.quit();
});
}
app.on("activete", () => {
if (mainWindow === null) {
createWindow();
}
});
ipcMain.on("change-frame", (event, arg) => {
if (arg === true) {
// 窗口最大化
mainWindow.maximize();
} else {
// 窗口最小化
mainWindow.minimize();
}
});