前段时间做了个客户端的项目，主要适用于老师教案管理、远程上课录屏、和学生互动答疑等场景，原生开发对公司来说成本有点大，基于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，简直不要太爽

• Chromium 是 Google 为发展 Chrome 浏览器而启动的开源项目，它对HTML5的支持非常优秀，其内嵌的V8引擎是业内效率最好的JavaScript脚本引擎之一，且其项目开源，又有专门的社区和团队维护，作为UI渲染引擎，它是不二之选，体验上，你可以试用下google chrome浏览器，基本一致
• Node.js （或者简称 Node） 一个工具，选择Node.JS，是因为开发桌面应用，本地资源操作是必备的能力，这方面JavaScript无能为力，而Node.JS则很好的解决了这个问题，它使得JavaScript操作本地资源变的毫无障碍。另一方面，Node.JS核心也是采用V8引擎，使得其与Chromium的整合变得更顺理成章
• API 应用程序接口描述了一系列可供你使用的函数库中的函数

我绝对是有道词典的忠实用户但是hex用的人较少怕遇坑爬不出来，nwjs主要优点是能兼容winXP，但是我不需要。。。而且nw和Electron是同一个大佬一前一后开发，Electron相当于是nwjs的重构升级版，官网又这么好看又那么火，还犹豫？

简单介绍

官网传送门

• 官方api https://Electronjs.org/docs
• Electron-vue文档 https://simulatedgreg.gitbooks.io/Electron-vue/content/cn/getting_started.html
• 中文社区文档https://Electron.org.cn/doc/index.html

常用的一些模块：

• 文件打开删除等操作 shell模块 https://Electronjs.org/docs/api/shell
• 窗口管理修改新建参数等 BrowserWindow模块 https://Electronjs.org/docs/api/browser-window
• 主进程和渲染进程通信 ipcRenderer 模块 https://Electronjs.org/docs/api/ipc-renderer
• 获取屏幕大小、鼠标位置等信息 screen 模块 https://Electronjs.org/docs/api/screen
• 渲染进程使用BrowserWindow 实例 remote模块 https://Electronjs.org/docs/api/remote

暗 坑

Electron是个很成熟很完善的框架，所以这些也不叫暗坑，只是小白如果没有很仔细的阅读api就可能容易掉坑里，不要问我为什么知道，我是有故事的人

Q、已经引了BrowserWindow 为什么使用函数会是undefined？

A、Electron分为主进程和渲染进程，Electron 运行 package.json 的 main 脚本的进程被称为主进程只有一个，而渲染进程就是你的页面一个BrowserWindow 实例，所以api也分为主进程和渲染进程以及两者通用的api，所以用api的时候得注意，在渲染进程中使用 BrowserWindow 实例需要引入 remote 模块

主进程可用的模块: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, 为什么页面还是白色，开发模式下看透明窗口需要关掉开发者模式后刷新

Q、新建一个窗口，然后拖动该窗口，宽度和高度会小于指定值？

A、 guthub上有大佬说setResizable: false下最小化且连续恢复，则窗口的高度每次都会减少一个看起来等于菜单栏的量，取消菜单后正常，设置window.setMenu(null)，但是这个方法对我不适用
在 issues上翻了一圈，最后 useContentSize: true设置为true + 更改width和height属性以适应测量大小 = 解决

Q、navigator.mediaDevices.getUserMedia 使用该属性报错？

A、之前使用这个属性报错还以为Electron不支持，感觉很奇怪他继承的是最新的 chromium 为什么会不支持这个属性，然后某天翻api发现 desktopCapturer 模块，这个属性被Electron封装了，需要引入 desktopCapturer 模块，所以敲黑板一定要认真看api

Q、打包问题？

A、前端大部分框架都封装了webpack，glup什么的都有打包功能，然后一搜 “ 某某框架 打包 ” ，出来的都是什么打包报错？ 空白？一大堆问题，感觉这个问题好像无解
之前我写demo的时候打包各种报错，可能是因为写demo的时候各种实验各种乱搞把框架玩坏了，反正正式写项目的时候一个打包问题都没有碰到过
只是一点第一次打包的时候很慢，因为Electron需要翻墙下载文件，这时候如果打包失败，多半就是被墙了

Q、’'和’/‘符号路径问题

A、通过Electron获取的路径这样的’d:\project...’，本来挺好的文件保存读取什么的用这个路径都挺正常的，但是使用nodejs的exec库调取cmd执行ffmpeg的命令会报错，需要把路径分隔符’'换成’/‘

Q、关于新建窗口时的白屏

A、新建窗口由于加载页面和初始化窗口会有一段时间的白屏，有个方法就是初始化程序的时候就加载的所有窗口，但是只显示主窗口,其余的窗口隐藏,这样就能有效创建窗口时的白屏