关于前端:客户端开发Electron认识窗口2

Dear，大家好，我是“前端小鑫同学”，😇长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～

Electron 是一个应用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 容许您放弃一个 JavaScript 代码代码库并创立在 Windows 上运行的跨平台利用 macOS 和 Linux——不须要本地开发教训。

调整窗口的宽高尺寸统一，是窗口变为正方形；
调整窗口为通明，成果如下图显示；
放弃 frame 属性为 false，仍然由咱们本人来定义边框和标题栏；
通常这样的窗口不须要反对窗口大小的调整，咱们将属性 resizable 设置为 false；
接着咱们将窗口最大化的属性也禁用一下。

残缺代码如下 ：

const win = new BrowserWindow({
    width: 380,
    height: 380,
    transparent: true,
    frame: false,
    resizable: false,
    maximizable: false,
    show: false,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      // nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      // contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true
    }
  })

调整根组件款式，使之成为圆形：

html,
body {
  margin: 0px;
  padding: 0px;
  pointer-events: none;
}
#app {
  box-sizing: border-box;
  width: 380px;
  height: 380px;
  border-radius: 190px;
  border: 1px solid green;
  background: #fff;
  overflow: hidden;
  pointer-events: auto;
  text-align: center;
}

当初的成果如下图，四个角的色彩是桌面的壁纸的色彩。

此时咱们只是看起来是个圆形，然而四个角的局部触发的事件还是在窗口中，咱们要做点击穿透；

应用 API：win.setIgnoreMouseEvents 来动静设置是否疏忽鼠标事件；

window.addEventListener('mousemove', event => {
  const flag = event.target === document.documentElement
  if (flag) {win.setIgnoreMouseEvents(true, { forward: true})
  } else {win.setIgnoreMouseEvents(false)
  }
})
win.setIgnoreMouseEvents(true, { forward: true})

重写窗口敞开的解决（确认后再敞开）：

window.onbeforeunload = function () {const { dialog} = remote
  dialog.showMessageBox(win, {
    type: 'warning',
    title: '来到此网站？',
    message: '零碎可能不会保留您所做的更改。',
    buttons: ['来到', '勾销']
  })
    .then((res) => {if (res.response === 0) {win.destroy()
    }
  })
  return false
}

开启一个模态窗口，咱们只有在敞开新关上的模块窗口后能力在原窗口持续操作，和模态 Dialog 一样；
```
this.win = new remote.BrowserWindow({parent: remote.getCurrentWindow(),
  modal: true,
  webPreferences: {nodeIntegration: true}
})
```
总结：

对于 Electron 的窗口就先介绍这么多，下一篇将开启界面相干内容的学习。

欢送关注我的公众号“前端小鑫同学”，原创技术文章第一工夫推送。

关于前端:客户端开发Electron认识窗口2

如何创立一个非矩形的窗口：

调整主过程代码

调整渲染过程代码：

窗口的其余管制：

总结：