首页 > 建站教程 > nodejs,electron >  electron系列教程一 第一个Electron应用正文

electron系列教程一 第一个Electron应用

本文转载自 今日头条,感谢博主李景能


本系列是Electron框架跨平台应用开发的入门教程:


    一 第一个Electron应用

    二 自定义菜单

    三 自定义应用图标和窗口置顶

    四 系统托盘功能

    五 主进程和渲染进程中的通知和通信

    六 详细讲解主进程和渲染进程

    七 自定义窗口

    八 引入前端框架Vue.js 3


现在开始第一章的学习。


什么是Electorn?

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。


这是Electron官网(

https://www.electronjs.org/)上对Electron的介绍。


一、第一个Electron应用


今天,我们就开始学习Electron。按照惯例,一切从“Hello,World!”开始吧。通过这个教程,你的app将会打开一个浏览器窗口,来展示“你好,Electron!”。


二、开发前的准备


1.安装Node.js

在使用Electron进行开发之前,您需要安装 Node.js。 我们建议您使用最新的LTS版本。

Nodejs可以在这里下载Nodejs官网。

要检查 Node.js 是否正确安装,请在您的终端输入以下命令:


1node -v
2npm -v


2.安装Visual Studio Code

Visual Studio Code(文章后面会直接简称为Code)是一款开源的,在 Windows、macOS 和 Linux 上运行的独立源代码编辑器。 JavaScript 和 Web 开发人员的最佳选择,包含大量扩展,几乎支持任何编程语言。你可以在Visual Studio Code官网下载到最新版的Code。


三、创建你的应用


1.在电脑上新建一个名为electronapp的文件夹,然后在Code中打开此文件夹。




2.在Code中使用快捷键Ctrl+`(反引号)打开Terminal(终端)。输入命令

1npm init -y

-y参数表示项目使用默认的配置参数。



此时会在根目录下创建一个名为package.json的文件,内容与终端中显示的一致。


3.安装Electron

1npm install --save-dev electron


4.修改package.json文件,在scripts字段下增加一条start命令:

1"scripts": {
2    "test""echo \"Error: no test specified\" && exit 1",
3    "start""electron ."
4}


start命令能让你在开发模式下打开你的应用。


5.创建main.js

首先,修改package.json的main字段

1"main""main.js",


然后在根目录下新建一个main.js文件,并写入如下代码:


01const { app, BrowserWindow } = require('electron');
02function createWindow () {
03  const win = new BrowserWindow({
04    width: 800,
05    height: 600
06  });
07  win.loadFile('index.html');
08}
09app.whenReady().then(() => {
10  createWindow();
11  app.on('activate', () => {
12    if (BrowserWindow.getAllWindows().length === 0) {
13      createWindow();
14    }
15  });
16});
17app.on('window-all-closed', () => {
18  if (process.platform !== 'darwin') {
19    app.quit();
20  }
21});


6.新建index.html文件,并写入如下代码:


01<!DOCTYPE html>
02<html>
03<head>
04    <meta charset="UTF-8">
05    <title>Electron应用</title>
06    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
07</head>
08<body>
09    <h1>你好,Electron!</h1>
10    <p>
11        这是我的第一个Electron应用。
12    </p>
13</body>
14</html>


最后你的Code看起来是这样子的:



package.json中devDependencies字段中显示了Electron的版本号。当然,你安装的版本可能与笔者的有出入,以你本机安装的版本为准,无需手动修改。


7.运行你的第一个Electron应用

打开终端输入命令,Electron应用将会被启动

1npm start



四、打包应用程序

1.安装electron-packager

1npm install --save-dev electron-packager


2.打包应用

1npx electron-packager .


该命令的完整形式如下:

1npx electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]


具体可参考GitHub -

electron/electron-packager(

https://github.com/electron/electron-packager)


命令执行完后会在你的根目录下多出一个名为electronapp-win32-x64的文件夹。



双击electronapp.exe即可运行应用程序。