Electron自定义窗口

1.首先在min.js中配置 frame:false 关闭原生头部窗口

    function createWindow () {
        setTimeout(()=>{
            mainWindow = new BrowserWindow({
                width: 1040,
                height: 800,
                // 关闭顶部菜单栏
                frame:false,
                // 全屏显示
                fullscreen: true,
                webPreferences: {
                  nodeIntegration: true // 是否完整支持node
                },
                show: true
              })
              mainWindow.maximize();
              mainWindow.loadURL(
                url.format({
                  pathname: path.join(__dirname, `/dist/index.html`),
                  protocol: "file:",
                  slashes: true
                })
              );
              mainWindow.on('ready-to-show', function () {
                console.log("ready")
                mainWindow.show();
              })
              mainWindow.on('closed', function () {
                mainWindow = null
              })
        },5000)
    }
    app.on('ready', createWindow)

2. 第二步：写窗口样式

3. 第三步：在页面中配置以及调用 最小化，关闭 窗口方法

在main.js添加

// 关闭
ipcMain.on('close-app', () => {
    if (mainWindow) {
      mainWindow.close()
    }
})
  //最小化
ipcMain.on('min-app', () => {
    mainWindow.minimize()
})

mcs.html文件中添加按钮 点击事件调用方法

 <button (click)="toMin()"> — </button>
 <button (click)="toClose()"> X </button>

mcs.js 文件中方法写入

// 窗口最小化
toMin () {
  this.ipc.send('min-app')
}
// 关闭窗口
toClose () {
  this.ipc.send('close-app')
}