文章主要记录在日常使用electron开发中遇到的一些陷阱以及如何补上，帮助其他开发小伙伴避免一些陷阱。建议关注收藏，方便遇到时查看！如果您觉得它有用，请给它一个赞并继续！Electron的框架就不多介绍了。它是一个使用node和Chromium架构的桌面端框架。如果你知道如何使用web技术开发桌面端，你可能听说过或正在使用这个框架。记录下我在阅读文档时的一些疑问和开发过程中踩过的坑！电子？Spectron和Devtron做什么？Spectron可以与其他测试框架结合使用，例如mocha。测试electronDevtron是ElectronDevTools的扩展，它可以帮助您检查、监控和调试应用程序。默认关闭。它是做什么的？设置HTTP的Content-Security-Policy头域为了防止XSS攻击，出于安全考虑可以在content中设置允许加载脚本源electron-forge角色吗？是一个快速构建electron的构建工具，包括打包，自动更新等。内部写的html和js都是原生写的，不集成第三方框架在electron中使用iframe和webview有什么区别？官方建议是用iframe代替webview。webview标签可以加载访问者模式的URL页面。由于该标签基于Chromiumwebview，目前架构变化较快，不够稳定。但是webview提供了更多的功能，比如控制访问者是否可以前进和后退等。在window.open()中使用native和chrome有什么区别？在electron中使用window.open()打开一个URL，然后将使用本机窗口创建一个BrowserWindow实例。可以通过设置nativeWindowOpen:true来使用chrome内置的window.open()同时打开窗口electron-packagerpackaging和electron-builder有什么区别？为什么推荐electron-builder？electron-packager和electron-builder都是用于封装electron应用的模块。与electron-builder相比，它们的功能更丰富，支持的平台更多，打包后的文件也更轻量。支持非electron内置自动更新（内置自动更新需要上传支持git等平台）在electron中使用nodenativemodules时，electron-rebuild可以简化native重编译吗？由于electron内置的node版本和你电脑的版本不一致，使用nodenative模块可能会报错，Error:Themodule'/path/to/native/module.node'Thereare3ways解决这个问题问题（下面会详细介绍两种使用方法，其他方法参考官方文档）electron进程间通信主进程与渲染进程通信主进程使用win.webContents.send发送消息渲染进程使用ipcRenderer.on接收消息渲染进程向主进程发送消息进程通信渲染进程使用ipcRenderer.send或ipcRenderer.invoke发送消息主进程使用ipcMain.on或ipcMain.handle接收消息)数据共享web技术（localStorage,sessionStorage,indexedDB,embeddabledatabase等）使用remote（尽量少，容易影响性能）自从使用的技术栈公司是vue，当然要结合electron和vue方式不麻烦，这里我们选择electron-vue这个开源框架它把两者结合起来，可以独立打包成一个web，但是在使用过程中还是有一些疑惑和坑。记录下electron-vue的坑坑洼洼？这个框架使用了vue-electron模块，它的作用是什么？将electronAPI附加到Vue对象，而无需显式将electron引入vue(require('electron'))。vue-electron的源码非常简单。在vue的原型上挂载$electronconstelectron=require('electron')module.exports={install:function(Vue){Object.defineProperties(Vue.prototype,{$electron:{get(){returnelectron},},})},}这个框架使用了vuex-electron模块，它有什么作用？状态可以在多个进程之间共享。比如Electron的主进程和渲染进程共享一个公共状态，数据存储在磁盘中。在主进程中用__dirname和__filename打包后，获取不到我们期望的路径？我在调用原生dll的时候也遇到了这个问题。打包前可以获取到正确的路径。打包后文件会放在虚拟文件app.asar中，路径会出错。解决方法：electron-vue提供了_static全局变量解决这个问题，只要把static文件放到__static文件夹下即可(path.join(__static,'/xxx.dll'))如果你只使用electron本身的框架，你需要自己设置开发时初始化路径和打包访问路径，项目完成后会报错：ReferenceError:processisnotdefined可以把<%if(!process.browser){%>改成<%if(!require('process').browser){%>（如果需要打包成web，请不要使用此方法）或者在webpack.renderer.config.js中修改以下生成代码（其实就是配置页面使用的流程参数，如果需要打包成web，可以使用这个方法，但是不要在webpack.web.config.js中添加这段代码）newHtmlWebpackPlugin({filename:'index.html',template:path.resolve(__dirname,'../src/index.ejs'),+templateParameters(compilation,assets,options){+return{+compilation:compilation,+webpack:compilation.getStats().toJson(),+webpackConfig:compilation.options,+htmlWebpackPlugin:{+files:assets,+options:options+},+process,+};+},minify:{collapseWhitespace:true,removeAttributeQuotes:true,removeComments:true},nodeModules:process.env.NODE_ENV!=='production'?path.resolve(__dirname,'../node_modules'):false}),构建项目后electron版本默认为2.x，报错升级版本后会报moduleisnotdefinedreason新版electron默认不开启node集成，在创建窗口时添加如下代码main/index.jsmainWindow=newBrowserWindow({height:563,useContentSize:true,width:1000,+webPreferences:{+nodeIntegration:true+}})errorUnabletoinstallvue-devtools原因是vue-devtools需要从外网下载，大家可以科学上网。在这个项目中调用vuex的mutations会报错请不要使用directcommit的，使用dispatch代替这个。这里建议不能使用同步方式修改，应该通过调用action来触发修改。原因是vuex-electron加载了多进程共享mutations插件。解决方法：1.在store/index.js中注解createSharedMutations插件即可2.通过调用action触发mutations，在主进程main/index.js中添加代码import'../renderer/store'3.查询vuex-electronithub，按照文档设置白名单，vuex中存储的数据这里不再赘述。即使项目刷新重启，数据依然存在（该功能可以设置用户长期保存的数据）。vuex-electron将数据存储在磁盘中，可以通过默认路径app.getPath('userData')在存储路径下找到一个vuex.json文件，安装不同的electron应用，会生成一个vuex.json文件文件目录下。Vuex-electron内部使用了electron-store模块。这个module可以设置数据，但是vuex-electron没有暴露。解决方法：如果想在刷新或关闭后重新设置数据，如web中，直接删除下面第九题中插件加载的模块即可。可以使用npmrunbuild:webpackaging，报错Error:Can'tresolve'fs'inxxxx修改renderer/store/index.js，去掉web中的vuex-electron并删除显示引入vuex-electronimportVuefrom'vue'从'vuex'导入Vuex-导入{createPersisted状态，createSharedMutations}from'vuex-electron'importmodulesfrom'./modules'Vue.use(Vuex)exportdefaultnewVuex.Store({modules,+plugins:process.env.IS_WEB?[]:[+require('vuex-electron').createPersistedState(),+require('vuex-electron').createSharedMutations()],strict:process.env.NODE_ENV!=='production'})打包错误报告这里最简单的错误报告是下载parts=8size=63MBurl=https://github.com/electron/electron/releases/download/vx.x/electron-vx.x-win32-x64.zip失败解决办法：手动去https://npm.taobao.org/mirrors/electron找到对应的electron版本下载，手动将下载的文件放在C:\Users\用户名\AppData\Local\electron\Cache文件夹下（AppData为隐藏文件夹）electron调用Native方法安装环境（mac环境不需要第一步安装）管理员权限执行npminstall--globalwindows-build-tools安装python和C++环境。如果安装不了，可以单独安装python（v2.7、3.x不支持）VisualC++BuildTools，或者vs2015及以上npminstall-gnode-gyp编译nativenode模块（electron使用nodenativemodules来待编译）node-gyplist查看是否缺少node.lib库，按照提示安装node-gypinstallinEnablerenderinglayernodeintegrationinsrc/main/index.jsCallC/C++dllnpminstallffi-napi通过node-ffi模块--save安装调用C/C++dll的模块如果找不到python路径，设置python环境变量或者npmconfigsetpythonyourpythonpath如果还是不行，试试用yarn安装npminstallelectron-rebuild---save-devinstall自动编译本地节点模块。如果不安装，可以手动编译。方法如下：进入node_module/ffi-napi文件夹，执行node-gyprebuild--target='currentelectronversion'--arch=x64--dist-url=https://atom.io/download/atom-shell编译nodenativemodulearch:computerarchitecture(x64oria32)，如果node环境是32位，那么这里就是ia32，如果node环境是64位，那么这里就是x64如果路径不对，替换成国内镜像路径--dist-url=https://npm.taobao.org/mirror...然后进入node_module/ref-napi文件夹执行node-gyprebuild--target='currentelectronversion'--arch=x64--dist-url=https://atom.io/download/atom-shell编译nodenativemodule如果自动编译，执行npxelectron-rebuild。上一步手动编译不需要这一步剩下的就是在主进程中调用native方法，渲染进程可以通过ipcRenderer和ipcMain的通信来调用。举个小例子//mainprocess//callingexampleconstffi=require('ffi-napi')constCTEST=ffi.Library('dllfilepath',{//文件中的方法和参数类型'Add':['float',['float','float']],'Hello':['string',[]],'StrLength':['int',['string']]})//同步调用CTEST.Hello()//异步调用CTEST.StrLength.async('1234',(error,res)=>{console.log(error,res)})这里有两点需要注意。如果不使用electron-vue框架（electron-vue已经对静态文件路径做了处理），需要注意打包后的静态文件路径。有些问题，你可以在package.json文件中配置构建后将“extraFiles”存储在dll文件中：[{"from":"","to":""}]64-bitdllscannotbecalledon32位机，会报错。调用C#dllnpminstallelectron-edge-js--save安装通过electron-edge-js模块调用C#dll的模块。这里electron的版本不能是8.x，7.x版本的页面刷新有bug。目前，此模块支持*Electron1.6.x-Node.jsv7.4.0.*Electron1.7.x-Node.jsv7.9.0.*Electron1.8.x-Node.jsv8.2.1.*Electron2.x-Node.jsv8.9.3.*Electron3.x-Node.jsv10.2.0.*Electron4.0.4+-Node.jsv10.11.0.*Electron5.x-Node.jsv12.0.0.*Electron6.x-Node.jsv12.4.0.*Electron7.x-Node.jsv12.8.1//主进程//调用示例constedge=require('electron-edge-js')constedgeDll=edge.func({assemblyFile:'dllfilepath',typeName:"Edge_test.Class1",methodName:“Concat”})edgeDll({first:'aaa',second:'bb'},function(error,result){if(error)throwerrorconsole.log('C#DLL:',result)})##使用robotjs控制鼠标键盘，node-serialport进行串口通信等1.使用方法这里不再赘述，查询文档即可这些模块也是nodenative模块，所以需要编译。2.自动编译同上`npxelectron-build`。有时自动编译效果不好，需要手动编译。3.手动编译`npmrebuild--runtime=electron--disturl=https://atom.io/download/atom-shell--target=--abi=`或者直接进入模块文件夹，通过node-gyp编译：`node-gyprebuild`4。Abi查询网址：https://github.com/mapbox/node-pre-gyp/blob/master/lib/util/abi_crosswalk.json##自动更新**因为项目代码放在自己的服务中并不会被签名，所以放弃`electron`内置的自动更新。项目使用的打包方式是`electron-builder`，最后决定使用`electron-updater`模块进行自动更新，不依赖任何服务器，可以从S3，GitHub或者其他静态文件进行更新存储，避免Electron内置的Update机制****mac上的代码必须签名**这里是一个简化的例子1.`npminstallelectron-updater--save`安装自动更新模块2.编写更新主进程中的代码//每次应用启动时，会自动去文件服务器检查更新，并自动更新重启import{autoUpdater}from'electron-updater'autoUpdater.on('update-downloaded',()=>{autoUpdater.quitAndInstall()})app.on('ready',()=>{if(process.env.NODE_ENV==='production')autoUpdater.checkForUpdates()})```配置包更新服务器地址（这里的配置是从你自己的文件服务器更新获取的）"build":{"publish":{"provider":"generic","url":"http://127.0.0.1:8080"//服务器地址}}打包安装，必要时更新修改包.json版本，重新打包，抛出3files.exelatest.yml.exe.blockmap直接在文件服务器地址。下次用户打开应用程序时，它会自动更新。在电子中启动节点服务。这里的代码比较简单。这里有一个思路：在主进程中创建一个子进程来执行节点服务（child_process.fork），子进程和主进程通过进程进行通信，主进程拿到数据后，主进程渲染层可以通过ipcMain和ipcRenderer进行通信。以上是我在阅读文档和项目中遇到的一些问题和陷阱。我会记录下来分享出来，帮助其他朋友避免一些坑。谢谢阅读！如果文章对您有所帮助，欢迎关注公众号，不定期推送优质文章！！！
