開發(fā)跨平臺(tái)桌面應(yīng)用的探討

引言

傳統(tǒng)桌面應(yīng)用軟件一般使用原生開發(fā)方法,例如使用C++/MFC開發(fā)windows應(yīng)用,直接將C++編程語言編譯成可執(zhí)行文件,直接調(diào)用系統(tǒng)API,完成界面繪制。這種開發(fā)方法有著較高的運(yùn)行效率,但一般來說,開發(fā)速度較慢,技術(shù)要求較高。

隨著時(shí)代的發(fā)展,改變也漸漸開始了:web瀏覽器的崛起,網(wǎng)速的提高,網(wǎng)絡(luò)訪問便捷性的提升,以及軟件的開源思潮,都對(duì)軟件的構(gòu)建和開發(fā)方式產(chǎn)生了巨大的影響。隨著web和移動(dòng)端大力興起,應(yīng)用軟件要求能夠適應(yīng)多端一即PC端、web端、Android端等,并且web開發(fā)方法越來越方便、資源越來越豐富、效果越來越酷。

跨平臺(tái)的桌面應(yīng)用并不是什么新鮮的東西,像Mono和○t這樣的框架早就可以開發(fā)出支持主流操作系統(tǒng)的應(yīng)用了。作為新一代基于web的桌面技術(shù)一Electron技術(shù),可以重用web應(yīng)用的代碼來構(gòu)建桌面應(yīng)用,并且構(gòu)建出來的應(yīng)用可以同時(shí)在windows、Macos和Linux上運(yùn)行,現(xiàn)已被越來越多的產(chǎn)品采用,成熟度和認(rèn)可度都不錯(cuò)。Electron是一個(gè)使用Javascript、HTML和Css等web技術(shù)創(chuàng)建原生程序的框架,負(fù)責(zé)比較復(fù)雜困難的部分,技術(shù)人員只需把精力放在應(yīng)用的核心開發(fā)上。

1Electron技術(shù)

1.1Electron運(yùn)行原理

Electron結(jié)合了Chromium、Node.js和用于調(diào)用操作系統(tǒng)本地功能的API,能夠使用純Javascript來創(chuàng)建桌面應(yīng)用。

(1)Node.js。

Node.js是一個(gè)Javascript運(yùn)行環(huán)境,是對(duì)GoogleV8引擎進(jìn)行了封裝,用于方便地搭建響應(yīng)速度快、易于擴(kuò)展的網(wǎng)絡(luò)應(yīng)用。Node.js使用事件驅(qū)動(dòng)、非阻塞I/o模型而得以輕量和高效,非常適合在分布式環(huán)境中運(yùn)行數(shù)據(jù)密集時(shí)實(shí)時(shí)應(yīng)用。

(2)系統(tǒng)API。

為了提供原生系統(tǒng)的GUI支持,Electron內(nèi)置了原生應(yīng)用程序接口,對(duì)調(diào)用一些系統(tǒng)功能,如調(diào)用系統(tǒng)通知、打開系統(tǒng)文件夾、訪問操作系統(tǒng)剪貼板等提供支持。

(3)進(jìn)程類別。

Electron區(qū)分了兩種進(jìn)程:主進(jìn)程和渲染進(jìn)程。

一個(gè)Electron應(yīng)用總是有且只有一個(gè)主進(jìn)程,主進(jìn)程職責(zé):

1)創(chuàng)建渲染進(jìn)程(可多個(gè)):

2)控制應(yīng)用生命周期(啟動(dòng)、退出APP以及對(duì)APP做一些事件監(jiān)聽):

3)調(diào)用系統(tǒng)底層功能,調(diào)用原生資源。

渲染進(jìn)程相當(dāng)于一個(gè)瀏覽器窗口,其主要職責(zé):1)用HTML和Css渲染界面:2)用Javascript做一些界面交互。

1.2Electron技術(shù)優(yōu)勢(shì)

web應(yīng)用主要受限于網(wǎng)絡(luò)和瀏覽器特性,因此,桌面應(yīng)用在以下方面要優(yōu)于web應(yīng)用:

(1)可以即時(shí)啟動(dòng),不需要等待資源從網(wǎng)絡(luò)下載下來。

(2)可以訪問計(jì)算機(jī)的操作系統(tǒng)和硬件資源,包括可以讀寫用戶計(jì)算機(jī)中的文件系統(tǒng)。

(3)可以更好地控制軟件的用戶體驗(yàn),不需要擔(dān)心不同瀏覽器兼容性問題。

Electron技術(shù)除了通用的優(yōu)勢(shì)外,還有以下特別的優(yōu)勢(shì):

(l)可以用web前端技術(shù)開發(fā)跨平臺(tái)的桌面應(yīng)用:使用純Javascript語言開發(fā),只需要寫一份代碼,打包出來的應(yīng)用可以同時(shí)在windows、Linux、Mac操作系統(tǒng)上運(yùn)行。

(2)可以從Node.js的生態(tài)獲得極大的助力:Node.js這個(gè)大生態(tài)下很多成熟模塊可以直接引入使用,避免重復(fù)造輪子,提高開發(fā)效率。

(3)進(jìn)程隔離:基于Chromium多進(jìn)程模式的應(yīng)用模塊集成,天然提供了應(yīng)用模塊之間的隔離性,其中某一應(yīng)用模塊的死機(jī)故障不影響其他應(yīng)用模塊及整個(gè)應(yīng)用軟件。

2應(yīng)用開發(fā)案例

2.1基本文件結(jié)構(gòu)

從開發(fā)的角度來看,Electron應(yīng)用本質(zhì)上是一個(gè)Node.js應(yīng)用程序,最基本的目錄包含:package.json、index.html、main.js。

(l)package.json。

這是整個(gè)工程的參數(shù)文件,json格式包含了一些與應(yīng)用相關(guān)的配置參數(shù):應(yīng)用的名字、應(yīng)用啟動(dòng)時(shí)要加載的主文件以及版本號(hào)等。其中scripts.start指的是用什么程序來執(zhí)行,main指的是程序的入口,后面的devDependencies和dependencies指的是依賴項(xiàng),其中devDependencies是全局依賴,dependencies表示局部依賴項(xiàng)。

(2)index.html。

這是一個(gè)網(wǎng)頁(yè),一般是應(yīng)用將這個(gè)網(wǎng)頁(yè)渲染為程序主窗口顯示內(nèi)容。

(3)main.js。

這是Electron應(yīng)用的入口文件,一般在main.js中創(chuàng)建主窗口,并處理程序中可能遇到的所有系統(tǒng)事件,例如處理窗口關(guān)閉事件、激活時(shí)重建窗口、是否打開開發(fā)者工具等。

2.2進(jìn)程間通信

Electron為主進(jìn)程和渲染器進(jìn)程通信提供了多種實(shí)現(xiàn)方式,如可以使用ipcRenderer和ipcMain模塊發(fā)送消息,使用remote模塊進(jìn)行RPC方式通信。ipcMain和ipcRenderer都是EventEmitter類的一個(gè)實(shí)例,EventEmitter的核心就是事件觸發(fā)與事件監(jiān)聽器功能的封裝,實(shí)現(xiàn)了事件模型需要的接口?？赏ㄟ^ipcMain和ipcRenderer的on、send監(jiān)聽和發(fā)送消息。

2.3應(yīng)用代碼調(diào)試

由于應(yīng)用程序分為渲染進(jìn)程和主進(jìn)程,調(diào)試工具也分不同方法查找代碼的錯(cuò)誤、性能瓶頸或者優(yōu)化的機(jī)會(huì)。

(1)渲染進(jìn)程調(diào)試。最廣泛使用來調(diào)試指定渲染進(jìn)程的工具是Chromium的開發(fā)者工具集,可以調(diào)試所有的渲染進(jìn)程,通過編程的方式在Browserwindow的webContents中調(diào)用openDevTool()API來設(shè)置。

(2)主進(jìn)程調(diào)試。需要使用一個(gè)支持V8調(diào)試協(xié)議的調(diào)試器,推薦使用VsCode進(jìn)行主進(jìn)程調(diào)試,步驟如下:

l)在VsCode中打開一個(gè)Electron項(xiàng)目。2)添加一個(gè).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)調(diào)試:在main.js中設(shè)置一些斷點(diǎn),并在Debug視圖中開始調(diào)試,能夠查看程序運(yùn)行斷點(diǎn)相關(guān)信息。

3結(jié)語

本文分析了Electron的技術(shù)優(yōu)勢(shì),剖析了其運(yùn)行原理,并以實(shí)際案例描述了應(yīng)用開發(fā)方法,推薦使用該方法來開發(fā)跨平臺(tái)桌面應(yīng)用軟件,優(yōu)點(diǎn)多多。但在工程實(shí)踐中仍會(huì)遇到一些問題需要解決,例如該方法開發(fā)打包的APP比較大,另外,在HTML沒有被加載完成前,窗口只能用背景色去填充,不能使用個(gè)性化的背景圖案,這會(huì)造成首次加載的體驗(yàn)不好。