Electron学习笔记(三) 读写, 焦点, 窗口句柄, 预加载

Electron学习笔记(二)

一. 区分开发/生产模式

app.isPackaged()

二. 读写流

    var fs = require('fs')
    var win = window.createWindow({ height: 600, with: 1000 });
    var IPCStream = require('electron-ipc-stream');
    var ipcs = new IPCStream('xxx-name', win);
    fs.createReadStream('/tmp/mainfile').pipe(ipcs);       // 读取
    
    var ipcs = new IPCStream('xxx-name');
    ipcs.pipe(fs.createWriteStream('/tmp/rendfile'))       // 写入
    .on('finish', function () {
      console.log('done')
    })

三. 窗口操作

    const { BrowserWindow } = require('electron');
    const win = new BrowserWindow();
    win.setProgressBar(0.5);                              // 任务栏中的进度条
    let win = new BrowserWindow()
    win.once('focus', () => win.flashFrame(false))
    win.flashFrame(true)                                  // 窗口闪烁

四. 主进程和渲染进程通信

  const {ipcRenderer} = require('electron');
  ipcRenderer.send('get-app-path', "");                         // 发给main, 可不传参
                                                                // sendSync, 可阻塞发送  
  const {app, ipcMain} = require('electron')
  ipcMain.on('get-app-path', (event) => {                       // main响应
    event.sender.send('got-app-path', app.getAppPath());        // 发给render
  });
  
  ipcRenderer.on('got-app-path', (event, path) => {});          // render响应

五. 通过global共享数据

global.sharedObject = {                                         // main
  someProperty: 'default value'
}
let { remote }= require('electron');
remote.getGlobal('sharedObject').someProperty = 'new value'      // page 1
remote.getGlobal('sharedObject').someProperty)                   // page 2

六. 高DPI支持

  if (process.platform === 'win32') {
    app.commandLine.appendSwitch('high-dpi-support', 'true')
    app.commandLine.appendSwitch('force-device-scale-factor', '1')
  }

七. 获取主窗口句柄

  ipcMain.on('getWindowId', (event, arg) => {
    let hwnd = mainWin.getNativeWindowHandle();
    event.returnValue = hwnd.readUInt32LE(0);
  });

八. 特殊设置

  mainWin.setIgnoreMouseEvents(true);     // 鼠标穿透窗体
  app.disableDomainBlockingFor3DAPIs();   // 关闭3D api, 提高兼容性
  app.disableHardwareAcceleration();      // 关闭硬件加速, 减少渲染问题

九. 在预加载期的添加处理

  // 添加preload.js
    const path = require('path');
    mainWindow = new BrowserWindow({
      webPreferences: {
        preload: path.join(__dirname, 'preload.js'),
      },
    });
  // preload.js的实现
    const {ipcRenderer, remote, clipboard} = require('electron');
    window.addEventListener('DOMContentLoaded', () => {
      const element = document.getElementById('chrome-version');
      if (element) {
        element.innerText = process.versions['chrome'];
      }
    });

Electron学习笔记(四)