一、基础概念
Electron是Github开源的一款跨平台桌面应用程序开发框架，它使用JavaScript、HTML和CSS作为开发语言，是一种基于浏览器和Node.js运行的框架。
Electron的优点在于可以用简单易用的Web技术开发出高效、美观、可拓展的桌面应用程序。同时还可以使用Node.js的API接口访问底层操作系统，比如文件系统、窗口管理、系统任务栏、进程和网络等。
下面将从一些应用场景上，介绍几种Electron应用。
二、桌面应用程序
Electron最常见的用途之一就是开发桌面应用程序。通过Electron，可以轻松开发出基于桌面创建应用，以提高用户体验。这类应用程序包括：音频/视频播放器、文件管理器、即时通讯软件、文本/代码编辑器、游戏等。
下面是一个简单的文本编辑器示例：
const { app, BrowserWindow } = require('electron')
app.whenReady().then(() => {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
win.loadFile('index.html')
win.on('closed', () => {
app.quit()
})
})
该示例通过创建BrowserWindow对象并加载一个HTML文件创建了一个窗口。通过设置webPreferences属性中的nodeIntegration为true，使得应用可以在窗口中访问Node.js模块和原生的API，并且监听了窗口关闭事件，以便退出应用。
三、跨平台移动应用程序
Electron可以使用React Native的框架来制作跨平台移动应用程序，这些程序具有可移植、轻量化的特点，运行在Android和iOS等不同平台设备上。Electron还集成了许多工具和插件，可帮助开发者更方便地创建跨平台移动应用程序。
下面是使用React Native和Electron制作一个移动应用的示例：
const { app, BrowserWindow } = require('electron')
const { URL } = require('url')
const { spawn } = require('child_process')
let server = null
app.on('ready', () => {
server = spawn('npm', ['run', 'start'], {
cwd: `${__dirname}/app`
})
const win = new BrowserWindow({ width: 800, height: 600 })
win.loadURL(
new URL('http://localhost:3000', 'devtools://devtools/bundled/devtools_app.html').toString()
)
win.webContents.on('did-finish-load', () => {
win.webContents.executeJavaScript(`ReactDOM.render(React.createElement(App), document.body)`)
})
win.on('closed', () => {
server.kill('SIGTERM')
app.quit()
})
})
该示例启动本地设备上的React Native应用程序，并使用Electron创建了一个窗口。窗口通过loadURL方法加载了指向webpack运行时的地址，并通过监听did-finish-load事件在窗口载入完成后，将应用程序挂载到窗口上。
四、Chrome扩展程序
Electron也可用于创建Chrome扩展程序。只要在Electron的入口脚本中加载扩展程序的主文件，之后在应用中使用Electron的各种应用程序API，就可以更方便地访问原生函数。
下面是一个简单的Chrome扩展程序示例：
const path = require('path')
const { app, BrowserWindow, session } = require('electron')
let win = null
app.on('ready', () => {
win = new BrowserWindow({ width: 800, height: 600 })
win.loadURL(`chrome-extension://${app.getId()}/index.html`)
win.webContents.on('did-finish-load', () => {
session.defaultSession.loadExtension(
path.resolve(__dirname, 'extension')
)
win.webContents.executeJavaScript(`
chrome.app.runtime.onRestarted.addListener(function() {
chrome.runtime.reload();
});
`)
})
win.on('closed', () => {
win = null
})
})
该示例使用了Electron的BrowserWindow类来创建了一个新窗口，通过loadURL方法加载了指向index.html文件的地址，并在did-finish-load事件中加载了Chrome扩展程序，然后通过监听chrome.app.runtime.onRestarted事件，开启扩展程序的自动重载功能。
五、游戏开发
Electron在游戏开发方面也有着很大的应用空间。利用Electron的Web技术，独立的开发者和小公司也可以方便地构建出高效、美观、可拓展的电子游戏，并在不同平台上运行。
下面是一个基于Phaserjs和Electron的游戏示例：
var { app, BrowserWindow, ipcMain } = require('electron')
var path = require('path')
var http = require('http')
var url = require('url')
var fs = require('fs')
var rootDir = path.join(__dirname, '..')
var gameDir = path.join(rootDir, 'games/my_game')
var mainWindow = null
app.on('ready', function () {
mainWindow = new BrowserWindow({
width: 600,
height: 800
})
mainWindow.loadURL('file://' + path.join(__dirname, 'index.html'))
mainWindow.webContents.on('did-finish-load', function () {
var server = http.createServer(function (req, res) {
var pathName = url.parse(req.url).pathname
var filePath = pathName.split('/').slice(2).join(path.sep) // 去除前两个路径
var fullPath = path.join(gameDir, filePath)
if (fs.existsSync(fullPath)) {
fs.createReadStream(fullPath)
.on('error', function () {
res.writeHead(500)
res.end()
})
.pipe(res)
} else {
res.writeHead(404)
res.end()
}
})
.listen(8080)
ipcMain.on('server-start', function () {
mainWindow.webContents.send('server-started', 'http://localhost:8080')
})
})
mainWindow.on('closed', function () {
mainWindow = null
})
})
该示例利用了Phaser.js游戏引擎以及Electron框架的优势，简单地展示了如何在电子应用程序内部加载游戏资源文件，以及如何利用Electron的ipc通信机制，将已经开启的服务器地址和端口号发送给主应用程序窗口。
