【软件技术】跨平台软件开发利器——electron
文/Edawrd
曾几何时,Windows操作系统最鼎盛的时候,几乎是垄断了绝大多数人手中的个人计算机操作系统,除了一小部分人使用Linux和MAC OS之外,绝大多数基本都是使用Windows。在那时候,有谁在主流人群中抱着一台Linux操作系统的计算机,绝对会被人看作“极客”或者“另类”;而那个年代的苹果MAC里面,装的几乎都是Windows操作系统。
操作系统多样化引发的问题
早期的计算机软件根本就不需要考虑系统兼容性的问题,甚至连那个年代的腾讯QQ都是全力做Windows版本的QQ,MAC OS版本的QQ基本是敷衍了事,Linux版本的QQ只支持最基本的聊天功能。归根到底,用户群体决定了这些大型的软件公司的开发方向。
对于那一小部分的Linux玩家来说,当时的Linux远远没有现在那么“有用”,甚至Linux操作系统下的基本工作软件都无法确保。既然大公司放弃了这块市场,那么开源软件开发者们就自己动手丰衣足食,他们开发了一些平台去逆向支持Windows下的软件,其中最著名的当属WINE(Wine Is Not an Emulator)了。当然,WINE的问世,也是在当时条件下的无奈之举,这样强硬地去兼容,必定会引起很多软件兼容性的问题。
图1 WINE
再后来,随着Linux系统和MAC OS的使用者越来越多,这些操作系统的普及并不仅仅是PC端的普及,还有一大部分嵌入式设备的普及,因此软件的跨操作系统平台就显得尤为重要了。与此同时,这个时间段还有一个标志性的技术改革,即web技术的发展,促使越来越多传统的C/S结构(客户端-服务器)软件,都在转向B/S(浏览器-客户端)结构。
那么问题来了,既然web端从服务器处请求过来的网页都是通过HTML+CSS+Javascript技术来实现的,并且这些软件都可以在不同平台的浏览器上面正常运行,那么HTML+CSS+Javascript技术就是一种现成的跨平台技术,而我们只需要为不同平台开发不同的HTML+CSS+Javascript容器就可以了。本文要讲述的Electron就是一个能让你使用 JavaScript, HTML 和 CSS 来创建桌面应用程序的框架。
图2 electron
安装Electron
Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生桌面应用程序的框架,Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。
搭建electron框架的步骤很简单:
第一步:在使用 Electron 之前,您需要安装 Node.js,Node.js可以去官网上面下载,链接:https://nodejs.org/zh-cn/,下载好了之后,以默认选项安装。安装好之后,我们可以在命令行或者Linux的终端里面使用“node -v”或者“npm -v”来检查node.js是否正常安装完成。
第二步:安装Electron,Electron的安装方式有两种,这里我们推荐全局安装,在命令行或者Linux的终端里面使用“npm install electron -g”命令来安装electron,这会持续一段时间,速度的快慢完全取决于你的网络。
第三步:安装好Electron之后,我们就可以创建Electron的项目工程了。使用VsCode打开我们的项目文件夹,接着打开终端,输入“npm i --save-dev electron”以初始化Electron项目。
具体的Electron安装步骤,有兴趣的朋友可以具体参考官网:https://www.electronjs.org/docs/tutorial/quick-start。
使用Electron创建一个简单的APP
上述步骤安装好electron之后,我们就可以开发项目了,运行完“npm i --save-dev electron”命令之后,我们会发现项目文件夹里面多了一个electron相关的文件夹,如图3所示。
图3 初始化electron项目
接着,我们需要在工程中新建一个“package.json”文件,用来配置项目。“package.json”的内容如图4所示。
图4 “package.json”内容
{
"name": "my-electron-app",
"version": "0.1.0",
"author": "your name",
"description": "My Electron app",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}
写完“package.json”的内容之后,我们还需要写一个入口的主脚本文件,这个脚本文件即是“package.json”里面的“main.js”。“main.js”的内容如图5所示。
图5 main.js内容
const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
win.loadFile('index.html')
}
app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
上面发生了什么?
第 1 行:为了管理应用程序的生命周期事件以及创建和控制浏览器窗口,您从 electron 包导入了 app 和 BrowserWindow 模块 。
第 3 行:在此之后,你定义了一个创建 新的浏览窗口的函数并将 nodeIntegration 设置为 true,将 index.html 文件加载到窗口中。
第 15 行:你通过调用 createWindow方法,在 electron app 第一次被初始化时创建了一个新的窗口。
第 17 行:您添加了一个新的侦听器,当应用程序不再有任何打开窗口时试图退出。由于操作系统的 窗口管理行为 ,此监听器在 macOS 上是禁止操作的。
第 23 行:您添加一个新的侦听器,只有当应用程序激活后没有可见窗口时,才能创建新的浏览器窗口。例如,在首次启动应用程序后或重启运行中的应用程序。
一般在Electron,main.js里面的内容被称为“主进程”,这个进程类似于网站中的后台,它一般是不参与界面显示的,但是我们可以利用Node.js的事件驱动特性做一些后台的处理。
如果我们需要让这个程序界面正常运行,还需要建立一个用以显示的界面,这个界面可以使用纯web技术来实现,也可以使用Node.js来实现,我们在工程里面创建一个文件叫做“index.html”,并且写入一些HTML代码,如图6所示。
图6 index.html的内容
到目前为止Electron项目已经建立好,我们可以使用“npm start”命令来启动Electron项目,如图7所示。
图7 启动Electron
现在的这个工程里面,“index.html”里面的内容负责前端界面的显示,这里的“index.html”就是Electron里面的渲染进程。我们可以为这个单调的界面做几个控件,顺便再用Javascript来实现一些按键的响应,如图8所示。
图8 渲染进程效果
图9 渲染进程代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Electron test</title>
<style type="text/css">
h1{color:red; text-align: center;}
p{color:rgb(4, 0, 255)}
.but{color: tomato; text-align: center;}
.but:hover{color: teal;}
</style>
</head>
<body>
<h1>Electron测试软件</h1>
<div>
<p>请输入姓名:</p>
<input id="nameInput" type="text" size="10" maxlength="30" value="">
<button class="but" onclick="showHelloworld()">你好,世界</button>
</div>
<script>
function showHelloworld(){
var name = document.getElementById("nameInput").value;
alert("你好," + name);
}
</script>
</body>
</html>
写在最后
Electron确实是一个不错的跨平台框架,也是当前技术架构下最好的跨平台框架之一。用它结合一些前端的框架,如VUE,REACT等,可以做出非常惊艳的交互界面。如果那你不想使用QT或者.net core,那么Electron不妨一试。
图10 用Electron开发的软件