开发中遇到Electron自定义窗口的问题

使用VUE3 + Electron 开发一个音乐软件，自定义导航栏的放大、缩小和关闭。

其中使用ipcRenderer进行联系Electron，进行放大、缩小和关闭操作。

遇到问题

遇到__dirname is not defined in ES module scope

js 复制代码

//在VUE文件中使用
import  ipcRenderer from 'electron';

// 会爆出__dirname is not defined in ES module scope的问题
// 原因是__dirname是commonjs规范的内置变量；esm不会注入这个变量
// 解决：删除package.json中的 type:"moudle"

遇到mainWindow is not Defined 和重置窗口没有变化

js 复制代码

// 原因：以下代码放置的位置原因，放在了mainWindow作用域外
// 切换全屏事件
ipcMain.on('toggle-full-screen', function() {
  if (mainWindow.isMaximized()) {
      // 之前使用的是 mainWindow.restore();
    mainWindow.unmaximize();
  } else {
    mainWindow.maximize();
  }
});

// 最小化窗口事件
ipcMain.on('minimum', function() {
  mainWindow.minimize();
});

解决方案

electron.js 设置

electron.js ： package.json指定的"main": "electron.js "

js 复制代码

const { app,ipcMain , BrowserWindow } = require('electron')
const path = require("path")

const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 700,
    minWidth: 1200,
    minHeight: 700,
    frame: false,
    transparent: true,
    resizable: false,
    webPreferences:{
      nodeIntegration: true, // 是否允许在页面中使用节点js 通信需要
      contextIsolation: true, // 不启用上下文隔离 通信需要
      enableRemoteModule: true, // 允许使用 remote 模块
      preload:path.join(__dirname, 'preload.js'),
  }
  })
  mainWindow.loadURL("http://localhost:5173/");
    // 下面两个事件需要在createWindow内，在外面会报mainWindow is not defined

    ipcMain.on('toggle-full-screen', function() {  // 切换全屏事件
      if (mainWindow.isMaximized()) {
        mainWindow.unmaximize();

      } else {
        mainWindow.maximize();
      }
    });
    
    ipcMain.on('minimum', function() {  // 最小化窗口事件
      mainWindow.minimize();
    });
}

app.whenReady().then(() => { // 在应用准备就绪时调用函数
  createWindow()
})
ipcMain.on('closeProgram', () => { // 关闭程序
  app.quit();
});

新建 preload.js

js 复制代码

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('ipcRenderer', {
  send: (channel, data) => {
    let validChannels = ['toggle-full-screen','minimum','closeProgram'] // 配置合法消息名
    if (validChannels.includes(channel)) {
      ipcRenderer.send(channel, data)
    }
  },
  receive: (channel, func) => {
    let validChannels = ['toggle-full-screen','minimum','closeProgram']// 配置合法监听事件名称
    if (validChannels.includes(channel)) {
      ipcRenderer.on(channel, (event, ...args) => func(...args))
    }
  }
})

alert('1')//没弹窗就是失败了 成功后删除

VUE文件中使用

vue 复制代码

<script>
export default {
  methods: {
     minimizeWin(){ // 通知主进程我要进行窗口最小化操作
      window.ipcRenderer.send('minimum','');
      // console.log('minimizeWin');
    },
    maximizeWin(){  // 通知主进程我要进行窗口最大化操作
      window.ipcRenderer.send('toggle-full-screen','');
    // console.log('maximizeWin');
    },
    closeWin(){  // 通知主进程我要进行窗口关闭操作
      //返回一个所有已经打开了窗口的对象数组
      window.ipcRenderer.send('closeProgram','');
      // console.log('closeWin');
    }
  }
}
</script>

<template>
  <el-row class="row-head" >
      <!-- 最小化 -->
    <el-button type="button" class="btn btn-primary" id="minimizeWin" @click="minimizeWin"   style="height: 40px; width: 20%;"></el-button>
       <!-- 最大化 -->
    <el-button type="button" class="btn btn-primary" id="maximizeWin" @click="maximizeWin"  style="height: 40px; width: 20%;"></el-button>
       <!-- 关闭 -->
     <el-button type="button" class="" id="closeWin" @click="closeWin"  style="height: 40px;width: 20%;"></el-button>
  </el-row>
</template>

参考

vite+vue3+electron踩坑记录ipcRenderer通信，vue-router打包白屏问题