electron踩坑系列之一

electron作为基础框架,已经开发两个项目了。第一个项目,我主要负责用react写页面,第二项目既负责electron部分+UI部分。

做项目,就是踩坑, 一路做项目,一路踩坑,坑多不可怕,就怕忘记坑。

坑前准备 项目模板

开发,当然就需要搭建项目,搭建项目github上有不少模板。

你可以去 awesome-electron 的 部分看到比较流行的模板。
比如:
electron-react-boilerplate
electron-vue
electron-quick-start
electron-boilerplate

用模板相当于上高速,嗖嗖的飞起,不错的选择。
这些模板基本都是把静态页面和electron部分的开发,集成到一个项目里面,有利有弊。

我们项目采用的是分离式的:
electron部分: 负责提供能力,比如读写文件,操作注册表,启动和挂关闭第三方程序,网络拦截,托盘等
UI部分: 绘制页面,必要的时候调用electron封装的能力。

到这里, electron部分与UI部分的交互,我们打开窗体的时候,
nodeIntegration是设置为false的,所有的通讯都是通过一个所谓的bridge来连接的。

bridge通过preload的属性注入,起到了一定的隔离。

我们项目均采用TS开发
前后端两个项目都是基于TS开发,好处不用说。
问题在于,如何将bridge部分友好的提供给UI部分。
也很简单,typescript 编译的时候,其实有一个declaration的选项。
基于bridge单独起一个配置文件,里面仅仅include需要的文件,执行build的,再拷贝到UI项目里面,UI项目就能得到友好的提示。

主进程和渲染进程的通讯

electron-better-ipc 是不错的选择,原理就是利用EventEmitter的once特性,内部的每次通讯都是一个新的事件类型。
对于超时和错误捕捉,主向多个渲染进程发消息,都还得自己去增强。

我们是自己维护了一个调用信息, 发送的数据有一个key来标识,目前看来,还算稳定。

日志

electron-log是不错的选择,简简单单的就能记录主进程和渲染进程的日志。
但是不能记录node唤起的子进程的日志,真要想记录,子进程单独通知到外面,外面记录。或者单独自己弄一个写子进程的日志也没问题的。

日志多了肯定不行,就会有日志轮转。目前这个库,好像有一个简单粗暴的轮转策略,肯定是不够用的。

具体的可以到File transport

function archiveLog(file) { file = file.toString(); const info = path.parse(file); try { fs.renameSync(file, path.join(info.dir, info.name + '.old' + info.ext)); } catch (e) { console.warn('Could not rotate log', e); } }

我这里就贴一段基本可用的, deleteFiles自定去实现,你可以保留几个文件,保留几天的文件,都是可以的。

// 50M log.transports.file.maxSize = 50 * 1024 * 1024; log.transports.file.archiveLog = function archiveLog(file: string) { file = file.toString(); const info = path.parse(file); try { // 重命名 const dateStr = getDateStr(); const newFileName = path.join(info.dir, `${info.name}.${dateStr}${info.ext}`); console.log("archiveLog", file, newFileName); fs.renameSync(file, newFileName); // 删除旧文件 deleteFiles(info.dir) } catch (e) { console.error('Could not rotate log', e); } } 持久化的数据

electron-store 很不错。

我们采用的是内存数据 + config.json的模式,实际上本质没变。
如果是窗体之间的页面之间要共享数据,其实用localStorage和sessionStorage,indexedDB都是不错的选择。

入坑和填坑 原生模块.node结尾的文件引用报错

build时指定electron版本,headers头文件路径
https://www.electronjs.org/docs/tutorial/using-native-node-modules

这个官方是有很明确的指出来的

开发时正常,打包后提示,cannot find moudule "xxxx"

使用npm 安装,不用cnpm。
这是和不同的安装方式,文件目录结构不一致。
当然开发的时候,你是可以使用cnpm或者yarn的。
我没有尝试使用打包做一些修改让cnpm有效,你们要是知道,可以留言告诉我哈。

the specified module could not be found. "................\xxxx.node"

这个和上面那个有点类似,但是又不一样的。 下面这种情况可能是.node模块需要引用一些dll文件,却没有。比如常见的msvcr120.dll,msvcr110.dll,msvcp120.dll,msvcp110.dll这些文件,你把这些放到.node的同级目录。至于怎么区分32位和64位,哈哈,我知道您懂。

The specified module could not be found.

AppData\Local\Temp\xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.tmp.node

https://stackoverflow.com/questions/41253450/error-the-specified-module-could-not-be-found
有提到大致的原生就是 .node缺少一些dll库。可以使用 检查缺少啥

我做了四种尝试:

安装 visual-c 组件 failed

复制dll到asar同目录 failed

electron-builder 设置asar为false ok

C++模块文件夹移动asar包体外 ok

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyygsf.html