Electron桌面应用开发教程：用Web技术构建原生客户端
Electron是一个开源框架，允许开发者使用Web技术（如HTML、CSS和JavaScript）构建跨平台的桌面应用程序。本教程将引导您从零开始创建一个简单的Electron应用，帮助您理解如何利用熟悉的Web技能开发原生客户端软件。
设置开发环境
在开始之前，确保您的系统已安装Node.js，因为Electron依赖于Node.js运行时。访问Node.js官网下载并安装最新版本的Node.js，这将同时包含npm（Node包管理器）。
安装Electron
打开终端或命令提示符，运行以下命令创建一个新的Electron项目：
npm init -y
npm install electron --save-dev
这将初始化一个新项目并安装Electron作为开发依赖。
创建基本Electron应用
在项目目录中，创建一个名为index.html的文件，用于定义应用的用户界面。这是一个简单的HTML文件：
<!DOCTYPE html> <html> <head> <title>Electron App</title> <style> body font-family: Arial; margin: 20px; </style> </head> <body> <h1>欢迎使用Electron桌面应用</h1> <p>这是一个简单的示例页面。</p> </body> </html>
然后，创建一个main.js文件作为Electron主进程代码：
const app, BrowserWindow = require('electron'); let mainWindow; function createWindow() mainWindow = new BrowserWindow( width: 800, height: 600 ); mainWindow.loadFile('index.html'); mainWindow.on('closed', function() mainWindow = null; ); app.on('ready', createWindow); app.on('window-all-closed', function() if (process.platform !== 'darwin') app.quit(); );
运行应用
在终端中，运行以下命令启动Electron应用：
npm start
这将启动一个本地窗口显示您的HTML内容，验证一切正常。
打包和分发应用
一旦您的应用开发完成，您可以使用工具如electron-builder或pkg将其打包为原生安装程序。安装electron-builder：
npm install electron-builder --save-dev
然后，在package.json中添加脚本：
"scripts": "build": "electron-builder build"
运行npm run build来生成可执行文件，支持Windows、macOS和Linux平台。
通过Electron，您可以轻松扩展应用功能，如添加菜单、处理文件等，充分利用Web技术构建强大桌面应用。
