前言
今天通过技术核心、发展历程、常用模块三部分内容简单的介绍一下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!'