文章主要记录了使用electron
日常开发中所遇到的一些坑以及怎样填坑,帮助其他开发的小伙伴少踩一些坑。建议关注收藏,以便遇到时候方便查阅!
electron
这个框架我就不过多介绍了,是使用node
和Chromium
架构的一个桌面端框架,如果有了解使用web技术开发桌面端,这个框架多少会听说过或者正在使用。
下面就记录一下自己在阅读文档的一些疑问以及开发过程中踩过的坑!
electron?
-
Spectron
和Devtron
的作用?Spectron
可以和其他的mocha
等测试框架进行结合,测试electron
Devtron
是Electron DevTools的扩展,可以帮助你检查,监控和调试应用程序。默认是关闭状态
-
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
的作用?- 设置 HTTP 的 Content-Security-Policy 头部字段
- 为了防止XSS攻击,安全考虑可以在
content
中设置允许加载的脚本的源
-
electron-forge
的作用?- 是一个快速构建electron的构建工具,里面包含打包、自动更新等
- 内部书写
html
和js
为原生写法,未集成第三方框架
-
在
electron
中使用iframe
和webview
的的区别?- 官方建议使用
iframe
代替webview
,webview
标签可以加载一个访客模式的URL页面,由于这个标签是基于Chromium webview
,目前架构变化较快,不够稳定。但是webview
所提供的功能较多,比如控制访客能否前进后退等
- 官方建议使用
-
window.open()
使用native和chrome的区别是什么?- 在
electron
中使用window.open()
打开一个URL使用,会创建一个BrowserWindow
实例,使用的是native
的窗口,可以通过设置nativeWindowOpen: true
来使用chrome
内置的window.open()
,同步打开窗口
- 在
-
electron-packager
和electron-builder
的打包区别?为什么推荐使用electron-builder
?electron-packager
和electron-builder
都是用于electron应用打包的模块, 相比较electron-builder
有更丰富的功能,支持更多的平台,打包的文件更加轻量,支持非electron
内置的自动更新(内置的自动更新需上传到git等支持平台)
-
在
electron
中使用node
原生模块的时候,electron-rebuild
能够简化原生的重编译?- 由于
electron
内置的node
版本和你电脑本机的版本不一致,则在使用node
原生模块的时候可能会报错,Error: The module '/path/to/native/module.node'
- 有3中方式可以解决该问题(下面会详细介绍两种使用方法,其他方式参考官方文档)
- 由于
electron进程之间通讯
-
主进程向渲染进程通讯
- 主进程使用
win.webContents.send
发送消息 - 渲染进程使用
ipcRenderer.on
接收消息
- 主进程使用
-
渲染进程向主进程通信
- 渲染进程使用
ipcRenderer.send
或者ipcRenderer.invoke
发送消息 - 主进程使用
ipcMain.on
或者ipcMain.handle
接收消息
- 渲染进程使用
-
渲染进程向渲染进程通信
- 通知事件
- 通过主进程转发(Electron 5之前)
ipcRenderer.sendTo
(Electron 5之后)
- 数据共享
- web技术(localStorage、sessionStorage、indexedDB、可嵌入型数据库等)
- 使用remote(尽量少用,容易影响性能)
由于公司使用的技术栈是vue
,所以需要将electron
和vue
结合起来,当然结合的方式也不麻烦,这里我们选用了electron-vue
这个开源框架。它已经将两者结合起来,并且能够独立打包成web
,但在使用过程中还是有些疑问和坑的,记录一下
electron-vue 的坑与填坑?
-
这个框架使用
vue-electron
模块,它的作用是什么?- 将 electron API 附加到 Vue 对象,不需要显式的在vue中引入electron(
require('electron')
) vue-electron
源码很简单,将$electron
挂载到vue的原型上
const electron = require('electron') module.exports = { install: function (Vue) { Object.defineProperties(Vue.prototype, { $electron: { get () { return electron }, }, }) }, }
- 将 electron API 附加到 Vue 对象,不需要显式的在vue中引入electron(
-
这个框架使用
vuex-electron
模块,它的作用是什么?- 可以在多个进程中间可以共享状态,比如在
electron
的主进程和渲染进程中公用一个状态,并将数据存放在磁盘中
- 可以在多个进程中间可以共享状态,比如在
-
在主进程中使用
__dirname
与__filename
打包后,并不能得到我们预期的路径?- 在调用nativ