Electron使用指南—特性和技巧

2501_90252669

于 2025-02-04 15:44:57 发布

阅读量155

点赞数 3

文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/2501_90252669/article/details/145441317

版权

1、Offscreen 渲染

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

// 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

app.disableHardwareAcceleration()

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

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

  // Load index.html into the new BrowserWindow
  mainWindow.loadURL('https://electronjs.org')

  let i = 1
  mainWindow.webContents.on('paint', (e, dirty, image) => {

    let screenshot = image.toPNG()
    fs.writeFile( app.getPath('desktop') + `/screenshot_${i}.png`, screenshot, console.log )
    i++
  })

  mainWindow.webContents.on('did-finish-load', e => {
    console.log( mainWindow.getTitle() )

    mainWindow.close()
    mainWindow = null
  })

  // 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、网络检测 (Network Detection)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>App is: <u id="status"></u></h1>

    <!-- All of the Node.js APIs are available in this renderer process. -->
    We are using Node.js <strong><script>document.write( process.versions.node)</script></strong>,
    and Electron <strong><script>document.write( process.versions.electron )</script></strong>.

    <script>

      const setStatus = status => {
        const statusNode = document.getElementById('status')
        statusNode.innerText = status ? 'online' : 'offline'
      }

      setStatus( navigator.onLine )

      window.addEventListener('online', e => {
        setStatus(true)
      })
      window.addEventListener('offline', e => {
        setStatus(false)
      })

    </script>
  </body>
</html>

3、提醒（Notivications）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>

    <!-- All of the Node.js APIs are available in this renderer process. -->
    We are using Node.js <strong><script>document.write( process.versions.node)</script></strong>,
    and Electron <strong><script>document.write( process.versions.electron )</script></strong>.

    <script>

      const { remote } = require('electron')

      const self = remote.getCurrentWindow()

      setTimeout(() => {

        let notification = new Notification( 'Electron App', {
          body: 'Some notification info!'
        })

        notification.onclick = e => {
          if( ! self.isVisible() ) self.show()
        }

      }, 2000)

    </script>
  </body>
</html>

4、预加载脚本（Preload Scripts）

4.1 index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>

    <!-- All of the Node.js APIs are available in this renderer process. -->
    We are using Node.js <strong><script>document.write( versions.node)</script></strong>,
    and Electron <strong><script>document.write( versions.electron )</script></strong>.

    <br><textarea id="content" rows="8" cols="80"></textarea>
    <br><button id="save" onclick="saveText()">Save Content</button>

    <script>

      const saveText = e => {

        const text = document.getElementById('content').value

        writeToFile( text )
      }

    </script>
  </body>
</html>

4.2 main.js

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

// 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: false,
      contextIsolation: false,
      preload: __dirname + '/preload.js'
    }
  })

  // 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()
})