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

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

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

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

遇到问题

遇到__dirname is not defined in ES module scope

//在VUE文件中使用
import  ipcRenderer from 'electron';// 会爆出__dirname is not defined in ES module scope的问题
// 原因是__dirname是commonjs规范的内置变量；esm不会注入这个变量
// 解决：删除package.json中的 type:"moudle"

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

// 原因：以下代码放置的位置原因，放在了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 "

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 definedipcMain.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

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文件中使用

<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打包白屏问题