增加多系统的窗口管理逻辑
js
const { BrowserWindow, app } = require("electron");
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
autoHideMenuBar: true, // 自动隐藏菜单栏
});
win.loadURL("https://blog.ddlyt.top/");
}
app.on("ready", () => {
createWindow();
app.on("activate", () => {
// mac 当窗口数量为0时 则启动一个新窗口
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
// windows 关闭所有窗口时 退出应用
app.on("window-all-closed", () => {
if (process.platform !== "darwin") app.quit();
});
创建桥梁
js
const { BrowserWindow, app } = require("electron");
const path = require("path");
const win = new BrowserWindow({
width: 800,
height: 600,
autoHideMenuBar: true,
webPreferences: {
preload: path.join(__dirname, "./preload.js"),
},
});
随后在根目录创建 preload.js
文件
js
const { contextBridge, ipcRenderer } = require("electron");
contextBridge.exposeInMainWorld("electronAPI", {
version: process.version, // 获取当前electron版本号
});
在渲染进程中访问主进程内容
js
consloe.log(electronAPI.version);
单向通信
js
// 主进程
const { app, BrowserWindow, ipcMain } = require("electron");
function writeFile(event, data) {
console.log(data); // 获取渲染进程传送过来的数据
}
function createWindow() {
// ... 此处省略
ipcMain.on("file-save", writeFile);
// ... 加载页面
}
js
// preload.js
const { contextBridge, ipcRenderer } = require("electron");
contextBridge.exposeInMainWorld("electronAPI", {
saveFile: (data) => {
ipcRenderer.send("file-save", data);
},
});
js
// 渲染进程
electronAPI.saveFile("发送数据");
双向通信
js
// 主进程
const { app, BrowserWindow, ipcMain } = require("electron");
function readFile(event, data) {
const res = fs.readFileSync("D:/hello.txt").toString();
return res; // 讲读取到的内容传回渲染进程
}
function createWindow() {
// ... 此处省略
ipcMain.handle("file-read", readFile);
// ... 加载页面
}
js
// preload.js
const { contextBridge, ipcRenderer } = require("electron");
contextBridge.exposeInMainWorld("electronAPI", {
readFile: () => {
return ipcRenderer.invoke("file-read");
},
});
js
// 渲染进程
const res = await electronAPI.readFile();
console.log(res);
判断当前是否为打包环境
js
// 主进程
const { app } = require("electron");
const isDev = !app.isPackaged;
通过文件对象获取文件路径 (electron ^v32.0.0)
js
//preload 预加载脚本
const { contextBridge, webUtils } = require("electron");
contextBridge.exposeInMainWorld("electron", {
showFilePath(file) {
const path = webUtils.getPathForFile(file);
alert(`Uploaded file path was: ${path}`);
},
});
评论 隐私政策