开发跨平台桌面应用的探讨

引言

传统桌面应用软件一般使用原生开发方法,例如使用C++/MFC开发windows应用,直接将C++编程语言编译成可执行文件,直接调用系统API,完成界面绘制。这种开发方法有着较高的运行效率,但一般来说,开发速度较慢,技术要求较高。

随着时代的发展,改变也渐渐开始了:web浏览器的崛起,网速的提高,网络访问便捷性的提升,以及软件的开源思潮,都对软件的构建和开发方式产生了巨大的影响。随着web和移动端大力兴起,应用软件要求能够适应多端一即PC端、web端、Android端等,并且web开发方法越来越方便、资源越来越丰富、效果越来越酷。

跨平台的桌面应用并不是什么新鲜的东西,像Mono和○t这样的框架早就可以开发出支持主流操作系统的应用了。作为新一代基于web的桌面技术一Electron技术,可以重用web应用的代码来构建桌面应用,并且构建出来的应用可以同时在windows、Macos和Linux上运行,现已被越来越多的产品采用,成熟度和认可度都不错。Electron是一个使用Javascript、HTML和Css等web技术创建原生程序的框架,负责比较复杂困难的部分,技术人员只需把精力放在应用的核心开发上。

1Electron技术

1.1Electron运行原理

Electron结合了Chromium、Node.js和用于调用操作系统本地功能的API,能够使用纯Javascript来创建桌面应用。

(1)Node.js。

Node.js是一个Javascript运行环境,是对GoogleV8引擎进行了封装,用于方便地搭建响应速度快、易于扩展的网络应用。Node.js使用事件驱动、非阻塞I/o模型而得以轻量和高效,非常适合在分布式环境中运行数据密集时实时应用。

(2)系统API。

为了提供原生系统的GUI支持,Electron内置了原生应用程序接口,对调用一些系统功能,如调用系统通知、打开系统文件夹、访问操作系统剪贴板等提供支持。

(3)进程类别。

Electron区分了两种进程:主进程和渲染进程。

一个Electron应用总是有且只有一个主进程,主进程职责:

1)创建渲染进程(可多个):

2)控制应用生命周期(启动、退出APP以及对APP做一些事件监听):

3)调用系统底层功能,调用原生资源。

渲染进程相当于一个浏览器窗口,其主要职责:1)用HTML和Css渲染界面:2)用Javascript做一些界面交互。

1.2Electron技术优势

web应用主要受限于网络和浏览器特性,因此,桌面应用在以下方面要优于web应用:

(1)可以即时启动,不需要等待资源从网络下载下来。

(2)可以访问计算机的操作系统和硬件资源,包括可以读写用户计算机中的文件系统。

(3)可以更好地控制软件的用户体验,不需要担心不同浏览器兼容性问题。

Electron技术除了通用的优势外,还有以下特别的优势:

(l)可以用web前端技术开发跨平台的桌面应用:使用纯Javascript语言开发,只需要写一份代码,打包出来的应用可以同时在windows、Linux、Mac操作系统上运行。

(2)可以从Node.js的生态获得极大的助力:Node.js这个大生态下很多成熟模块可以直接引入使用,避免重复造轮子,提高开发效率。

(3)进程隔离:基于Chromium多进程模式的应用模块集成,天然提供了应用模块之间的隔离性,其中某一应用模块的死机故障不影响其他应用模块及整个应用软件。

2应用开发案例

2.1基本文件结构

从开发的角度来看,Electron应用本质上是一个Node.js应用程序,最基本的目录包含:package.json、index.html、main.js。

(l)package.json。

这是整个工程的参数文件,json格式包含了一些与应用相关的配置参数:应用的名字、应用启动时要加载的主文件以及版本号等。其中scripts.start指的是用什么程序来执行,main指的是程序的入口,后面的devDependencies和dependencies指的是依赖项,其中devDependencies是全局依赖,dependencies表示局部依赖项。

(2)index.html。

这是一个网页,一般是应用将这个网页渲染为程序主窗口显示内容。

(3)main.js。

这是Electron应用的入口文件,一般在main.js中创建主窗口,并处理程序中可能遇到的所有系统事件,例如处理窗口关闭事件、激活时重建窗口、是否打开开发者工具等。

2.2进程间通信

Electron为主进程和渲染器进程通信提供了多种实现方式,如可以使用ipcRenderer和ipcMain模块发送消息,使用remote模块进行RPC方式通信。ipcMain和ipcRenderer都是EventEmitter类的一个实例,EventEmitter的核心就是事件触发与事件监听器功能的封装,实现了事件模型需要的接口。可通过ipcMain和ipcRenderer的on、send监听和发送消息。

2.3应用代码调试

由于应用程序分为渲染进程和主进程,调试工具也分不同方法查找代码的错误、性能瓶颈或者优化的机会。

(1)渲染进程调试。最广泛使用来调试指定渲染进程的工具是Chromium的开发者工具集,可以调试所有的渲染进程,通过编程的方式在Browserwindow的webContents中调用openDevTool()API来设置。

(2)主进程调试。需要使用一个支持V8调试协议的调试器,推荐使用VsCode进行主进程调试,步骤如下:

l)在VsCode中打开一个Electron项目。2)添加一个.vscode/launch.json文件,并使用以下配置:(

"version":"0.2.0",

"configurations":[

(

"name":"DebugMainProcess",

"type":"node",

"request":"launch",

"cwd":"S(workspaceRoot}",

"runtimeExecutable":"S(workspaceRoot}/nodemodules/.bin/electron",

"windows":(

"runtimeExecutable":"S(workspaceRoot}/nodemodules/.bin/electron.cmd"

}

"args":["."]

}

]

}

3)调试:在main.js中设置一些断点,并在Debug视图中开始调试,能够查看程序运行断点相关信息。

3结语

本文分析了Electron的技术优势,剖析了其运行原理,并以实际案例描述了应用开发方法,推荐使用该方法来开发跨平台桌面应用软件,优点多多。但在工程实践中仍会遇到一些问题需要解决,例如该方法开发打包的APP比较大,另外,在HTML没有被加载完成前,窗口只能用背景色去填充,不能使用个性化的背景图案,这会造成首次加载的体验不好。