Electron 是一个开源的框架,它通过使用 Chromium 和 Node.js 技术栈,让你可以用 HTML,CSS 和 JavaScript 语言来开发桌面应用。Electron 采用了类似于浏览器的架构,你可以用它来构建跨平台的桌面应用,而且是 Native 应用。
Electron 开发小程序与 web 开发有很多相似之处。开发者可以使用 HTML、CSS、JavaScript、以及 Node.js 中的模块进行开发。不同的是,Electron 的 Web 编程与性能更类似原生应用,拥有更多 API 来帮助实现更好的桌面应用体验。
下面是一个简单的 Electron 程序的基本结构:
``` javascript
// 引入 Electron 模块
const { app, BrowserWindow } = require('electron')
// 定义一个新的BrowserWindow
let mainWindow
// 创建一个新的BrowserWindow
function createWindow () {
// 创建一个宽600px,高400px,无边框的浏览器窗口
mainWindow = new BrowserWindow({ width: 600, height: 400, frame: false })
// 固定窗口大小
mainWindow.setResizable(false)
// 加载主页index.html
mainWindow.loadFile('index.html')
// 打开 开发者工具 (DevTools) (调试)
mainWindow.webContents.openDevTools()
// 窗口关闭时触发
mainWindow.on('closed', function () {
// 将窗口对象设置为null
mainWindow = null
})
}
// 应用启动后触发
app.on('ready', createWindow)
// 所有窗口关闭触发
app.on('window-all-closed', function () {
// Mac OS 中,所有程序都在任务栏中,除非强制退出
if (process.platform !== 'darwin') {
app.quit()
}
})
// 活跃(激活)触发
app.on('activate', function () {
// 在Mac OS中,单击程序图标,应该可以在 Dock 中重新创建一个窗口
if (mainWindow === null) {
createWindow()
}
})
```
如上所示,使用 Electron 开发一个应用程序只需要少量的代码。我们引入了 electron,在app的ready事件中,我们创建了一个BrowserWindow对象,并加载了应用的主页面,关闭窗口时,我们将mainWindow对象设置为null。
在createWindow函数中,我们还可以定义更多的选项,例如修改窗口宽度和高度,打开或关闭devtools窗口,还可以定义菜单等。在窗口加载的HTML文件中,你可以使用你熟悉的任何 Web 技术来实现应用程序的 User Interface,包括 DOM、CSS、WebSocket 等等。Electron 甚至支持使用本地模块,来让你方便地使用文件系统和其他本地资源。
总之,Electron 可以让你用常见的 Web 编程技术来写出桌面程序,同时又拥有极高的性能表现和可靠性,而且由于支持跨平台,可以实现一份代码多平台运行,非常适合开发小型的跨平台应用,并且极大地提升了开发效率。