Electron踩坑指南不完全篇
1.8k
6
WEB
Electron
2018-12-13
前段时间做了个客户端的项目，主要适用于老师教案管理、远程上课录屏、和学生互动答疑等场景，原生开发对公司来说成本有点大，基于guthub上有各种桌面打包框架so只能前端上了
Electron + vue = product
这是一篇踩坑的记录，没有太深入的原理什么的讲解，主要是码代码过程中碰到的一些暗坑你如果正在写Electron的项目那么你也可能会遇到，这篇文章会给你一些参考
为什么用Electron
这是目前大家知道比较多的三种跨平台的桌面框架
NWJS
https://nwjs.io/
HEX
http://hex.youdao.com/zh-cn/tutorial/index.html
Electron
https://Electronjs.org/docs
| ** Electron ** | ** nw.js ** | ** hex **
:—-: | :—-: |:—:| :—:
** 发布时间 ** | 2013年 | 2011年 | 2012年
** 开发公司 ** | github | intel | 有道翻译
** 代表作 ** | Atom、Visual Studio Code 、WordPress | 微信web开发工具、钉钉 | 有道云笔记，有道词典
** github start ** | 66608 | 34555 | 1429
三个框架都是 chromium + nodejs + native api ， 不用考虑浏览器兼容性还能用nodejs，简直不要太爽
我绝对是有道词典的忠实用户但是hex用的人较少怕遇坑爬不出来，nwjs主要优点是能兼容winXP，但是我不需要。。。而且nw和Electron是同一个大佬一前一后开发，Electron相当于是nwjs的重构升级版，官网又这么好看又那么火，还犹豫？
简单介绍
常用的一些模块：
暗 坑
Electron是个很成熟很完善的框架，所以这些也不叫暗坑，只是小白如果没有很仔细的阅读api就可能容易掉坑里，不要问我为什么知道，我是有故事的人
Q、已经引了BrowserWindow 为什么使用函数会是undefined？
主进程可用的模块:app、autoUpdate、BrowserView、BrowserWindow、contentTracing、dialog、globalShortcut、inAppPurchase、ipcMain、Menu、MenuItem、net、netLog、powerMonitor、powerSaveBlocker、protocol、session、systemPreferences、Tray、webContents
渲染进程（网页）可用的模块:、desktopCapturer、ipcRenderer、remote、webFrame
两种进程都可用的模块:、clipboard、crashReporter、nativeImage、screen、shell
Q、想在渲染进程使用主进程的api？
A、有某些功能必须得在主进程才能实现，比如保存文件、选择文件路径什么的，这些操作可以使用 ipcRenderer 模块用于两个进程之间的通信，由渲染进程发出指令后在主进程进行功能操作
Q、单击PDF文件的链接时，Electron会提示下载而非直接预览？
A、单击PDF文件的链接时，在普通浏览器中它会预览该文件。但在Electron中你需要尝试使用 iframe 加载，如果无效可以再试下 webview
Q、动态的修改静态文件的路径会报链接404？
A、使用Electron-vue框架，动态的修改静态文件的路径会报链接404但是一开始写死就没问题，所有静态文件都建议放在根目录下 static 文件夹下，然后任何页面访问 static/… 即可
Q、透明窗口无效？
A、新建窗口时已经设置了frame: false,transparent: true, 为什么页面还是白色，开发模式下看透明窗口需要关掉开发者模式后刷新