Electron 不完全快速手册

Electron能干嘛

Vscode 基于Electron开发的，他是用来开发桌面软件的，可以轻易的跨平台

他的前身是atomshell，图标很丑，不用在意，一点也不像vscode也不用在意。

 

Let's go

Electron 是基于Node Chromium V8 组合而来，目前的版本是1.3.3

 

https://github.com/electron/electron/releases/download/v1.3.3/electron-v1.3.3-win32-x64.zip

 

我贴出windows版的electron 发布好的下载链接，其他版本自行去electron官网寻找

下载完先跑起来看一看。是的，一点不像vscode.

让我们先准备一个helloworld页面

直接从硬盘上将我们的页面拖到浏览器里面是不能正确运行的，因为有些js 的 xhr 操作，一定需要一个服务器。

但是直接拖到electron里面是可以的，因为他集成了nodejs。

 

从electron里面运行我们的index.html

看起来是这样的

一点也不像浏览器呀，别急，按下alt键，菜单出来了有木有，从view 里 选择 toogle develop tool。

然后

这个和chrome 浏览器的调试工具一样一样的东西就出现了

当当,这就跑起来了

这样不行

这样当然不行，我们用electron 是为了开发本地app，他要解决几个问题。

要和页面不一样

 

你用svn 从这里抓一下代码，只能用svn抓哟

http://code.taobao.org/svn/falconconv/trunk/babylonfan/webgl/webgl_light/webgl_light

 

然后把拖进electron，如果没有js，回去重学typescript。

拖进去你会发现没有啥变化呀。

关掉输入法，按一下Q键

弹出来一个窗口了吧

然后修改一下里面的文字，按一下fix it

主窗口里面的文字变了，有趣吧。

怎么做到的

是因为electron 启动的其实需要是一个js，作为一个没有外观的主进程。

然后这个主进程可以开很多个 页面进程

没错，是进程，electron 开发的app，都是多进程的，这点很囧，不同窗口之间的通讯都是跨进程的。通讯方法 electron有封装。

 

页面进程=窗口进程，因为强大的习惯作祟，我可能会混乱，有时候写页面进程，有时候写窗口进程，他们是一个东西。

 

我们做了什么：

1. elemain.js 是没有外观的主进程
2. 主进程的代码里写死了，使用index.html启动一个页面进程
3. Index页面进程 按 Q的时候，使用index2.html 再启动一个页面进程

   并将一些数据放到主进程里。

4. Index2页面进程启动后，到主进程里取出数据并显示在界面里。

   Index2页面按钮按下时，index2将数据放进主进程，并群发一条消息

5. Index页面注册一个事件处理器，收到index2发来的事件后，修改文字和位置

 

这是electron最复杂的机制

我们还封装了electron的调用本地对话框，打开文件，保存文件啥的

还封装了electron的 保存和读取本地问题

 

这两个部分都比较简单，相信你看到API就知道了。

有悟性的你，细节one by one 可以不必看了。为了完整，我还是要写下去。

细节one by one

1.这里是electron的主进程

2.固定封装了用index.html启动 一个 页面进程

另外有一些用主进程保存全局数据的支持代码，可以让页面进程之间共享数据。

还有一些让页面进程之间互发消息的支持代码，可以让页面进程之间通讯。

一般不需要去改他。

3.index页面进程按Q的逻辑

electron.API.Init 必须调用，初始化一些electron对象。

这些封装都在里，你一般也不需要去改他。

如果Init返回false 八成现在就不是electron 环境

 

IPC 是electron 的跨进程通讯的概念

IPC SetInfo 是将数据存储在主进程内，这样对于每个窗口进程都是统一的存储位置，你放在一个窗口进程里的数据，其他窗口进程没办法直接取得

 

IPC OpenWin 是打开一个新的窗口进程，因为只有主进程才能有这个权限，所以这个操作时首先通过IPC通知主进程，然后主进程去开的窗口，啥时候窗口开好不知道。所以千万不要在OpenWin之后马上对着这个Win干啥，你不知道他啥时候开好的。

 

4.index2页面进程的逻辑

上面说了，index2页面进程啥时候开好，index那边是不知道的，所以不能让index把数据发过来，这不可靠，要index2页面自己初始化自己。

Index2的逻辑如图，onload事件就是自己ok了，然后Ipc_GetInfo 从主进程取数据，主进程没有外观，一直待命的，除非index 窗口进程关闭，主进程才关闭，并且主进程关闭时，所有主进程管理的窗口进程全部关闭（这个跟着index进程关闭主进程的逻辑也是我写死的，所以index窗口进程不能随便关，可以在index窗口进程里写退出事件，让用户确认才退出）

 

 

然后index2页面进程 按钮按下的逻辑如下

再把数据放进主进程

另外直接来个群发

 

1. index窗口进程怎么收事件？

就这么简单，只要指定一个接受函数就行啦

最后补一张图直接在vs里面配置启动electron，这样按f5就行啦