第三节 Electron运行流程 、 主进程渲染进程并使用nodejs

目录

一、electron运行流程

二、主进程渲染进程介绍

三、 Electron 主进程和渲染进程中使用 Nodejs 以及 Nodejs 第三方模块

---

一、electron运行流程

运行项目找到package.json的入口文件（属性main的值）即为主进程，加载入口文件 实例化BrowserWindow，加载本地index.html即为渲染进程

二、主进程渲染进程介绍

package.json 中定义的入口被 称为主进程。 在主进程中实例化 BrowserWindow 创建的
Web 页面被称为渲染进程。主进程只有一个  渲染进程可以有多个 。

三、 Electron 主进程和渲染进程中使用 Nodejs 以及 Nodejs 第三方模块

1、主进程可以直接使用node模块

修改主进程main.js 引入模块fs 并在createWindow方法中读取package.json文件并打印文件内容

const fs = require("fs");
fs.readFile("package.json", (err, data) => {
    if (err) {
      console.log(err);
      return;
    }
    console.log("data", data.toString());
  });

重启项目效果如下：

2、渲染进程使用node模块 有两种方式

1》preload方式 完整代码

根目录下新建文件夹renderer 文件preload.js 代码如下：

const fs= require("fs")

// 渲染进程使用nodejs的第一种方式
fs.readFile("package.json",(err,data) =>{
  if(err){
    console.log(err)
  }
  console.log(data.toString())
})

修改主进程main.js 设置属性webPreferences 

webPreferences:{
      preload:path.join(__dirname,"renderer/preload.js")
    }

运行代码 效果如图：

2》渲染文件使用

在renderer文件下新建renderer.js

const fs= require("fs")

// 渲染进程使用nodejs的第二种方式，将文件引入到index.html
fs.readFile("package.json",(err,data) =>{
  if(err){
    console.log(err)
  }
  console.log(data.toString())
})

 在index.html文件中引入renderer.js

    <script src="./renderer/renderer.js"></script>

运行程序，额报错了 报错信息如下

 修改主进程webPreferences的配置

  nodeIntegration:true, // 允许渲染进程使用nodejs
      contextIsolation:false // 允许渲染进程使用nodejs

重启项目 运行截图如下