增加多系统的窗口管理逻辑

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}`);
  },
});
评论 隐私政策