Skip to main content

前端

1. 脚手架搭建 跳转到 Webpack 页面​

首先我们最好要有一套前端框架，可以帮助我们实现网页端快速开发和维护，比如Vue2、Vue3、React等等。

2. 引入 Electron​

React 创建 useElectron​

import { useMemo } from 'react';

const useElectron = () => useMemo(() => (window?.require?.('electron') ? window.require('electron') : null), []);

export default useElectron;

Vue main.js 引入 electron​

const electron = window?.require?.('electron');

//electron 进程通信
Vue.prototype.$electron = electron;

Vue 任意组件

//方式1：发送消息 window-min
this.$electron.ipcRenderer.send('window-min');

//方式2：发送并接收执行结果 window-max
this.$electron.ipcRenderer?.invoke('window-max').then((isWinSizeMax) => {
  console.log(isWinSizeMax);
});

使用 Electron消息API 与 Nodejs 通信​

React 任意组件

import { useElectron } from '@/hooks';

const electron = useElectron();

//方式1：发送消息 window-min
electron?.ipcRenderer.send('window-min');

//方式2：发送并接收执行结果 window-max
electron?.ipcRenderer?.invoke('window-max').then((isWinSizeMax) => {
  console.log(isWinSizeMax);
});

Nodejs 监听消息

//窗口 最小化
ipcMain.on('window-min', function () {
  const win = mainData.win;

  // 收到渲染进程的窗口最小化操作的通知，并调用窗口最小化函数，执行该操作
  win.minimize();
});

//窗口 最大化
ipcMain.handle('window-max', function () {
  const win = mainData.win;

  const { width, height } = screen.getPrimaryDisplay().workAreaSize;

  // 判断窗口是否已最大化
  if (win.isMaximized()) {
    console.log('窗口已最大化');
    win.unmaximize();
  } else {
    console.log('窗口未最大化');
    win.maximize();
  }

  //设置窗口居中
  const x = Math.floor((width - win.getSize()[0]) / 2);
  const y = Math.floor((height - win.getSize()[1]) / 2);

  win.setPosition(x, y);

  return win.isMaximized();
});

判断是否是 Electron 环境（是否是桌面端环境）​

我们可以通过 Electron 对象是否存在来区分是网页端还是桌面端以进行不同的策略。

多页应用的数据共享​

如果桌面端的弹窗是以多页应用为基础，那么会涉及到数据共享的问题(两个不同 url 的页面共用相同状态)，我的实践经验是在加载时将共享的数据值传递给运行时 Nodejs 来存储，其他页面写定时器 400ms 通过 invoke 主动向 Nodejs 获取状态。