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通信機制，將已經開啟的服務器地址和端口號發送給主應用程序窗口。