最近做了Electron-vue相關的客戶端開發(fā)

做出了如下總結：

利用new BrowserWindow()方法創(chuàng)建窗口對象

能滿足開發(fā)項目的窗口屬性有

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同級節(jié)點加上

frame: false,// 去除頂部操作按鈕

微信截圖_20200927215509.png

自定義最小化征冷、最大化止吁、關閉窗口按鈕功能實現(xiàn)：

在主進程中寫入以下代碼段

// 控制窗口大小以及關閉
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分別為窗口移動的方位和像素衰粹，為正負數(shù)值
        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) })
})