electron && angular 构建桌面应用（二）

Electron中的窗口是使用BrowserWindow类型创建的一个实例， 它只能在主进程中使用。

// 这样写在主进程会有用，但是在渲染进程中会提示‘未定义‘
const { BrowserWindow } = require(‘electron‘)

const win = new BrowserWindow()

因为进程之间的通信是被允许的, 所以渲染进程可以调用主进程来执行任务。 Electron通过remote模块暴露一些通常只能在主进程中获取到的API。 为了在渲染进程中创建一个BrowserWindow的实例，我们通常使用remote模块为中间件：

import { remote, ipcRenderer } from ‘electron‘;

@Component({
  selector: ‘app-root‘,
  templateUrl: ‘./app.component.html‘,
  styleUrls: [‘./app.component.scss‘]
})
export class AppComponent{
  remote: typeof remote;
  fs: typeof fs;
  ipcRender: typeof ipcRenderer; 
  constructor(){
    this.remote = window.require(‘electron‘).remote;
　   const win = this.remote.BrowserWindow();
  }
}

使用Nodejs的api

Electron同时对主进程和渲染进程暴露了Node.js 所有的接口。 这里有两个重要的定义：

1)所有在Node.js可以使用的API，在Electron中同样可以使用。 在Electron中调用如下代码是有用的：

import * as path from ‘path‘;

@Component({
  selector: ‘app-root‘,
  templateUrl: ‘./app.component.html‘,
  styleUrls: [‘./app.component.scss‘]
})
export class AppComponent{
  fs;
  constructor(){
    this.fs = window.require(‘fs‘);
    console.log("fs:", this.fs.readdirSync(‘/‘));
    console.log("path:", path.join(__dirname, ‘dist/index.html‘));
  }
}

坑1：渲染进程使用nodejs的api时，如fs，需要通过var fs = window.require(‘fs)这种方式引入。写成var fs = require(‘fs‘) 或 import * as fs from ‘fs‘ 时会报找不到fs module的错误。还可以通过配置webpack的配置项来解决该问题。

更佳的解决方案是通过webpack自身来帮我们解决，即修改webpack提供的target产出目标为electron，即：

• 修改electron主线程webpack的target配置项为electron-main
• 修改electron渲染线程的webpack的target配置项为electron-renderer

这样就可以更好的解决上面的问题。

坑2：electron默认在渲染进程中不支持使用nodejs。需要在主进程中进行以下配置：

win = new BrowserWindow({
    width: 500,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
    },
  });

需将nodeIntegration置为true。

渲染进程与主进程间通信

渲染进程中使用ipcRenderer.

import { Component } from ‘@angular/core‘;
import { remote, ipcRenderer } from ‘electron‘;

@Component({
  selector: ‘app-root‘,
  templateUrl: ‘./app.component.html‘,
  styleUrls: [‘./app.component.scss‘]
})
export class AppComponent{
  remote: typeof remote;
  ipcRender: typeof ipcRenderer; 
  constructor(){
    this.remote = window.require(‘electron‘).remote;
    this.ipcRender = window.require(‘electron‘).ipcRenderer;
  }

  sendMsg(){
    this.ipcRender.send(‘create-folder‘);
    this.ipcRender.on(‘create-folder-result‘, function(event, data) {
      console.log(data);//finished!
    })
  }
}

主进程使用ipaMain

import { app, BrowserWindow, screen, ipcMain } from ‘electron‘;

let win: BrowserWindow = null;

function createWindow(): BrowserWindow {

  // Create the browser window.
  win = new BrowserWindow({
    width: 500,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
    },
  });

 
  win.loadURL(‘http://localhost:4200‘);

    //win.loadURL(url.format({
    //  pathname: path.join(__dirname, ‘dist/index.html‘),
    //  protocol: ‘file:‘,
    //  slashes: true
    //}));

  return win;
}

try {

  // This method will be called when Electron has finished
  // initialization and is ready to create browser windows.
  // Some APIs can only be used after this event occurs.
  app.on(‘ready‘, createWindow);

  // Quit when all windows are closed.
  app.on(‘window-all-closed‘, () => {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== ‘darwin‘) {
      app.quit();
    }
  });

  app.on(‘activate‘, () => {
    // On OS X it‘s common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (win === null) {
      createWindow();
    }
  });

  ipcMain.on(‘create-folder‘, (evt, arg) => {
    console.log("ipcMain");
    evt.sender.send(‘create-folder-result‘, { msg: ‘finished!‘ })
  })

} catch (e) {
  // Catch Error
  // throw e;
}