Electron 是一个使用 JavaScript、HTML 和 CSS 等 Web 技术创建跨平台桌面应用程序的框架。它结合了 Chromium 渲染引擎和 Node.js 运行时,允许开发者构建高质量的桌面应用。下面是一个简要的 Electron 开发教程,从基础到深入,并包括一些常见的报错问题及其解决方案。
一、介绍 Electron
Electron 能够使用前端技术栈开发桌面应用,支持 Windows、macOS 和 Linux。其主要特点包括:
- 使用 HTML、CSS 和 JavaScript 构建用户界面。
- 内置了对自动更新、原生菜单和通知的支持。
- 允许开发者使用 Node.js 的 API 和任何 npm 模块。
二、创建基础 Demo
安装 Node.js:确保已安装最新版本的 Node.js。
初始化项目:
mkdir my-electron-app && cd my-electron-app
npm init -y
安装 Electron:
npm install electron --save-dev
创建主进程文件(main.js):
const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
win.loadFile('index.html')
}
app.whenReady().then(createWindow)
创建 index.html 文件:
<!DOCTYPE html>
<html>
<head>
<title>My Electron App</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
在 package.json 中添加启动脚本:
"scripts&