标签：
请切换到02-basic-sound-machine这个tag:
git checkout 02-basic-sound-machine
简要重述–应用窗口（更准确的说是渲染进程）应该不能与GUI（用来关闭窗口）通信的，官方的Electron快速入门指南写到：
在web页面，不允许调用原生GUI相关的API，因为在web页面管理原生GUI资源是很危险的，会很容易泄露资源。如果你想在web页面施行GUI操作，web页面的渲染进程必须要与主进程通信，请求主进程来完成这些操作。
Electron提供ipc（进程间通信）模块来实现这类通信。ipc模块可实现从通道订阅消息，发送消息给通道的订阅者，通道区分消息的接收者，用字符来标识（例如，通道1，通道2）。消息也可以包含数据。当接收到消息，订阅者可以做出反应，甚至回复消息。消息最大的好处就是隔离 — 主进程不必知道哪个渲染进程发出消息。
这正是我们在做的 — 主进程（main.js）订阅「close-main-window」通道的消息，关闭按钮被点击时，渲染进程（index.js）通过通道发出消息。
在main.js里添加下面的代码，从通道订阅消息：
var ipc = require(‘ipc‘);
ipc.on(‘close-main-window‘, function () {
app.quit();
});
引入ipc模块后，通过通道订阅消息就变得很简单，on()方法设置订阅的通道名，定义回调函数。
渲染进程要通过通道发送消息，将下面代码加入index.js：
var ipc = require(‘ipc‘);
var closeEl = document.querySelector(‘.close‘);
closeEl.addEventListener(‘click‘, function () {
ipc.send(‘close-main-window‘);
});
同样，我们引入ipc模块，给关闭按钮的元素绑定一个click事件。当点击关闭按钮时，通过「close-main-window」通道的send()方法发送消息。
这里还有个小问题，如果不注意会卡住你，我们已经讨论过–可拖动区域的可点击性。index.css需要把关闭按钮定义成不可拖动：
.settings {
...
-webkit-app-region: no-drag;
}
就这样，现在可以点击关闭按钮关闭我们的应用了。因为要监听事件或传递参数，通过ipc模块通信比较复杂。我们后面会看到一个传递参数的例子。
请切换到名为03-closable-sound-machine的tag:
git checkout 03-closable-sound-machine
基础的发声器工作顺利，但是我们有一个易用性问题–如果发声器一定需要切到应用窗口，再点击才能播放，这个发声器有什么用？
这时我们需要的就是全局快捷键。Electron提供一个全局快捷键模块，允许你监听自定义的键盘组合并做出反应。键盘组合也被叫做加速器，是一系列键盘点击组成的字符串（例如 “Ctrl+Shift+1”）。
既然我们想要捕捉一个原生GUI事件（全局快捷键），然后在应用窗口做出反应（播放声音），我们仍用ipc模块在主进程和渲染进程之间通信。
在深入到代码层面前，有两件事要考虑：
记住这些，现在用下面的代码来修改我们的main.js文件：
var globalShortcut = require(‘global-shortcut‘);
app.on(‘ready‘, function() {
... // existing code from earlier
globalShortcut.register(‘ctrl+shift+1‘, function () {
mainWindow.webContents.send(‘global-shortcut‘, 0);
});
globalShortcut.register(‘ctrl+shift+2‘, function () {
mainWindow.webContents.send(‘global-shortcut‘, 1);
});
});
首先，我们需要引入global-shortcut模块。然后当我们的程序加载完成，我们注册两个快捷键–一个响应Ctrl，Shift，1组合键，另一个响应Ctrl，Shift，2组合键。两者都会通过「global-shortcut」通道发送一条带一个参数的消息。我们用这些参数来播放相应的声音。在index.js中加入以下代码：
ipc.on(‘global-shortcut‘, function (arg) {
var event = new MouseEvent(‘click‘);
soundButtons[arg].dispatchEvent(event);
});
为了方便，我们会模拟一次按钮点击，用我们创建的soundButton选择器给按钮绑定一个播放声音。当收到带有参数1的消息，我们在soundButton[1]元素上模拟一次鼠标点击（在正式环境的应用，你应该封装播放声音的代码，并执行它）。
切换到名为04-global-shortcuts-bound的tag:
git checkout 04-global-shortcuts-bound
系统同时运行很多应用程序，我们预想的快捷键可能已经被占用了。这正是我们将要新建一个设置窗口，保存我们想要的键位修改的原因。
要实现这个目标，我们需要：
设置按钮和设置窗口
类似关闭主窗口，当点击设置按钮时我们通过通道从index.js发送消息。将下面代码加入index.js：
var settingsEl = document.querySelector(‘.settings‘);
settingsEl.addEventListener(‘click‘, function () {
ipc.send(‘open-settings-window‘);
});
点击设置按钮后，通道「open-settings-window」会发送一条消息到主进程。main.js现在需要做出响应，新建一个窗口，将下面代码插入main.js：
var settingsWindow = null;
ipc.on(‘open-settings-window‘, function () {
if (settingsWindow) {
return;
}
settingsWindow = new BrowserWindow({
frame: false,
height: 200,
resizable: false,
width: 200
});
settingsWindow.loadUrl(‘file://‘ + __dirname + ‘/app/settings.html‘);
settingsWindow.on(‘closed‘, function () {
settingsWindow = null;
});
});
没有什么新概念，我们会像打开主窗口一样打开新的设置窗口。不同之处是要先检查设置窗口是不是已经被打开，以防重复打开。
打开后，需要一种方法关闭设置窗口。同样的，我们会通过通道发送一条消息，但这次消息是从settings.js发出，将下面代码写入setting.js：
‘use strict‘;
var ipc = require(‘ipc‘);
var closeEl = document.querySelector(‘.close‘);
closeEl.addEventListener(‘click‘, function (e) {
ipc.send(‘close-settings-window‘);
});
在main.js里面监听那个通道，代码如下：
ipc.on(‘close-settings-window‘, function () {
if (settingsWindow) {
settingsWindow.close();
}
});
我们的设置窗口就完成了。
保存和读取用户的设置
切换到名为05-settings-window-working的tag:
git checkout 05-settings-window-working
与设置窗口交互，保存设置，再读取到我们的应用的过程大致是这样的：
我们可以简单的保存和读取main.js中的设置，但模块把逻辑抽象出来，以便我们可以在不同的地方引用，这看看起来更好。
Working with a JSON configuration
那就是我们新建configuration.js的原因。Node.js用CommonJS模块规范，这意味着你只可以暴露你的API，而其他文件或方法会引用API提供的方法。
为了让保存和读取更简便，使用nconf模块，它已经为我们抽象出读取和写入JSON文件的方法，非常符合我们的需求。但首先，我们要在CLI中执行下面的命令将它引入项目中：
npm install --save nconf
npm将nconf模块作为应用的依赖安装。在我们打包应用给终端用户时（相对用save-dev参数会只在开发环境中引入模块）将被引入和使用。
configuration.js文件非常的简单，在项目根目录下新建configuration.js文件，写入代码：
‘use strict‘;
var nconf = require(‘nconf‘).file({file: getUserHome() + ‘/sound-machine-config.json‘});
function saveSettings(settingKey, settingValue) {
nconf.set(settingKey, settingValue);
nconf.save();
}
function readSettings(settingKey) {
nconf.load();
return nconf.get(settingKey);
}
function getUserHome() {
return process.env[(process.platform == ‘win32‘) ? ‘USERPROFILE‘ : ‘HOME‘];
}
module.exports = {
saveSettings: saveSettings,
readSettings: readSettings
};
nconf只需要知道你的设置要保存到哪里，这里我们设置为客户的主文件夹和一个文件名。获取用户的主文件夹非常简单，只需要区别不同系统调用Node.js（process.env）（如用getUserHome()方法）。
通过nconf的内建方法来保存或读取设置（set()方法保存，get()方法读取，用save()和load()方法进行文件操作），用符合CommonJS规范的module.exports语法来导出API。
初始化修改的快捷键
在我们进行设置的交互之前，应初始化设置，以防我们先启动应用丢失设置信息。我们把变更键保存在一个数组中，数组以「shortcutKeys」为键，在main.js里初始化，我们首先要引用configuration模块：
‘use strict‘;
var configuration = require(‘./configuration‘);
app.on(‘ready‘, function () {
if (!configuration.readSettings(‘shortcutKeys‘)) {
configuration.saveSettings(‘shortcutKeys‘, [‘ctrl‘, ‘shift‘]);
}
...
}
尝试读取「shortcutKeys」键对应的值，如果读取不到，就设置一个初始值。
现在要重写main.js中的全局快捷键，这个方法可以在后面更新设置的时候直接调用。 去掉原来在main.js中注册快捷键的方法，改成：
app.on(‘ready‘, function () {
...
setGlobalShortcuts();
}
function setGlobalShortcuts() {
globalShortcut.unregisterAll();
var shortcutKeysSetting = configuration.readSettings(‘shortcutKeys‘);
var shortcutPrefix = shortcutKeysSetting.length === 0 ? ‘‘ : shortcutKeysSetting.join(‘+‘) + ‘+‘;
globalShortcut.register(shortcutPrefix + ‘1‘, function () {
mainWindow.webContents.send(‘global-shortcut‘, 0);
});
globalShortcut.register(shortcutPrefix + ‘2‘, function () {
mainWindow.webContents.send(‘global-shortcut‘, 1);
});
}
方法会重置全局快捷键，现在我们可以设置新的快捷键，从设置文件读取变更键数组，转换类加速器规则字符串，再注册全局快捷键。
与设置窗口交互
回到settings.js，我们要绑定click事件来修改我们的全局快捷键。首先，我们遍历所有勾选的复选框（从configuration模块中读取）：
var configuration = require(‘../configuration.js‘);
var modifierCheckboxes = document.querySelectorAll(‘.global-shortcut‘);
for (var i = 0; i < modifierCheckboxes.length; i++) {
var shortcutKeys = configuration.readSettings(‘shortcutKeys‘);
var modifierKey = modifierCheckboxes[i].attributes[‘data-modifier-key‘].value;
modifierCheckboxes[i].checked = shortcutKeys.indexOf(modifierKey) !== -1;
... // Binding of clicks comes here
}
现在我们要给复选框绑定行为。记得设置窗口（渲染进程）不能改动GUI绑定。这意味着我们需要从setting.js通过ipc发送消息（后面会处理消息）：
for (var i = 0; i < modifierCheckboxes.length; i++) {
...
modifierCheckboxes[i].addEventListener(‘click‘, function (e) {
bindModifierCheckboxes(e);
});
}
function bindModifierCheckboxes(e) {
var shortcutKeys = configuration.readSettings(‘shortcutKeys‘);
var modifierKey = e.target.attributes[‘data-modifier-key‘].value;
if (shortcutKeys.indexOf(modifierKey) !== -1) {
var shortcutKeyIndex = shortcutKeys.indexOf(modifierKey);
shortcutKeys.splice(shortcutKeyIndex, 1);
}
else {
shortcutKeys.push(modifierKey);
}
configuration.saveSettings(‘shortcutKeys‘, shortcutKeys);
ipc.send(‘set-global-shortcuts‘);
}
我们遍历了所有的复选框，绑定click事件，在每次点击时判断是否含有变更键。然后根据结果，修改数组，保存结果到设置，再给主进程发送消息，它会更新我们的全局快捷键。
下面要在main.js里的设置「set-global-shortcuts」这个ipc通道来更新我们的全局快捷键：
ipc.on(‘set-global-shortcuts‘, function () {
setGlobalShortcuts();
});
很简单，像这样，我们的全局快捷键就配置好了!
那怎样执行到最后一步呢？对桌面应用来说，另一个重要的概念就是菜单栏，还有就是怎样发布的平台的安装包。并且在下篇文章中我们会详细重点介绍并深入Electron.
Electron 安装和使用（三）-- 发声器electron进程间的通信
标签：
原文地址：http://blog.csdn.net/djy1992/article/details/51248617
