electron开发一个计算器

electron可以使用前端熟悉的html,js,css构建windows桌面应用，这几天工作需要探索了一下。
照着mac里面计算器的样式，做了一款计算器出来。

计算器

源码：https://github.com/kurset/electron-calculator

开发笔记

主进程 渲染进程

对于electron应用来说，首先要分清它的主进程和渲染进程。如果把electron看做一个游览器，那主进程可以看做控制这个游览器，比如创建一个网页进程，窗口大小。而渲染进程则可以看做网页里的脚本js文件，只能控制当前网页，如果它要操作GUI，则需要两者通讯的模块。

简单来看，主进程就是electron那个控制窗体的入口文件，渲染进程就是页面的js文件，不过，也不要有开发网页的思维，这些页面的js文件同样可以用模块化代码，如

const Calculator = require('./src/Calculator');

开发的时候，你可以选择用webpack等打包工具，打包好js文件，也可以这样直接上，我认为如果不用什么框架的话，没什么用打包工具的必要，因为压缩代码，减少请求什么的对electron应用来说用不着。
开发的时候转变一下前端的思维。

启动应用和入口文件

在当前项目目录下，安装好electron，执行

electron .

即可启动应用。electron会根据package.json里面的main为入口文件，如果没有写，则默认为index.js。

启动白屏问题

如果按照文档中的实例入口文件来写，会发现，应用启动到展示这段时间，窗口是白屏的，这是因为应用还没来的及渲染完，解决方法是默认就关闭窗口，等页面渲染完毕的时候再启动:

app.on('ready', () => {
    mainWindow = new BrowserWindow({width: 200, height: 300, show: false, resizable:false, frame: false});
    mainWindow.loadURL('file://' + __dirname + '/index.html');
  
    //mainWindow.openDevTools({mode: 'detach'});
    mainWindow.on('ready-to-show', function() {
        mainWindow.show();
    });
    mainWindow.on('closed', function() {
        mainWindow = null;
    });
});

如何打包成可执行文件

electron-packager 就比较好，安装好之后，可以指定Windows，linux等各种平台。
https://github.com/electron-userland/electron-packager

windows平台下如何制作安装包

windows平台虽然可以打包成exe可执行文件，但文件夹里面一大堆dll文件。可以用nsis工具，定制一个安装包，它会将应用文件夹下所有文件压缩成安装包，最终提供给用户。
win7下sis打包exe安装程序教程 - CSDN博客
分享一个使用NSIS制作安装包的UI插件 - CSDN博客

开发文档地址

https://electronjs.org/docs
Electron 快速入门_w3cschool