在electron中使用ionic2

electron是atom官方的一个跨平台的桌面应用开发框架,具官方介绍说是“ Build cross platform desktop apps with JavaScript, HTML, and CSS”,也就是说可以直接使用,你最喜欢的html+css+js来开发跨平台的桌面应用程序。如果你之前使用过angular以及react之类的JS框架,那么你就可以使用这些框架来制作一个跨平台的桌面应用。下面我们主要是说一下在ionic2中,我们要如何使用electron与ionic2进行通信!
由于electron使用的是chrome的V8引擎,也就是可以理解为一个浏览器,因此我们只需要编写想要的前端代码就可以直接运行在electron中了。建议大家边看electron的doc边做开发。因为我也是刚刚开始接触electron,只不过我只是需要从ionic中传递数据到electron中,让其与其他设备进行交互而已,因此我做的只是一个简单的ionic传递数据到electron,其他的我并不深入。因此大家喜欢研究的朋友可以深入研究下electron。
1、安装electron
安装过程可能并不复杂,但是一定要记住要使用淘宝的npm镜像进行安装,因为我翻墙了也无法安装成功,因此建议大家使用cnpm,这个特别快!
在nodejs中键入如下命令即可进行安装
npm install electron -g

如果是linux或者mac请使用root或者sudo权限进行全局安装
2、使用electron
其使用方法很简单,安装完成后直接输入electron就可以看到如下提示:

To run your app with Electron, execute the following command in your Console (or Terminal):
/usr/local/lib/node_modules/electron/dist/Electron.app/Contents/MacOS/Electron path-to-your-app
The path-to-your-app should be the path to your own Electron app.
You can read the quick start guide in Electron’s docs to learn how to write one.
Or you can just drag your app here to run it:

这句话就已经告诉了我们如何使用electron
使用方法如下
如果你是全局安装的,可以直接使用下面的命令
cd 到你应用根目录,在运行下面命令即可
electron . 或者
electron ./
3、在ionic中如何给electron传递数据!
比如你需要将一些数据传递给electron,然后再通过electron连接上打印设备打印出来。首先我们得必须清楚运行在electron里面的js是不能包含electron的,也就是说我们不能使用npm安装electron到ionic项目中去,这样会造成项目无法正常运行。
我个人的理解是electron会将你的js对象设置为一个子类,然后将electron的对象都变成如window之类的全局变量。
下面就来看看在ionic中我们该如何import或者require相应的electron。
4、在ionic2中使用的是angular2,因此我们无法直接使用require函数,因为这个是nodejs的函数,而typescript中是没有的。那在typescript中只有import,但是通过我的努力,import肯定是无法使用的,为什么无法使用?因为我们根本就无需安装electron到ionic中,因此import肯定是无法实现了!
还记得我之前写过一篇文章《ionic2中引入自定义js文件或者引入第三方js文件》,对正是这篇文章让我重新满血复活了!在尝试了各种方法没有成功后,我使用了declare的方式来引入相关的方法或者对象。
刚开始我直接使用

declare var window:any;
window.require('electron')

但是并没有成功啊,搞得我老泪纵横,始终报错说找不到fs,我又安装了fs,问题依旧,无法解决。
功夫不负有心人,最终我使用了下面的方式解决了这个问题

declare var require:any;
var electron = require('electron')

这样就可以解决了无法使用require的方法了。那么下面就更简单了,我们只需要调用electron的相关api就可以进行传递数据等等的操作了!

发表评论

电子邮件地址不会被公开。 必填项已用*标注