当前位置：网站首页>electron 基础项目搭建＆＆主线程和渲染线程的通信

electron 基础项目搭建＆＆主线程和渲染线程的通信

2022-06-25 18:27:00 【霹雳桃】

electron

一、初始化一个 electron 项目

1.先创建一个 `package.json` 文件

npm init -y

2.下载安装 `electron`

注意要切换淘宝镜像下载
npm instsll electron -S

3.在 `package.json` 下配置执行脚本

先安装 nodemon

"scripts": {
    
    "start": "nodemon --exec electron . --watch ./ --ext .html,.js,.css"
  },

4.在根目录下创建 `main.js` 文件

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

// 主进程
const createWindow = () => {
    
  const win = new BrowserWindow({
    
    // 窗口大小
    width: 1400,
    height: 800,
    // 最小的窗口大小
    minHeight: 300,
    minWidth: 400,
    // 窗口是否显示
    show: true,
    // 是否可以拖动
    movable: true,
    // 是否有顶部状态栏，拖动条
    // frame: false,
    // 导致隐藏的标题栏和完整大小的内容窗口
    // titleBarStyle: "default",
    // 窗口初始背景颜色
    backgroundColor: "aliceblue",
  });

  // 打开调试工具
  win.webContents.openDevTools();

  // 给窗口转载页面
  win.loadFile("./render/index.html");

  win.once("ready-to-show", () => {
    
    win.show();
  });
};

app.on("window-all-closed", () => {
    
  console.log("window-all-closed");

  // 对于 MACOS 系统，关闭窗口时，不会直接推出应用
  if (process.platform !== "darwin") {
    
    app.quit();
  }
});

app.whenReady().then(() => {
    
  createWindow();
  // 在 MacOS 下，当全部窗口关闭，点击 dock 图标，窗口再次打开。
  app.on("activate", () => {
    
    if (BrowserWindow.getAllWindows().length === 0) {
    
      createWindow();
    }
  });

  // console.log(app.isReady())
  // console.log(app.getPath('desktop'))
  // console.log(app.getPath('music'))
  // console.log(app.getPath('temp'))
  // console.log(app.getPath('userData'))

  // console.log(BrowserWindow.getAllWindows().length)
});

process.env["ELECTRON_DISABLE_SECURITY_WARNINGS"] = "true";

5.在根目录下创建文件夹 `render` 里面创建入口文件 `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" />
    <!-- <meta http-equiv="Content-Security-Policy" content="script-src 'self' unsafe-eval"> -->
    <title>Document</title>
  </head>
  <body>
    <h1>第一个 electron 项目</h1>
  </body>
</html>

二、主进程和渲染进程通信

  --根目录
    --controller          封装的主线程收发数据
      --ipcMessage.js
    --preload         contextBridge 方法，主线程和渲染线程沟通的桥梁
      --index.js
    --render          加载的页面入口
      --app.js
      --index.html
      --style.css
      --vue.global.js   vue的项目包,本示例页面使用 vue3
    --main.js          项目入口

1.通信之前需要有 contextBridge 作为主线程和渲染现场之间沟通的桥梁

使用 contextBridge 方法，将主线程的信息发送到渲染线程

// 例，将 electron 和 node 版本号发往渲染现线程
const {
     contextBridge } = require("electron");

// 发送 ，该信息的 key 为 myAPI
contextBridge.exposeInMainWorld("myAPI", {
    
  versions: process.versions,
});

// 页面中获取方法
const versions = window.myAPI.versions;
// 获取版本号
// chromeVersion: versions.chrome,
// NodeVersion: versions.node,
// electronVersion: versions.electron

2.渲染进程向主进程发送同步信息

渲染进程使用方法 ipcRenderer.send('事件名'，'信息')发送消息，此操作在 contextBridge 中
主线程使用方法 ipcMain 接收，使用方法 event.sender.send 返回内容

// --------------contextBridge------------------
// 创建方法 sendSync 发送消息
const sendSync = (message) => {
    
  ipcRenderer.send("sync-send-event", message);
};
// 讲方法抛出到 渲染线程调用
contextBridge.exposeInMainWorld("myAPI", {
    
  sendSync,
});
// -----------------渲染线程--------------------------
// 渲染线程调用
myAPI.sendSync("from renderer message 1");

// -----------------------主线程--------------------
// 主线程接受数据
// 同步事件监听
ipcMain.on("sync-send-event", (event, msg) => {
    
  // console.log(msg);
  // 使用参数 event 的方法 返回消息
  event.sender.send("sync-receive-event", "我已经收到：" + msg);
});

contextBridge 接收消息，并将方法抛出到渲染线程，渲染线程创建事件监听

// -----------------contextBridge-------------------
// 使用 ipcRenderer.on 创建时间同步监听
const recieveSyncMsg = () => {
    
  return new Promise((resolve) => {
    
    ipcRenderer.on("sync-receive-event", (event, msg) => {
    
      // console.log(msg)
      resolve(msg);
    });
  });
};
// 将事件 recieveSyncMsg 发送到渲染线程
contextBridge.exposeInMainWorld("myAPI", {
    
  recieveSyncMsg,
});

// --------------------渲染线程-------------------

// 使用async await 创建同步事件监听
async mounted(){
    
  const result = await myAPI.recieveSyncMsg();
}

以上是一套完整的渲染线程发送数据 -> 主线程接受数据并返回 -> 渲染线程接收返回数据的过程

3.渲染进程向主进程发送异步消息

渲染线程发送数据使用 ipcRenderer.invoke 方法，发送数据的方法在 contextBridge 中使用，同样将方法抛出到渲染线程的 js 文件调用
主线程接受数据使用方法 ipcMain.handle

// --------------contextBridge-------------------
// 发送请求的方法 ipcRenderer.invoke 的第一个参数是本次请求的 key，第二个参数可有可无, 使用 return 给渲染线程返回数据
const sendAsync = async () => {
    
  const result = await ipcRenderer.invoke("my-invokable-ipc");
  return result;
};
// 讲方法 抛出到渲染线程的页面
contextBridge.exposeInMainWorld("myAPI", {
    
  sendAsync,
});
// ----------------渲染线程---------------------------
// 如果有桥接的方法(contextBridge)，建议IPC通信，全部应用异步。
// 点击事件的方法
async sendAsyncMsg() {
    
  const result = await myAPI.sendAsync()
  console.log(result)
}
// --------------主线程就收数据和返回数据--------------------
// 异步事件监听
// 如果渲染线程有数据传来可以使用 args 接收
ipcMain.handle('my-invokable-ipc', async (event, ...args) => {
    
  const result = await somePromise()
  return result
})
// 写一个异步函数，模拟异步方法，三秒后返回数据
function somePromise() {
    
  return new Promise((resolve, reject) => {
    
    setTimeout(() => {
    
      resolve('message from main process.')
    }, 3000)
  })
}