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.

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