Electron入门

初识

如官网所述，Electron是一个使用JavaScript，HTML，CSS前端技术栈构建可跨平台的桌面应用的框架。

进行Electron应用的开发时需要使用Node环境，需提前在官网下载并安装好Node

1
2
3
4
5
6
# 
mdkir myapp && cd myapp

npm init

npm install electron --save-dev

受制于国内特殊的网络环境，可能大家并不能顺利地安装Electron，在安装过程中下载慢，还可能出现诸如 ELIFECYCLE、EAI_AGAIN、ECONNRESET 和 ETIMEDOUT 等错误。

这里提供几个方案供大家参考。

1
2
3
4
5
6
# 方案1
# 执行安装命令前在项目目录下新建 .npmrc 文件, 并添加下方配置内容。
# 意在配置npm的源和electron的源为国内taobao源。

registry=https://registry.npm.taobao.org/
electron_mirror=https://cdn.npm.taobao.org/dist/electron/
1
2
3
4
# 方案2
# 执行安装命令前先配置可用的代理（需自行解决可用代理的问题哦）
export GLOBAL_AGENT_HTTP_PROXY=http://127.0.0.1:7890
export ELECTRON_GET_USE_PROXY=true

安装完成后。

配置package.json文件

修改项目入口指定入口js文件 main.js

1
2
3
4
5
6
7
8
9
10
11
{
    "name": "my-app",
    "version": "1.0.0",
    "description": "Hello World!",
    "main": "main.js",
    "scripts": {
        "start": "electron ." 
    },
    "author": "Ray",
    "license": "MIT"
}

这里指定的入口js文件非常重要，它由Node负责执行，是Electron应用的主进程。

尝试创建该文件，并试着加几句console.log语句，最后 npm run start 运行。观察控制台可以查看输出。

Ctrl + C 结束应用，看下一步。

新增如下代码文件

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- index.html -->
<!-- 平平无奇的index页面 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// main.js

const { app, BrowserWindow } = require('electron')
const path = require('path')

const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 800,
    heght: 600,
  })
  mainWindow.loadFile('index.html')
  // 根据需要自行开启
  // mainWindow.webContents.openDevTools()
}

app.whenReady().then(() => {
  createWindow()
})


npm run start 重新执行。

一个使用Web前端技术栈构建的带UI的Electron应用就完成了。

快速开始

一般情况下“懒惰”的程序员更喜欢使用脚手架工具帮忙构建。

1
npm create electron-app my-app

了解更多 Electron Forge/

打包分发

1
2
3
4
5
6
// 使用Electron Forge，并配置
npm install --save-dev @electron-forge/cli  
npx electron-forge import

// 生成分发文件,在out目录下寻找对应的应用
npm run make

踩坑记录

Windows下输出乱码？

运行Electron应用前，终端运行 chcp 65001，修改终端显示编码为UTF-8。

需要适配Mac？

去官网查询相关兼容适配的代码。

Electron
#Electron
Electron入门
http://example.com/2024/12/30/Electron入门/
作者
Ray
发布于
2024年12月30日
许可协议