引言

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

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

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

1Electron技術

1.1Electron運行原理

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

(1)Node.js。

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

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

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

(3)進程類別。

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

一個Electron應用總是有且只有一個主進程,主進程職責:

1)創(chuàng)建渲染進程(可多個):

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

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

渲染進程相當于一個瀏覽器窗口,其主要職責:1)用HTML和Css渲染界面:2)用Javascript做一些界面交互。

1.2Electron技術優(yōu)勢

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

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

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

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

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

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

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

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

2應用開發(fā)案例

2.1基本文件結構

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

(l)package.json。

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

(2)index.html。

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

(3)main.js。

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

2.2進程間通信

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

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

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

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

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

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)調(diào)試:在main.js中設置一些斷點,并在Debug視圖中開始調(diào)試,能夠查看程序運行斷點相關信息。

3結語

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