Electron踩坑指南不完全篇

前段时间做了个客户端的项目,主要适用于老师教案管理、远程上课录屏、和学生互动答疑等场景,原生开发对公司来说成本有点大,基于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的重构升级版,官网又这么好看又那么火,还犹豫?

简单介绍

官网传送门

常用的一些模块:

暗 坑

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

推荐阅读更多精彩内容