Electron入门_前端electron用来做什么的

作者：寸_铁 | 2024-07-26 21:32:24

踩

前端electron用来做什么的

1.Electron 是什么？
Electron是一个开源的跨平台框架，用于构建使用Web技术（HTML、CSS和JavaScript）开发的桌面应用程序。它由GitHub公司开发并维护，并在许多知名应用程序中得到广泛应用，如Atom、Visual Studio Code、Slack等。

Electron允许开发者使用熟悉的前端开发技术来构建跨平台的桌面应用，它利用Chromium渲染引擎来显示用户界面，并使用Node.js来访问底层系统资源和功能，例如文件系统、操作系统API等。这使得开发者可以使用Web技术来创建功能丰富的桌面应用，无需学习特定的桌面应用开发语言。

使用Electron，开发者可以将其Web应用打包为独立的桌面应用，可以在Windows、macOS和Linux等多个操作系统上运行。这为开发者提供了更大的灵活性和便利性，同时也为用户提供了一致的用户体验。

2.网址：

https://www.electronjs.org/zh/docs/latest/tutorial/quick-start
1

3.创建项目
3.1 初始化项目

mkdir my-electron-app 
cd my-electron-app
npm init
1
2
3

在这里插入图片描述

3.2安装electron

npm install --save-dev electron
1

在这里插入图片描述

3.3在package.json配置文件中的scripts字段下增加一条start命令

"start": "electron ."
1

在这里插入图片描述

3.4 创建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('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit();
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

3.5创建index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>你好!</title>
  </head>
  <body>
    <h1>你好!</h1>
    我们正在使用 Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    和 Electron <span id="electron-version"></span>.
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3.6 electron-builder打包electron打包
3.6.1 安装 electron-builder

npm install electron-builder -g
1

3.6.2 配置 package.json 文件

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "firstElectron",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
	"start": "electron .",
	"build": "electron-builder",
	"dist": "electron-builder --win --x64",
    "build:win": "electron-builder --win",
    "build:mac": "electron-builder --mac",
    "build:linux": "electron-builder --linux"
  },
  "author": "admin",
  "license": "ISC",
  "devDependencies": {
    "electron": "^25.3.0"
  },
    "build": {
    "appId": "com.myelectronapp.app",
    "productName": "My Electron App",
    "directories": {
      "output": "dist"
    },
    "mac": {
      "category": "public.app-category.utilities"
    },
    "win": {
      "target": ["nsis","zip"],
      "icon": "build/icon.ico"
    },
    "nsis": {
      "oneClick": false,
      "perMachine": true,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "build/exe.ico",
      "uninstallerIcon": "build/exe.ico",
      "installerHeaderIcon": "build/exe.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "My Electron App"
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

3.6.3 构建：npm run build:win
在这里插入图片描述
3.6.4 打包后的文档结构

效果：

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】