零、electron 简介
- 历史：Atom 编辑器衍生出的 Atom Shell，后更名为 Electron
- 可以跨 Linux、Mac、Win7-8 平台开发桌面程序
「写本文时，electron 版本为 1.6.2，electron 并不支持 win10」 - 使用网页开发的形式，加速了开发效率，但在性能操作上表现欠佳
「实质上仅用了 Webkit 浏览器内核的壳子套了开发者的代码，可以直接做浏览器用」 - 打包软件一般 安装包 40M 起步，软件体积 100M 起步
一、electron 的布局
I. 文件布局
- 源代码布局
app/ // 名称固定，方便 electron 取文件
├── package.json // 程序的名称、简介、版本等信息 ，程序的编译，打包脚本等
├── main.js // 程序运行唯一入口，可以在 package.json 修改入口文件
└── index.html // 网页主页
- electron 打包后程序的文件存放
resources/ // 程序根目录下的文件
├── app/ // 编写的源代码「可选，Mac 中在打包后直接省略了该部分」
└── electron.asar // 源代码 经过 asar 打包压缩后生成的 程序需要引用文件「必须」
II. 运行方式
- 依托 NodeJS 构建的独立服务器获取系统资源
- 以唯一的 main.js 作为主进程，网页的渲染作为其多个子进程
- 页面和主线程之间的交流：通过 ipcMain「主」 和 ipcRenderer 「页面」互相广播交流
- 页面之间的交流：可以通过在主线程广播转发给页面
- 过多使用通过广播发送信息，会导致程序的卡顿
建议使用一个广播，而用参数作为消息类型的判断- 每个窗口都是一个进程，开启过多的窗口会造成巨大的卡顿
// 减少过多广播的方法
ipcMain.on(gc.message, function (event, type, ...arg) {
switch (type){
case gc.msgMainLog:
log(...arg);
break;
case gc.msgOpenEffect:
CreateWindow.openEffect(event.sender, ...arg);
break;
case gc.msgAddSequence:
CreateWindow.addSeq(event.sender, ...arg);
break;
case gc.msgAddPlist:
CreateWindow.addPlist(event.sender, ...arg);
break;
}
});
二、electron 的不足
- 性能：canvas 标签使用 17个左右 就开始内存紧张，循环利用
- 官网未能提供一个 即可以记录渲染线程，又可以记录主线程的 log
好在 Github 上从不缺少这样的 东西 - 在搭配使用 React 时，不能在 electron 的 index.html 中直接引用的 CSS 内引用资源，哪怕是相对路径的连接也不行
解决方法：
- 把 CSS 写入 React，而不是单独在 index.html 中引用
- 把 CSS 引用的资源编译成 base64 写入到 CSS 文件中
「不过 引用资源过大会造成 CSS 的加载更慢」
由于 React 在编译打包的时候，会把 CSS 引用资源的链接转化为绝对路径
打包后，程序由于绝对路径的原因，只能在开发的机子上使用，分发给他人后，会造成资源缺失的问题
