常见问题
除了官方内容外,还直接集合了各种常见方法,适用于初学者和懒癌;
Electron何时将Chrome升级为最新版本?
通常会在stable(稳定)版的Chrome发布后的两周内,不过由于工作量的问题,该时间并不能完全保证.
虽然我们只使用了稳定版Chrome,但是beta 或 dev 版中发布了重要的更新或修复时,我们会立即打上这个补丁.
更多细节,参考安全，本地功能和你的责任注意,该章节译者尚未精校,目前使用中文官译本
Electron何时将Node.js升级为最新版本?
通常会在最新版Node.js发布一个月之后,以此来避免Node.js刚发布后的常见bug.
Node.js的新特性一般是由V8升级引起的,由于Electron使用的是Chrome浏览器内置的V8,所以Electron中常常内置了新 Node.js 才有的部分特性.
如何在两个网页间共享数据?
要在网页(渲染器进程)之间共享数据，最简单的方法是使用浏览器中已经可以使用的HTML5 API,如Storage API, localStorage, sessionStorage, 和 [IndexedDB][indexed-db].
你也可以利用Electron的IPC机制实现,先将主进程中的对象存储为全局变量,再通过 electron模块的 remote属性从渲染器访问它们.
1
// 在主进程中
2
global.sharedObject = {
3
someProperty: 'default value'
4
}
Copied!
1
// 在第一个页面中
2
require('electron').remote.getGlobal('sharedObject').someProperty = 'new value'
Copied!
1
// 在第二个页面中
2
console.log(require('electron').remote.getGlobal('sharedObject').someProperty)
Copied!
为什么应用窗口或托盘图标在一段时间后消失不见了?
这是因为用于存储窗口和托盘的变量被垃圾回收了,更多细节请阅读以下文章:
如果你只是需要快速修复这个问题的话,你可以通过下面的方式更改变量作用域,以避免这个变量被垃圾回收.
示例:
1
const {app, Tray} = require('electron')
2
app.on('ready', () => {
3
const tray = new Tray('/path/to/icon.png')
4
tray.setTitle('hello world')
5
})
Copied!
改成:
1
const {app, Tray} = require('electron')
2
//let的作用即防止被垃圾回收
3
let tray = null
4
app.on('ready', () => {
5
tray = new Tray('/path/to/icon.png')
6
tray.setTitle('hello world')
7
})
Copied!
为什么在Electron中无法使用jQuery/RequireJS/Meteor/AngularJS ?
由于Electron集成了Node.js,所以在DOM中插入某些额外变量,比如 module, exports, require.等等. 这将导致许多库不能正常运行，因为它们也要插入同名变量。
我们可以通过禁用 Node.js 来解决这个问题:
1
// 主进程中
2
const {BrowserWindow} = require('electron')
3
let win = new BrowserWindow({
4
webPreferences: {
5
nodeIntegration: false
6
}
7
})
8
win.show()
Copied!
但是,如果你仍然需要Node.js 和 Electron 的 API,那么你在引入那些库之前将这些变量重命名，比如:
1
<head>
2
<script>
3
// 重命名 Electron自带的 require
4
window.nodeRequire = require;
5
delete window.require;
6
delete window.exports;
7
delete window.module;
8
</script>
9
<script type="text/javascript" src="jquery.js"></script>
10
</head>
Copied!
或者使用这个:
1
<script src=`jquery.min.js`></script>
2
<script>if (typeof module === 'object') {window.jQuery = window.$ = module.exports;};</script>
Copied!
为什么 require('electron').xxx 结果是 undefined ?
使用Electron的内置模块时,你可能会遇到如下错误:
1
> require('electron').webFrame.setZoomFactor(1.0)
2
Uncaught TypeError: Cannot read property 'setZoomLevel' of undefined
Copied!
这是由于你在项目或全局中已安装了npm electron 模块,这些模块把Electron内置模块覆盖了.
你可以输出electron模块的路径来验证是否使用了正确的内置模块:
1
console.log(require.resolve('electron'))
Copied!
然后,再检查一下格式是否是这样子的:
1
"/path/to/Electron.app/Contents/Resources/atom.asar/renderer/api/lib/exports/electron.js"
Copied!
如果输出的路径类似 node_modules/electron/index.js,那么你需要移除或重名npm的 electron模块.
1
npm uninstall electron
2
npm uninstall -g electron
Copied!
如果问题依旧.你可能需要仔细检查一下拼写或可能在错误的进程中使用了该模块.比如 electron.app只能在主进程中使用,而 electron.webFrame只能在渲染进程使用.
有哪些asar文件常用命令?
asar文件常用命令,所在目录运行以下命令:
1
安装:$ npm install asar -g
2
压缩:$ asar pack app app.asar
3
解压:$ asar extract app.asar testpath
Copied!
更多asar用法,请移步应用分发
Electron是否可以创建可全透明并可穿透的窗口?
目前Electron有两个不足：
第一即无法创建可穿透的透明窗口（虽然可以通过禁用加速来实现,但得不偿失），这样限制了前台异形UI的发展。
第二点即尚未支持或以后可能也不支持对移动端平台的支持，只能是自己绕着路子的实现，这样也就增加了开发成本。
Electron自带的托盘右键菜单过丑,如何自定义托盘右键菜单?
Tray模块调用的是系统菜单,牺牲UI但强调了实用性.如果需要自定义菜单,有许多此类Node模块.此类问题你只需记得Electron不仅可以使用自身API创建相关内容,也可以充分利用Node API或相关模块,可以无限拓展.
当然你还可以使用以下方式轻松实现:
[indexed-db]: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API