Electron使用指南 - [04] Renderer Process API

Renderer Process API

Renderer API 主要包括 remote、Browser window proxy、desktop Capture

Renderer Process API
remote
Browser Window Proxy
desktop Capture

1、remote (服务端对象)

1.1 index.html

  
    
    
    
  
  
    
Hello World!

    Fullscreen


    
    We are using Node.js ,
    and Electron .

    
  

1.2 renderer.js

// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// All of the Node.js APIs are available in this process.

const remote = require('electron').remote

const { app, dialog, BrowserWindow } = remote

const button = document.getElementById('test-button')

button.addEventListener('click', e => {

  // dialog.showMessageBox({ message: 'Dialog invoked from Renderer process' })

  // let secWin = new BrowserWindow({
  //   width: 400, height: 350
  // })
  // secWin.loadFile('index.html')

  // console.log( remote.getGlobal('myglob') )

  // app.quit()

  let win = remote.getCurrentWindow()
  win.maximize()

})

1.3 main.js

// Modules
const {app, BrowserWindow} = require('electron')

global['myglob'] = 'A var set in main.js'

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

// Create a new BrowserWindow when `app` is ready
function createWindow () {

  mainWindow = new BrowserWindow({
    width: 1000, height: 800,
    webPreferences: { nodeIntegration: true }
  })

  // Load index.html into the new BrowserWindow
  mainWindow.loadFile('index.html')

  // Open DevTools - Remove for PRODUCTION!
  mainWindow.webContents.openDevTools();

  // Listen for window being closed
  mainWindow.on('closed',  () => {
    mainWindow = null
  })
}

// Electron `app` is ready
app.on('ready', createWindow)

// Quit when all windows are closed - (Not macOS - Darwin)
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

// When app icon is clicked and app is running, (macOS) recreate the BrowserWindow
app.on('activate', () => {
  if (mainWindow === null) createWindow()
})

2、Browser Window Proxy （浏览器窗口代理）

  
    
    
    
  
  
    
Hello World!

    
New Window
    
Close Window
    
Bad Fonts

    
  

3、webFrame

  
    
    
    
  
  
    
Hello World!

    


    Increase Zoom
    Decrease Zoom
    Reset Zoom

    
  

4、desktopCapturer（桌面快照）

4.1 index.html

  
    
    
    
  
  
    
Hello World!

    

    Get Screenshot

    
  

4.2 renderer.js

const { desktopCapturer } = require('electron')

document.getElementById('screenshot-button').addEventListener('click', () => {

  desktopCapturer.getSources({ types:['window'], thumbnailSize: {width:1920, height:1080} }, (error, sources) => {

    console.log(sources)

    document.getElementById('screenshot').src = sources[0].thumbnail.toDataURL()
  })

})