Electron应用有哪些？

一、基础概念

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通信机制，将已经开启的服务器地址和端口号发送给主应用程序窗口。