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

相关文章

网站地图xml地图