package.json 文件npm init -y
electronnpm instsll electron -Spackage.json 下配置执行脚本nodemon"scripts": {
"start": "nodemon --exec electron . --watch ./ --ext .html,.js,.css"
},
main.js 文件const { app, BrowserWindow } = require("electron");
// 主进程
const createWindow = () => {
const win = new BrowserWindow({
// 窗口大小
width: 1400,
height: 800,
// 最小的窗口大小
minHeight: 300,
minWidth: 400,
// 窗口是否显示
show: true,
// 是否可以拖动
movable: true,
// 是否有顶部状态栏，拖动条
// frame: false,
// 导致隐藏的标题栏和完整大小的内容窗口
// titleBarStyle: "default",
// 窗口初始背景颜色
backgroundColor: "aliceblue",
});
// 打开调试工具
win.webContents.openDevTools();
// 给窗口转载页面
win.loadFile("./render/index.html");
win.once("ready-to-show", () => {
win.show();
});
};
app.on("window-all-closed", () => {
console.log("window-all-closed");
// 对于 MACOS 系统，关闭窗口时，不会直接推出应用
if (process.platform !== "darwin") {
app.quit();
}
});
app.whenReady().then(() => {
createWindow();
// 在 MacOS 下，当全部窗口关闭，点击 dock 图标，窗口再次打开。
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
// console.log(app.isReady())
// console.log(app.getPath('desktop'))
// console.log(app.getPath('music'))
// console.log(app.getPath('temp'))
// console.log(app.getPath('userData'))
// console.log(BrowserWindow.getAllWindows().length)
});
process.env["ELECTRON_DISABLE_SECURITY_WARNINGS"] = "true";
render 里面创建入口文件 index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <meta http-equiv="Content-Security-Policy" content="script-src 'self' unsafe-eval"> -->
<title>Document</title>
</head>
<body>
<h1>第一个 electron 项目</h1>
</body>
</html>
--根目录
--controller 封装的主线程收发数据
--ipcMessage.js
--preload contextBridge 方法，主线程和渲染线程沟通的桥梁
--index.js
--render 加载的页面入口
--app.js
--index.html
--style.css
--vue.global.js vue的项目包,本示例页面使用 vue3
--main.js 项目入口
contextBridge 方法，将主线程的信息发送到渲染线程// 例，将 electron 和 node 版本号发往渲染现线程
const { contextBridge } = require("electron");
// 发送 ，该信息的 key 为 myAPI
contextBridge.exposeInMainWorld("myAPI", {
versions: process.versions,
});
// 页面中获取方法
const versions = window.myAPI.versions;
// 获取版本号
// chromeVersion: versions.chrome,
// NodeVersion: versions.node,
// electronVersion: versions.electron
ipcRenderer.send('事件名'，'信息')发送消息，此操作在 contextBridge 中ipcMain 接收，使用方法 event.sender.send 返回内容// --------------contextBridge------------------
// 创建方法 sendSync 发送消息
const sendSync = (message) => {
ipcRenderer.send("sync-send-event", message);
};
// 讲方法抛出到 渲染线程调用
contextBridge.exposeInMainWorld("myAPI", {
sendSync,
});
// -----------------渲染线程--------------------------
// 渲染线程调用
myAPI.sendSync("from renderer message 1");
// -----------------------主线程--------------------
// 主线程接受数据
// 同步事件监听
ipcMain.on("sync-send-event", (event, msg) => {
// console.log(msg);
// 使用参数 event 的方法 返回消息
event.sender.send("sync-receive-event", "我已经收到：" + msg);
});
contextBridge 接收消息，并将方法抛出到渲染线程，渲染线程创建事件监听// -----------------contextBridge-------------------
// 使用 ipcRenderer.on 创建时间同步监听
const recieveSyncMsg = () => {
return new Promise((resolve) => {
ipcRenderer.on("sync-receive-event", (event, msg) => {
// console.log(msg)
resolve(msg);
});
});
};
// 将事件 recieveSyncMsg 发送到渲染线程
contextBridge.exposeInMainWorld("myAPI", {
recieveSyncMsg,
});
// --------------------渲染线程-------------------
// 使用async await 创建同步事件监听
async mounted(){
const result = await myAPI.recieveSyncMsg();
}
以上是一套完整的渲染线程发送数据 -> 主线程接受数据并返回 -> 渲染线程接收返回数据 的过程
ipcRenderer.invoke 方法，发送数据的方法在 contextBridge 中使用，同样将方法抛出到渲染线程的 js 文件调用ipcMain.handle// --------------contextBridge-------------------
// 发送请求的方法 ipcRenderer.invoke 的第一个参数是本次请求的 key，第二个参数可有可无, 使用 return 给渲染线程返回数据
const sendAsync = async () => {
const result = await ipcRenderer.invoke("my-invokable-ipc");
return result;
};
// 讲方法 抛出到渲染线程的页面
contextBridge.exposeInMainWorld("myAPI", {
sendAsync,
});
// ----------------渲染线程---------------------------
// 如果有桥接的方法(contextBridge)，建议IPC通信，全部应用异步。
// 点击事件的方法
async sendAsyncMsg() {
const result = await myAPI.sendAsync()
console.log(result)
}
// --------------主线程就收数据和返回数据--------------------
// 异步事件监听
// 如果渲染线程有数据传来可以使用 args 接收
ipcMain.handle('my-invokable-ipc', async (event, ...args) => {
const result = await somePromise()
return result
})
// 写一个异步函数，模拟异步方法，三秒后返回数据
function somePromise() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('message from main process.')
}, 3000)
})
}