快速了解Electron的身世

前言

今天通过技术核心、发展历程、常用模块三部分内容简单的介绍一下Electron的身世。

技术核心

使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序的开源架构

1. Web技术

• Electron 基于 Chromium 和 Node.js, 让你可以使用前端技术构建应用。

2. 开源

• Electron 是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目。

3. 跨平台

• Electron 兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。

发展历程

• 2013年4月11日，Electron以Atom Shell为名起步。
• 2014年5月6日，Atom以及Atom Shell以MIT许可证开源。
• 2015年4月17日，Atom Shell改名为Electron。
• 2016年5月11日，1.0版本发布。
• 2016年5月20日，允许向Mac应用商店提交软件包。
• 2016年8月2日，支持Windows商店。
• 2018年，2.0版本（5月2日），3.0版本（9月19日），4.0版本（12月21日）发布。
• 2019年，5.0版本（4月25日），6.0版本（7月30日），7.0版本（10月22日），8.0版本（2月4日）发布。

常用模块

app

• 代码举例

const { app } = require('electron')
app.on('window-all-closed', () => {
  app.quit()
})

BrowserWindow

• 代码举例

const { BrowserWindow } = require('electron')

let win = new BrowserWindow({ width: 800, height: 600 })
win.on('closed', () => {
  win = null
})

win.loadURL('https://github.com')

dialog

• 代码举例

const { dialog } = require('electron') 

dialog.showMessageBox(mainWindow, {
            type: 'info',
            defaultId: 0,
            message: '您是否确定现在退出？',
            buttons: ['退出','取消']
        })

Menu

• 代码举例

const { Menu, MenuItem } = require('electron')

const menu = new Menu()
menu.append(new MenuItem({ label: 'MenuItem1', click() { console.log('item 1 clicked') } }))
menu.append(new MenuItem({ type: 'separator' }))
menu.append(new MenuItem({ label: 'MenuItem2', type: 'checkbox', checked: true }))

desktopCapturer

• 代码举例

// In the renderer process.
const { desktopCapturer } = require('electron')

desktopCapturer.getSources({ types: ['window', 'screen'] }).then(async sources => {
  for (const source of sources) {
    if (source.name === 'Electron') {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({
          audio: false,
          video: {
            mandatory: {
              chromeMediaSource: 'desktop',
              chromeMediaSourceId: source.id,
              minWidth: 1280,
              maxWidth: 1280,
              minHeight: 720,
              maxHeight: 720
            }
          }
        })
        handleStream(stream)
      } catch (e) {
        handleError(e)
      }
      return
    }
  }
})

function handleStream (stream) {
  const video = document.querySelector('video')
  video.srcObject = stream
  video.onloadedmetadata = (e) => video.play()
}

function handleError (e) {
  console.log(e)
}

clipboard

• 代码举例

const { clipboard } = require('electron')

clipboard.writeText('hello i am a bit of text!')

const text = clipboard.readText()
console.log(text)
// hello i am a bit of text!'

查看专栏详情 立即解锁全部专栏