Electron-vue客户端开发总结

最近做了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) })
})