最近做了Electron-vue相干的客户端开发
做出了如下总结：
利用new BrowserWindow()办法创立窗口对象
能满足开发我的项目的窗口属性有
win = new BrowserWindow({ width: 700, height: 600, minWidth:1000, minHeight:600, // 文档https://www.w3cschool.cn/electronmanual/electronmanual-browser-window.html webPreferences: { nodeIntegration: true, webviewTag: true, webSecurity: false, allowDisplayingInsecureContent: true, allowRunningInsecureContent: true, },})如果想把客户端窗口顶部菜单去掉
在webPreferences同级节点加上
frame: false,// 去除顶部操作按钮
自定义最小化、最大化、敞开窗口按钮性能实现：
在主过程中写入以下代码段
// 管制窗口大小以及敞开ipcMain.on('close', () => { win.destroy();})// 窗口最小化ipcMain.on('toMinimize', () => { win.minimize();})// 窗口最大化和还原ipcMain.on('toMaximize', () => { if (win.isMaximized()) { win.unmaximize(); } else { win.maximize(); }})如果想拖拽窗口利用如下办法：
首先在vue的main.js中引入electron的ipcRenderer
Vue.prototype.$electron = window.require('electron').ipcRenderer设置专用vue组件为窗口顶部，id为web-top
在mounted中写入
let _this = this;dragElement(document.getElementById(("web-top")));function dragElement(elmnt) { let [pos1,pos2,pos3,pos4] = [0,0,0,0]; if (document.getElementById(elmnt.id + "header")) { document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown; } else { elmnt.onmousedown = dragMouseDown; } function dragMouseDown(e) { e = e || window.event; pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; document.onmousemove = elementDrag; } function elementDrag(e) { e = e || window.event; // e.movementX、e.movementY别离为窗口挪动的方位和像素，为正负数值 var param = e.movementX + "," + e.movementY; _this.$electron.send('changeWinPosition',param); } function closeDragElement() { document.onmouseup = null; document.onmousemove = null; }}在主过程中写入
// 拖拽调整窗口地位ipcMain.on('changeWinPosition', (event, arg) => { let [x,y] =[0,0]; x = arg.split(",")[0]; y = arg.split(",")[1]; win.setBounds({ x: win.getPosition()[0] + parseInt(x), y: win.getPosition()[1] + parseInt(y) })})