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

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

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

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

调整主过程代码

1. 调整窗口的宽高尺寸统一，是窗口变为正方形；

2. 调整窗口为通明，成果如下图显示；

3. 放弃 frame 属性为 false，仍然由咱们本人来定义边框和标题栏；
4. 通常这样的窗口不须要反对窗口大小的调整，咱们将属性 resizable 设置为 false；
5. 接着咱们将窗口最大化的属性也禁用一下。

6. 残缺代码如下 ：

   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
       }
     })

   调整渲染过程代码：

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

   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;
   }

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

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

3. 应用 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})

   窗口的其余管制：

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

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

5. 开启一个模态窗口，咱们只有在敞开新关上的模块窗口后能力在原窗口持续操作，和模态 Dialog 一样；

   this.win = new remote.BrowserWindow({parent: remote.getCurrentWindow(),
     modal: true,
     webPreferences: {nodeIntegration: true}
   })

   总结：

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

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