Electron 開發應用程序

Electron結合了Chromium和NodeJS,使得用JS開發應用程序成爲可能,比如微軟的Visual Studio Code就是用Electron開發的。Electron利用了Chromium的前端顯示功能(解析和顯示HTML以及 javascript code)同時利用NodeJS 可以訪問本地文件的功能來解決瀏覽器本身的一些限制。

我們在用Electron做一些開發的時候,前端基本沒什麼問題,比如你用的是Angular框架或者Vue框架等等,但是在進行後端開發的時候,由於有很多的業務邏輯需要利用其它語言寫或者利用老的dll,那麼就需要特別注意:

1. Electron用的是NodeJS的require功能來加載模塊的,它支持的語言是c++,所以需要寫單獨的Addon(NodeJS 擴展)去加載(LoadLibrary)你要用的dll,簡單的將之前的dll代碼複製,重新編譯,並不一定能用。

2. Electron前後端用來解析JavaScript的V8引擎是一個,通常情況下是用的Chromium帶的V8 引擎,所以你在編寫AddOn的時候要注意,利用的API不是要對應NodeJS的V8接口,V8接口通常情況下在各個版本是不同的。

3. 在編寫AddOn的時候最好用NAN(NAPI)或者N-API,前者可以讓你寫的AddOn在不同的版本下安裝(npm install module)的時候重新編譯,不需要重寫代碼, 後者(N-API)可以讓你寫的程序編譯後,不需要重新編譯,只要你寫程序時的NodeJS 對應的ABI版本和Electron裏用的NodeJS的ABI版本是一個就行。

4. 如果是用NAN編寫的AddOn在下載完後重新編譯的時候,要用Electron-rebuild模塊重新編譯,因爲NAN寫的module下載的過程中會自動編譯,不過這時候用的是機器上安裝的NodeJS的版本,不是Electron用的V8版本(Electron用的是Chromium裏的V8版本), 可以參考Electron-Rebuild,這個tool是用來編譯安裝的Native Module(AddOn)來適配當前工程安裝的Electron。

我在學習的過程中,前端是用的Angular框架,在開發完前端之後,要注意用Angular/CLI框架開發的時候,很多用默認值,在用網頁的時候訪問時沒有問題的,但是對Electron來說可能存在Bug,比如 在index.html中,節點 <base href="/">, 需要將'/'改爲‘./’, 第二點是,在tsconfig.json中target默認是es2015,修改爲es5, 實際上Electron也可以用ES2015,具體方法可以參考,我用的Electron版本是6.0.1

在開發前端的過程中,要是需要用到Electron的東西,由於Angular是用typescript寫的,所以在運行之前需要轉換打包(ts轉爲js),從而不能直接用require('electron')或者import ** from 'electron',會打包失敗,因爲require是nodeJS 模塊,前端不支持,你可以使用(<any>window).require('electron'),這種情況下,如果Electron加載前端,代碼沒問題,如果是用瀏覽器加載前端,那麼就會失敗,因爲瀏覽器窗口不支持require.

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章