Electron

超级小的大杯柠檬水

发布于 2024-04-19 08:11:30

1030

发布于 2024-04-19 08:11:30

文章被收录于专栏：CYCY

Electron

.npmrc

安装electron依赖经常会不成功在项目目录下创建.npmrc文件，设置镜像地址 npm config set strict-ssl false

registry=https://registry.npmmirror.com
electron-mirror=https://registry.npmmirror.com/mirrors/electron/

热更新/热加载

方案一

安装：npm install electron-reloader --save-dev

在主进程 js 文件

try {
  require("electron-reloader")(module);
} catch (_) {}

重启

方案二

安装：npm i nodemon --D
修改scripts："start": "nodemon --watch index.js --exec electron ."
再次运行npm run start，仅当index.js内容变化时，就会自动重新执行electron .来重启应用

菜单栏与边框

app.on("ready", () => {
  mainWindow = new BrowserWindow({
    // 窗口位置
    x: 0,
    y: 0,
    //设置窗口宽高
    width: 400,
    height: 600,
    frame: false, // 无边框页面(同时菜单栏也不会显示，只是不会显示，可以通过快捷键操作)
  });
  mainWindow.removeMenu(); //去掉菜单栏
  mainWindow.loadFile("./src/main.html");
});

默认情况下，无边框窗口是不可拖拽的,可以通过设置

-webkit-app-region: drag来告诉Electron哪些区域是可拖拽的
-webkit-app-region: no-drag;来告诉Electron哪些区域是不可拖拽的

html,body {
  height: 100%;
  width: 100%;
}

body{
  -webkit-app-region: drag;
}

.enable-click {
  -webkit-app-region: no-drag;
}

系统托盘

程序启动时，将应用程序加入系统托盘。在 Electron 中，借助 Tray 模块实现。

//app 模块，控制整个应用程序的事件生命周期。
//BrowserWindow 模块，它创建和管理程序的窗口。
const { app, BrowserWindow, Tray, Menu } = require("electron");
const path = require("path");

const iconPath = path.join(__dirname, "./src/img/logo.png"); //应用运行时的标题栏图标

let mainWindow, tray;

//在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口
app.on("ready", () => {
  mainWindow = new BrowserWindow({
    // frame: false, // 无边框页面
    resizable: false, //不允许用户改变窗口大小
    width: 800, //设置窗口宽高
    height: 600,
    icon: iconPath, //应用运行时的标题栏图标
    webPreferences: {
      backgroundThrottling: false, //设置应用在后台正常运行
      nodeIntegration: true, //设置能在页面使用nodejs的API
      contextIsolation: false,
      preload: path.join(__dirname, "./preload.js"),
    },
  });
  mainWindow.removeMenu(); //去掉菜单栏（菜单栏的快捷键）
  //   mainWindow.loadURL(`file://${__dirname}/src/main.html`);
  mainWindow.loadFile("./src/main.html");
  //   系统托盘
  tray = new Tray(iconPath); //实例化一个tray对象，构造函数的唯一参数是需要在托盘中显示的图标url
  tray.setToolTip("Tasky"); //鼠标移到托盘中应用程序的图标上时，显示的文本
  tray.on("click", () => {
    //点击图标的响应事件，这里是切换主窗口的显示和隐藏
    if (mainWindow.isVisible()) {
      mainWindow.hide();
    } else {
      mainWindow.show();
    }
  });
  tray.on("right-click", () => {
    //右键点击图标时，出现的菜单，通过Menu.buildFromTemplate定制，这里只包含退出程序的选项。
    const menuConfig = Menu.buildFromTemplate([
      {
        label: "Quit",
        click: () => app.quit(),
      },
      {
        label: "Next Step",
        click: () => app.quit(),
      },
    ]);
    tray.popUpContextMenu(menuConfig);
  });
});

IPC 通信

以隐藏窗口为例

渲染进程 TO 主进程

// 页面文件
const { ipcRenderer } = require("electron");
ipcRenderer.send("mainWindow:close");

// index.js
const { ipcMain } = require("electron");
ipcMain.on("mainWindow:close", () => {
  mainWindow.hide();
});

主进程 TO 渲染进程

窗口置顶

mainWindow.setAlwaysOnTop(true); // 置顶

关闭窗口

// 提醒窗口会在一段时间后关闭，可以通过remindWindow.close()来关闭窗口。
// 当窗口关闭后，我们可以设置remindWindow = null来回收分配给该渲染进程的资源。
mainWindow.on("closed", () => {
  mainWindow = null;
});
mainWindow.close();