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