• Home
  • Archives
  • About
  • Github
  • zh


Angular7 + Electron主进程与渲染进程通讯问题

Electron 中的进程分类

在 Electron 中,存在两种进程:主进程渲染进程

渲染进程你可以理解为view层,也就是我们非常熟悉的显示页面的进程. 在这里你可以调用nodejs接口的能力,也可以做我们已经非常熟悉的浏览器操作. 但是你想要调用主进程才能做的一些操作的时候,就需要一个通讯机制,告诉主进程你要干嘛干嘛.

IPC通讯

渲染层向主进程发送通知

//index.html,渲染进程发送通知
onst electron = require('electron')
const ipcRenderer = electron.ipcRenderer
ipcRenderer.send('main-process-messages','hellow')
// main.js 主进程接收通知
const { ipcMain } = require('electron');
ipcMain.on('main-process-messages', function(event, message) {
  console.log(message)
});

主进程向渲染进程发送通知

// main.js
mainWindow.webContents.send('main-process-messages', 'main-process-messages show')
//index.html,渲染进程中接收消息
const electron = require('electron')
const ipcRenderer = electron.ipcRenderer
ipcRenderer.on('main-process-messages', function(event, message){
    alert(message)
})

在Angular工程中如何使用

当你在angular工程中直接require('electron')是会直接报错的.

ERROR in ./node_modules/electron/index.js
Module not found: Error: Can't resolve 'fs' in '###/node_modules/electron'
ERROR in ./node_modules/electron/index.js
Module not found: Error: Can't resolve 'path' in '###/node_modules/electron'

那我们该怎么办呢.

  1. 创建一个 electron.service.ts
// 示例代码
import { Injectable } from '@angular/core';
import {} from 'electron';
import Fs from 'fs';

@Injectable({
  providedIn: 'root'
})
export class ElectronService {
  constructor() {
        // check if platform is electron
        const isElectron: boolean = window && window['process'] && window['process'].type;

        if (isElectron) {
          const fs: typeof Fs = window['require']('fs');
          const app: Electron.App = window['require']('electron').remote;
        }
  }
  electron = window['require']('electron');
}

当我们需要electron的时候,直接引入这个service就好了.

微信公众号

本文链接:

https://alili.tech/archive/pw9ygknqvso/

# 最新文章