【无标题】

Electron

.npmrc

安装electron依赖经常会不成功

在项目目录下创建.npmrc文件,设置镜像地址
npm config set strict-ssl false

javascript 复制代码
registry=https://registry.npm.taobao.org
electron-mirror=https://npm.taobao.org/mirrors/electron/

热更新/热加载

方案一

  1. 安装:npm install electron-reloader --save-dev

  2. 在主进程 js 文件

    javascript 复制代码
    try {
      require("electron-reloader")(module);
    } catch (_) {}
  3. 重启

方案二

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

菜单栏与边框

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

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

  1. -webkit-app-region: drag来告诉Electron哪些区域是可拖拽的
  2. -webkit-app-region: no-drag;来告诉Electron哪些区域是不可拖拽的
CSS 复制代码
html,body {
  height: 100%;
  width: 100%;
}

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

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

系统托盘

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

javascript 复制代码
//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 主进程

javascript 复制代码
// 页面文件
const { ipcRenderer } = require("electron");
ipcRenderer.send("mainWindow:close");
javascript 复制代码
// index.js
const { ipcMain } = require("electron");
ipcMain.on("mainWindow:close", () => {
  mainWindow.hide();
});

主进程 TO 渲染进程

窗口置顶

javascript 复制代码
mainWindow.setAlwaysOnTop(true); // 置顶

关闭窗口

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

访问后页面注入脚本

javascript 复制代码
相关推荐
李刚大人26 分钟前
react-amap海量点优化
前端·react.js·前端框架
程楠楠&M11 小时前
node.js第三方Express 框架
前端·javascript·node.js·express
盛夏绽放11 小时前
Node.js 和 Socket.IO 实现实时通信
前端·后端·websocket·node.js
想自律的露西西★12 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5
彪82512 小时前
第十章 JavaScript的应用 习题
javascript·css·ecmascript·html5
Roc.Chang13 小时前
macos 使用 nvm 管理 node 并自定义安装目录
macos·node.js·nvm
hummhumm15 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
怕冷的火焰(~杰)15 小时前
Node基本使用
node.js
幼儿园的小霸王16 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
_半夏曲17 小时前
node.js、nginx、iis、tomcat针对部署方面的简述
nginx·node.js·tomcat