一、Electron运行流程
截屏2022-02-11 下午1.00.52.png
-
package.json中定义的入口被称为主进程，main.js
-
在主进程中实例化BrowserWindows。创建的基于Web页面的渲染进程
一个Electron应用只有一个主进程，但是可以有多个渲染进程，每个Electron中的web页面运行在它自己的渲染进程中。
建立两个渲染进程的代码：
const createWindow=()=>{
const mainWindows = new BrowserWindow({
width: 600,
height: 400
});
mainWindows.loadFile(path.join(__dirname, "index.html"));
const childWindow1 = new BrowserWindow({
width: 300,
height: 300,
parent : mainWindows
});
childWindow1.loadFile(path.join(__dirname, "child1.html"));
}
二、Electron主进程和渲染进程中使用Nodejs以及其第三方模块
1. 主进程可以直接使用Nodejs。
const fs = require("fs");
//主进程中使用nodejs
fs.readFile("package.json", (err,data)=>{
if (err) {
console(err);
return;
}
console.log(data.toString());
});
终端输出package.json文件的内容如下：
{
"name": "mydemo01",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
2. 子进程使用NodeJS
方法一：
a. 新建一个目录：renderer；目录里新建一个文件：preload.js
b. 我们在渲染进程里调用 preload.js
c. preload.js的功能和上例一样，在终端显示package.json文件内容
在main.js文件里，在新建BrowserWindow实例时，加载preload.js。
const mainWindows = new BrowserWindow({
width: 600,
height: 400,
webPreferences: {
preload : path.join(__dirname, "renderer/preload.js")
}
});
preload.js内容如下：
const fs = require("fs");
//渲染进展使用Nodejs
fs.readFile("package.json", (err,data)=>{
if (err) {
console(err);
return;
}
console.log(data.toString());
});
重新运行
electron .
弹出对话框，选择view菜单的Toggle Developer Tools，展开浏览器调试窗口。
截屏2022-02-11 下午10.03.11.png
选择Console，我们可以看到package.json的文本内容显示出来了。
截屏2022-02-11 下午10.02.35.png
方法二：
我们在renderer目录里新建一个js文件，称为renderer.js。内容如下：
const fs = require("fs");
//渲染进展使用Nodejs的第二种方法
//这个文件在index.html里面引入
fs.readFile("package.json", (err,data)=>{
if (err) {
console(err);
return;
}
console.log(data.toString());
});
我们在index.html文件里，将该/renderer/renderer.js脚本引入。修改后的index.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>
<link rel="stylesheet" href="css/base.css">
<script src="/renderer/renderer.js"></script>
</head>
<body>
<h2>这是我们手工创建的一个项目</h2>
</body>
</html>
运行后，在DevTools看到如下报错。
截屏2022-02-11 下午10.31.28.png
由于新版本的Electron的默认参数配置不允许该渲染进程使用Nodejs的方式。
解决方法：在main.js实例化BrowserWindow时，增加2个参数配置在webPreferences。main.js相关代码如下：
const mainWindows = new BrowserWindow({
width: 600,
height: 400,
webPreferences: {
//preload : path.join(__dirname, "renderer/preload.js")
nodeIntegration : true, //允许渲染进程使用Nodejs
contextIsolation : false //允许渲染进程使用Nodejs
}
});
为了方便自动打开DevTools，可以在main.js加上这么一句话
mainWindows.webContents.openDevTools();
上面的mainWindows为BrowserWindow的实例化对象。
3. 做个小实例
参考上面所讲的第2种渲染进程调用nodejs的方法，我们来做个小实例。
需求：点击一个小按钮，把package.json文件的内容显示在页面上。
首先，我们修改index.html文件。增加一个按键，增加一个div框。
<body>
<h2>这是我们手工创建的一个项目</h2>
<button id="openFile">打开</button>
<div id="content"> </div>
</body>
然后，配置css。我们修改base.css文件，内容如下：
h2 {
color: red;
}
#content {
width: 400px;
height: 400px;
border: 1px solid #666
}
最后，我们修改renderer.js文件。当用户点击按钮时，package.json文件内容会显示在对话框里。修改后的renderer.js文件如下：
const fs = require("fs");
window.onload=()=>{
openFileDom = document.querySelector("#openFile");
contentDom = document.querySelector("#content");
openFileDom.onclick=()=> {
fs.readFile("package.json", (err,data) => {
if (err) {
console(err);
return;
}
console.log(data.toString());
contentDom.innerHTML = data.toString();
})
}
}
运行后，点击打开按钮，展示效果如下：
截屏2022-02-11 下午11.30.05.png
最后更新日期：2022年2月11日
网友评论