关于前端:客户端开发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的窗口就先介绍这么多，下一篇将开启界面相干内容的学习。

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

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

调整主过程代码

调整渲染过程代码：

窗口的其余管制：

总结：