返回

Electron：打造跨平台桌面应用的指南

前端

作为一名技术狂热分子，我时常被跨平台应用程序的灵活性所吸引。Electron 的出现恰到好处地迎合了这一需求，它使我们能够利用 Web 技术的强大功能，构建在多种操作系统上流畅运行的原生桌面应用程序。在这篇深入浅出的指南中，我们将探索 Electron 的核心概念，并逐步指导你使用 Vue 和 React 构建令人惊艳的 Electron 应用。

Electron 简介

Electron 是一个开源框架，它允许开发者使用 HTML、CSS 和 JavaScript 构建桌面应用程序。它将 Chromium 嵌入到一个原生应用程序外壳中，使应用程序可以访问本机操作系统功能，如文件系统、通知和菜单。这为我们提供了利用 Web 开发技能和熟悉的工具链创建原生桌面体验的独特机会。

使用 Vue 和 React 构建 Electron 应用

要使用 Vue 或 React 构建 Electron 应用，我们首先需要安装 Electron 和相关的库：

npm install electron
npm install vue (for Vue)
npm install react (for React)

Vue Electron 应用

创建项目

vue create electron-app
cd electron-app

添加 Electron

npm install electron --save-dev

创建主进程文件

// main.js
const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({ width: 800, height: 600 })

  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

app.on('activate', function () {
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

创建渲染进程文件

// index.html
<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>Hello from Vue and Electron!</h1>
</body>
</html>

React Electron 应用

创建项目

npx create-react-app electron-app --template @electron-forge/cra-template
cd electron-app

添加 Electron

npm install electron --save-dev

创建主进程文件

// src/main.js
const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({ width: 800, height: 600 })

  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

app.on('activate', function () {
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

创建渲染进程文件

// src/App.js
import React from 'react';

function App() {
  return (
    <h1>Hello from React and Electron!</h1>
  );
}

export default App;

打包应用

要打包 Electron 应用，我们需要使用 Electron Forge：

npm install electron-forge --save-dev

然后运行：

npx electron-forge make

结论

Electron 为我们提供了利用 Web 技术创建跨平台桌面应用的强大工具。通过结合 Vue 或 React 的强大功能，我们可以构建交互式、响应式且高度可定制的应用程序。本指南旨在为初学者提供一个坚实的基础，使他们能够踏上 Electron 开发之旅。