electron 起步

🚀 优质资源分享 🚀

electron 起步

为什么要学 Electron，因为公司需要调试 electron 的应用。

Electron 是 node 和 chromium 的结合体，可以使用 JavaScript，HTML 和 CSS 等 Web 技术创建桌面应用程序，支持 Mac、Window 和 Linux 三个平台。

electron 的成功案例有许多，比如大名鼎鼎的 vscode。

hello-world

官网有个快速启动的应用程序，我们将其下载到本地运行看一下。

# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start

1
2
3
4
5
6
7
8
9

注：运行 npm i 时卡在> node install.js，许久后报错如下

$ npm i

> electron@20.1.0 postinstall electron\electron-quick-start\node_modules\electron
> node install.js

RequestError: read ECONNRESET
    at ClientRequest. (electron\electron-quick-start\node\_modules\got\source\request-as-event-emitter.js:178:14)
 at Object.onceWrapper (events.js:422:26)
 at ClientRequest.emit (events.js:327:22)
 at ClientRequest.origin.emit (electron\electron-quick-start\node\_modules\@szmarczak\http-timer\source\index.js:37:11)
 at TLSSocket.socketErrorListener (\_http\_client.js:432:9)
 at TLSSocket.emit (events.js:315:20)
 at emitErrorNT (internal/streams/destroy.js:84:8)
 at processTicksAndRejections (internal/process/task\_queues.js:84:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! electron@20.1.0 postinstall: `node install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the electron@20.1.0 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

网上搜索 postinstall: node install.js 的解决办法是将 electron 下载地址指向 taobao 镜像：

// 将electron下载地址指向taobao镜像
$ npm config set electron_mirror "https://npm.taobao.org/mirrors/electron/"

1
2
3

新建项目 electron-demo 并参考 electron-quick-start：

// 新建文件夹
$ mkdir electron-demo
// 进入项目
$ cd electron-demo
// 初始化项目
$ npm init -y
// 安装依赖包
$ npm i -D electron

1
2
3
4
5
6
7
8
9

新建 electron 入口文件 index.js：

// electorn-demo/index.js
const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow() {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
    })
    // 加载html页面
    mainWindow.loadFile('index.html')
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

新建一个 html 页面（例如 index.html）：

DOCTYPE html>


 
 
 
 Electron 网页


 hello world



1
2
3
4
5
6
7
8
9
10
11
12
13

在 package.json 中增加启动 electron 的命令：

{
  "name": "electron-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    // 会运行 main 字段指向的 indx.js 文件
  + "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^20.1.1"
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

启动 electron 应用：

$ npm run start

1
2

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lphsQlfk-1662698148526)(https://images.cnblogs.com/cnblogs_com/blogs/665957/galleries/2215189/o_220909015112_electron-helloworld.png “electron-helloworld.png”)]

Tip：windows 下通过 ctrl+shift+i 可以打开调试界面。或使用 mainWindow.webContents.openDevTools()也可以打开。

    // 加载html页面
    mainWindow.loadFile('index.html')
    // 默认打开调试工具
+   mainWindow.webContents.openDevTools()

1
2
3
4
5

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HCyOgudU-1662698148528)(https://images.cnblogs.com/cnblogs_com/blogs/665957/galleries/2215189/o_220909015118_electron-helloworld2.png “electron-helloworld2.png”)]

热加载

现在非常不利于调试：修改 index.js 或 index.html 需要新运行 npm run start 才能看到效果。

可以 electron-reloader 来解决这个问题。只要已修改代码，无需重启就能看到效果。

首先安装依赖包，然后修改 electron 入口文件即可：

$ npm i -D electron-reloader
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN electron-demo@1.0.0 No description
npm WARN electron-demo@1.0.0 No repository field.

+ electron-reloader&
1
2
3
4
5
6