关于前端:Electronvue客户端开发总结

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