前言

前面做了一个计算器，可是感觉上太像一个浏览器加了个网页，可是windows下的计算器好看得多，所以我们简单美化一下。

开始

首先是标题栏和操作按钮不要系统的，而且不需要工具菜单。完全自定义。

• 移除默认标题栏和工具栏

  在electron里，在browserWindow上设置 frame: false即可，如下面的代码：

    win = new BrowserWindow({
        width: 480,
        height: 640,
        frame: false
    });
  

• 实现一个

  我们自定义了一个titleBar，使用最简单的办法，设置css,增加一条 -webkit-app-region: drag; 然后使用ipcRenderer发送消息，在main.js里接收即可。 代码片段如下

    // main.js
    // 接收ipcRenderer发送的事件，处理
    ipcMain.on('close', e => {
      app.quit();
    });
  
    ipcMain.on('min', e => {
      win.minimize();
    });
  

    //index.js
    //发送数据
    ipcRenderer.send(act);
  

• 经过一番折腾，基本是实现了。剩下就是一些完善

尾巴

electron到这里就告一段落了，接下来就是用于生产的开发了。