【Web】Electron：第一个桌面步伐

Electron 是一个开源框架，使开发者可以大概利用 HTML、CSS 和 JavaScript 构建跨平台的桌面应用步伐。通过 Electron，开发者可以将网页技能应用于桌面软件开发，从而利用现有的网页技能栈构建功能强盛的桌面应用。
下载 Electron

固然 Electron 可以通过 npm 安装，但由于某些网络题目或权限题目，大概会导致安装失败。因此，本指南将先容怎样直接从 Electron 的 GitHub Releases 页面下载 Electron 并利用。

• 访问 Electron Releases 页面：
  打开 Electron Releases 页面。
  
• 选择版本：
  找到你想要下载的 Electron 版本，通常选择最新版本。
  
• 下载恰当的文件：
  根据你的操纵体系下载恰当的预编译二进制文件。对于 Windows，通常下载 electron-vX.X.X-win32-x64.zip 文件（X.X.X 为版本号）。
  

解压文件

将下载的 .zip 文件解压到你选择的目次，比方 D:\code\electron。
创建最小的 Electron Demo

接下来，我们将创建一个简单的 Electron 应用步伐。

• 创建项目目次：
  在你选择的工作目次下创建一个新文件夹，比方 D:\code\my-electron-app。
  
  1. mkdir D:\code\my-electron-app
  2. cd D:\code\my-electron-app

  复制代码
• 创建 index.html 文件：
  在项目目次下创建一个 index.html 文件，并添加以下内容：
  
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Hello Electron</title> <!-- 设置网页标题 -->
  5. </head>
  6. <body>
  7.     <h1>Hello, Electron!</h1> <!-- 页面显示的主标题 -->
  8. </body>
  9. </html>

  复制代码
• 创建 index.js 文件：
  在同一目次下创建一个 main.js 文件，并添加以下内容：
  
  1. // 引入 Electron 模块
  2. const { app, BrowserWindow } = require('electron');
  4. // 创建主窗口的函数
  5. function createWindow() {
  6.     // 创建一个新的浏览器窗口
  7.     const win = new BrowserWindow({
  8.         width: 800, // 窗口宽度
  9.         height: 600, // 窗口高度
  10.         webPreferences: {
  11.             nodeIntegration: true // 启用 Node.js 集成，以便在渲染进程中使用 Node.js API
  12.         }
  13.     });
  15.     // 加载 index.html 文件到窗口
  16.     win.loadFile('index.html');
  17. }
  19. // 当 Electron 完成初始化时调用 createWindow 函数
  20. app.whenReady().then(createWindow);
  22. // 处理所有窗口关闭事件
  23. app.on('window-all-closed', () => {
  24.     // 对于非 macOS 系统，退出应用
  25.     if (process.platform !== 'darwin') {
  26.         app.quit();
  27.     }
  28. });
  30. // 处理应用被激活时的事件
  31. app.on('activate', () => {
  32.     // 如果没有打开的窗口，则重新创建一个窗口
  33.     if (BrowserWindow.getAllWindows().length === 0) {
  34.         createWindow();
  35.     }
  36. });

  复制代码

运行 Electron 应用

• 在下令行中运行 Electron：
  打开下令行，导航到你的应用步伐目次，然后运行 Electron：
  
  1. cd D:\code\my-electron-app
  2. path\to\your\electron\executable\electron.exe .

  复制代码
  比方，假如你将 Electron 解压到 D:\code\electron，下令应为：
  
  1. D:\code\electron\electron.exe .

  复制代码

打包你的应用

假如你盼望打包应用，可以利用 Electron 的打包工具。

• 下载 Electron Packager：
  下载 Electron Packager。
  
• 利用 Electron Packager 打包：
  
  
  
  • 将 electron-packager 解压到你的项目目次。
    
  • 利用以下下令打包你的应用：
    
  1. path\to\your\electron\packager\executable\electron-packager . MyApp --platform=win32 --arch=x64

  复制代码
  这将天生一个 MyApp-win32-x64 文件夹，此中包罗你的应用的可实行文件。