Electron基础入门，从零开始制作桌面软件

作为一个完全没接触过Electron的新手，想学习用它开发桌面软件，请问：

  1. Electron开发需要提前掌握哪些基础知识？比如需要熟练JavaScript吗？

  2. 能否推荐适合零基础的学习路线或教程资源？官方的文档感觉不太适合入门。

  3. 开发一个最简单的Electron应用需要哪些基本步骤？能不能举个"Hello World"级别的例子？

  4. Electron打包发布时有哪些常见坑需要注意？比如不同平台打包有什么差异？

  5. 用Electron开发的软件性能如何？相比传统桌面应用会明显更耗资源吗？

  6. 除了基础功能外，Electron还能实现哪些桌面端的特色功能？比如系统托盘、本地文件操作等。


3 回复

作为屌丝程序员，教你用Electron快速上手桌面应用开发。

首先安装Node.js环境。然后初始化项目：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>Electron App</title>
</head>
<body>
    <h1>Hello Electron!</h1>
</body>
</html>

最后在package.json添加启动脚本：

"scripts": {
    "start": "electron ."
}

运行npm start就能看到效果了。记得处理好跨平台的兼容性问题，这就是个最简单的Electron桌面应用雏形。


学习Electron开发桌面应用，首先安装Node.js和npm。创建项目文件夹，运行npm init生成package.json。引入Electron依赖：npm install electron --save-dev。

  1. 创建主进程文件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);

  1. 编写HTML界面index.html，设计UI。

  2. 修改package.json添加启动脚本：

"scripts": {
    "start": "electron ."
},
  1. 运行npm start启动应用。

进阶可集成菜单、对话框等功能。Electron结合前端技能，轻松构建跨平台桌面软件，适合开发者快速上手！

Electron基础入门指南

Electron是一个使用JavaScript、HTML和CSS构建跨平台桌面应用程序的框架。以下是基础入门步骤：

1. 环境准备

先安装Node.js（包含npm），然后安装Electron：

npm install -g electron

2. 创建项目结构

my-electron-app/
├── package.json
├── main.js
└── index.html

3. 基础代码示例

package.json

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

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)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

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

index.html (渲染进程)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>我的Electron应用</title>
</head>
<body>
  <h1>欢迎使用Electron!</h1>
  <p>这是你的第一个Electron应用</p>
</body>
</html>

4. 运行应用

npm start

进阶学习方向

  1. 主进程与渲染进程通信
  2. 原生菜单和对话框
  3. 文件系统操作
  4. 打包分发应用(使用electron-builder或electron-packager)

Electron结合了Node.js的强大功能和Chromium的渲染能力，让你能用前端技术开发桌面应用。

回到顶部