Electron跨平台桌面级应用开发框架

html-css015

Electron跨平台桌面级应用开发框架,第1张

上次我们提到了业界大名鼎鼎的Qt桌面级应用开发框架,不过Qt是基于c++进行开发的,c++的开发模式也并不是十分适用于现代这种短平快的软件开发模式,相比之下,electron是基于nodejs和 Chromium使用javascript,html和css来开发桌面应用的框架。

Electron的原理很简单,基本上就是使用我们常见的chrome浏览器的内核为基础通过nodejs和底层操作系统进行操作交互。

必要的准备内容不多,不管你是windows,linux还是mac只要安装最新版本的nodejs就可以了,除此之外确保你有npm和git

然后打开命令提示符输入

安装依赖的过程可能比较久,npm会自动安装一些windows的编译包。

安装成功并且运行了会提示入下图

实际上就是个chrome浏览器的壳子把html和css以及js绘制的UI显示出来,右边的debug工具都是和chrome里一模一样的。

当然我们也可以关闭它。显示的时候看起来就更加像是一个浏览器了。

electron的目录结构如下。

package.json是我们常见的npm包管理软件,这里主要是一些APP的应用信息,包的管理和开发用的脚本命令。在这里我们还要定义好main为main.js如果没有定义的话会默认启动index.js。这里和nodejs默认的情况都差不多。

main.js是应用程序的主进程文件,这个主进程文件就是用来创建应用程序窗口和处理系统事件使用的文件。它看起来大概是下面这个样子。

这个文件显示主界面的信息内容。

就是图中红色箭头指示的位置。

electron想必qt开发起来就容易多了,因为我们可以通过html,css和javascript这样简单容易的语言开发跨平台的桌面应用,因为读取的是html文件,这还意味着我们可以更容易的在服务端实时更新数据内容。

Electron ,使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用,利用 Web技术JavaScript、HTML 和 CSS 开发跨平台(Mac,Windows和Linux系统)桌面应用的开源框架,最初是 Github 发布的 Atom 编辑器衍生出的 Atom Shell,后更名为 Electron。

可以将 electron 看作是一个由 JavaScript 控制的一个小型的 Chrome 内核浏览器。

electron 内置了 Chromium 内核 和 Node,因此可以使用 HTML 和 CSS 来实现应用的 GUI 界面,用 JavaScript 调用丰富的原生 API(如打开文件窗口、通知、图标等)。

如今Github上也出现了很多使用Electron开发的开源项目,给开发者学习和参考,也有很多优秀客户端使用Electron开发的,比如:

官网也提供了很多应用项目

Apps Built on Electron

需要安装以下工具:

1.node

2.electron

在命令行中输入以下命令,即可安装electron

等待安装完成之后,在命令行输入electron -v能够显示版本号代表安装成功。

执行以下命令就可以运行最简单的electron工程

package.json是Node.js项目的配置文件,index.html是桌面应用的界面页面,main.js是应用的启动入口文件。

package.json 跟常规 Node 程序一致,将 main.js 作为 程序的启动入口文件,基本内容如下:

注意:如果 main 字段没有在 package.json 声明,Electron会优先加载 index.js。

index.html 作为我们的程序界面

最后运行结果如下: