Skip to content

第一个electron 应用

何为electron?

electron基于chrome和nodejs的桌面端构建框架,可以以较低让前端人员也永远写桌面端的能力,前端的工作人员想必对chromenodejs都不会陌生。

所以如果有兴趣,或者工作中有需求,选择使用electron是个不错的选择。

构建第一个 electron 程序

第一个electron程序官方文档教程

具体的步骤,在文档中已经很详细,所以这里省略初始步骤。

npm下载不了时,如何做,我自己就遇到遇到一个错误,安装时报错read ECONNRESET

可以参考这篇文章

具体就是

npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
1

如何与nodejs进程同行通信

electron之所以强大,在于可以借助nodejs调用一些与系统交互的文件,否则你的程序,可能更适合在浏览器中使用。因为不需要下载,更加方便。

增加预加载模块

那么怎么去建造这些桥梁呢?

这些在上面的官方文档中都有详细的介绍,我这里再简单写一下

1. 增加preload.js

js
const { contextBridge, ipcRenderer } = require("electron");

// 挂载versions这个对象在window上
contextBridge.exposeInMainWorld("versions", {
  node: () => process.versions.node,
  chrome: () => process.versions.chrome,
  electron: () => process.versions.electron,
  ping: () => ipcRenderer.invoke("ping"), // 类似于一个接口一样的访问 , 返回的是一个promise对象
});
1
2
3
4
5
6
7
8
9

2. 在main.js中修改

js
const { app, BrowserWindow, ipcMain } = require("electron");
const path = require("path");

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"), // 预加载js
    },
  });

  ipcMain.handle("ping", () => "ping"); // 接受到访问后返回的内容

  win.loadFile("index.html");

};

app.whenReady().then((res) => {
  createWindow();

  app.on("window-all-closed", () => {
    if (process.platform !== "darwin") app.quit();
  });
  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});
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

3. 增加render.js

js
const app = document.querySelector("#app");
app.innerHTML = `version:${versions.electron()}`;

const ping = async () => {
  const response = await window.versions.ping(); // 访问我们预留的一个函数
  alert(response);
};

const button = document.querySelector("button");
button.addEventListener("click", ping);
1
2
3
4
5
6
7
8
9
10

4. 导入render.js函数

在index.html中导入

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>app</h1>
  <button >ping</button>
  <div id="app"></div>
  <script src="./render.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

打包electron程序

打包官方文档教程