桌面端框架Electron使用问题整理和总结

文章主要记录了使用electron日常开发中所遇到的一些坑以及怎样填坑，帮助其他开发的小伙伴少踩一些坑。建议关注收藏，以便遇到时候方便查阅！

electron这个框架我就不过多介绍了，是使用node和Chromium架构的一个桌面端框架，如果有了解使用web技术开发桌面端，这个框架多少会听说过或者正在使用。

下面就记录一下自己在阅读文档的一些疑问以及开发过程中踩过的坑！

electron？

1. Spectron 和 Devtron 的作用？

   • Spectron可以和其他的mocha等测试框架进行结合，测试electron
   • Devtron是Electron DevTools的扩展，可以帮助你检查，监控和调试应用程序。默认是关闭状态

2. <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />的作用？

   • 设置 HTTP 的 Content-Security-Policy 头部字段
   • 为了防止XSS攻击，安全考虑可以在content中设置允许加载的脚本的源

3. electron-forge的作用？

   • 是一个快速构建electron的构建工具，里面包含打包、自动更新等
   • 内部书写html和js为原生写法，未集成第三方框架

4. 在electron中使用iframe和webview的的区别？

   • 官方建议使用iframe代替webview,webview标签可以加载一个访客模式的URL页面，由于这个标签是基于Chromium webview，目前架构变化较快，不够稳定。但是webview所提供的功能较多，比如控制访客能否前进后退等

5. window.open()使用native和chrome的区别是什么？

   • 在electron中使用window.open()打开一个URL使用，会创建一个BrowserWindow实例,使用的是native的窗口，可以通过设置nativeWindowOpen: true来使用chrome内置的window.open()，同步打开窗口

6. electron-packager 和 electron-builder 的打包区别？为什么推荐使用 electron-builder？

   • electron-packager 和 electron-builder 都是用于electron应用打包的模块， 相比较electron-builder有更丰富的功能，支持更多的平台，打包的文件更加轻量，支持非electron内置的自动更新（内置的自动更新需上传到git等支持平台）

7. 在electron中使用node原生模块的时候，electron-rebuild能够简化原生的重编译？

   • 由于electron内置的node版本和你电脑本机的版本不一致，则在使用node原生模块的时候可能会报错，Error: The module '/path/to/native/module.node'
   • 有3中方式可以解决该问题（下面会详细介绍两种使用方法，其他方式参考官方文档）

electron进程之间通讯

1. 主进程向渲染进程通讯

   • 主进程使用 win.webContents.send 发送消息
   • 渲染进程使用 ipcRenderer.on 接收消息

2. 渲染进程向主进程通信

   • 渲染进程使用 ipcRenderer.send 或者 ipcRenderer.invoke 发送消息
   • 主进程使用 ipcMain.on或者ipcMain.handle 接收消息

3. 渲染进程向渲染进程通信

• 通知事件
  • 通过主进程转发（Electron 5之前）
  • ipcRenderer.sendTo（Electron 5之后）
• 数据共享
  • web技术（localStorage、sessionStorage、indexedDB、可嵌入型数据库等）
  • 使用remote(尽量少用，容易影响性能)

由于公司使用的技术栈是vue，所以需要将electron和vue结合起来，当然结合的方式也不麻烦，这里我们选用了electron-vue这个开源框架。它已经将两者结合起来，并且能够独立打包成web，但在使用过程中还是有些疑问和坑的，记录一下

electron-vue 的坑与填坑？

1. 这个框架使用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
           },
         },
       })
     },
   }
   
   

2. 这个框架使用vuex-electron模块，它的作用是什么？

   • 可以在多个进程中间可以共享状态，比如在electron的主进程和渲染进程中公用一个状态，并将数据存放在磁盘中

3. 在主进程中使用__dirname