第一个electron 应用
何为electron？
electron基于chrome和nodejs的桌面端构建框架，可以以较低让前端人员也永远写桌面端的能力，前端的工作人员想必对chrome和nodejs都不会陌生。
所以如果有兴趣，或者工作中有需求，选择使用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
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
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
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15