Electron

electron主窗口退出前弹出确认提示框

 mainWindow.on('close', (e) => {
    e.preventDefault(); //先阻止一下默认行为，不然直接关了，提示框只会闪一下
    dialog
      .showMessageBox({
        type: 'info',
        title: '提示',
        message: '确认退出？',
        buttons: ['确认', '取消'], //选择按钮，点击确认则下面的idx为0，取消为1
        cancelId: 1, //这个的值是如果直接把提示框×掉返回的值，这里设置成和“取消”按钮一样的值，下面的idx也会是1
      })
      .then((idx) => {
        //注意上面↑是用的then，网上好多是直接把方法做为showMessageBox的第二个参数，我的测试下不成功
        if (idx.response == 1) {
          // console.log('index==1，取消关闭');
          e.preventDefault();
        } else {
          // console.log('index==0，关闭');
          app.exit();
        }
      });
  });

设置窗口的最大、最小宽高

创建窗口时设置最大宽度和最小宽度

const { app, BrowserWindow } = require('electron');

app.whenReady().then(() => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    minWidth: 400,
    minHeight: 300,
    maxWidth: 1200,
    maxHeight: 800
  });

  mainWindow.loadFile('index.html');
});

在窗口创建后设置最大宽度和最小宽度

const { app, BrowserWindow } = require('electron');

app.whenReady().then(() => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600
  });

  mainWindow.setMinimumSize(400, 300);
  mainWindow.setMaximumSize(1200, 800);

  mainWindow.loadFile('index.html');
});

不同分辨率屏幕下的宽高

const { app, BrowserWindow, screen } = require('electron');

app.whenReady().then(() => {
  // 获取主屏幕的尺寸 此方法需要在whenReady之后调用
  const { width, height } = screen.getPrimaryDisplay().workAreaSize;

  // 计算窗口的宽高（80% 的屏幕尺寸）
  const windowWidth = Math.floor(width * 0.8);
  const windowHeight = Math.floor(height * 0.8);

  // 创建窗口并设置宽高
  const mainWindow = new BrowserWindow({
    width: windowWidth,
    height: windowHeight
  });

  mainWindow.loadFile('index.html');
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

设置区域是否可以窗口拖动

.titlebar {
  -webkit-app-region: drag; /* 使整个标题栏区域可拖动 */
  background-color: #f2f2f2;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}
.titlebar-button {
  -webkit-app-region: no-drag; /* 禁用按钮区域的拖动 */
  width: 45px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.titlebar-button:hover {
  background-color: #e6e6e6;
}

设置发送系统通知的名称

app.setAppUserModelId('样普红外相机识别工具');

app.whenReady().then(async () => {
  // 获取主屏幕的尺寸
  const { width, height } = screen.getPrimaryDisplay().workAreaSize;
  // 计算窗口的宽高（80% 的屏幕尺寸）
  screenWidth = width;
  screenHeight = height;
  windowWidth = Math.floor(width * 0.75);
  windowHeight = Math.floor(height * 0.75) + 30; //30是顶部工具栏的高度
  // Set app user model id for windows设置窗口标题
  app.setAppUserModelId('样普红外相机识别工具');

  // Default open or close DevTools by F12 in development
  // and ignore CommandOrControl + R in production.
  // see https://github.com/alex8088/electron-toolkit/tree/master/packages/utils
  app.on('browser-window-created', (_, window) => {
    optimizer.watchWindowShortcuts(window);
  });

  // IPC test
  createWindow();

  //开启自动更新
  // autoUpdater(win);
  //注册ipc
  ipc(mainWindow, loginWindow);

  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

还原窗口设置子元素设置flex:1的弹性盒宽度不变，导致元素被挤出去

.left {
  flex: 1;
  min-width: 0;
  // width: 0;
  @include flex-c;
  border-right: #ffffff 1.0625rem solid;
  position: relative;
}

添加width:0;或者min-width:0;即可