【Electron】ELECTRON API DEMOS

Electron官网入门API，进行翻译并整理，官网链接：https://www.electronjs.org/。
仅作学习交流，侵删。

ELECTRON API DEMOS

1 窗口

1.1 创建和管理窗口

Electron的BrowserWindow模块允许创建新的或管理已存在的浏览器窗口。

1.1.1 创建一个新的窗口

BrowserWindow模块能在app中创建一个新窗口，该主进程模块能够通过remote模块从渲染进程中使用，例如：

渲染进程

const {
   BrowserWindow} = require('electron').remote
const path = require('path')

const newWindowBtn = document.getElementById('new-window')

newWindowBtn.addEventListener('click', (event) => {
   
  const modalPath = path.join('file://', __dirname, '../../sections/windows/modal.html')
  let win = new BrowserWindow({
    width: 400, height: 320 })

  win.on('close', () => {
    win = null })
  win.loadURL(modalPath)
  win.show()
})

path是node自带模块。

path.join(path1, path2, path3, ...)作用是将路径片段使用特定分隔符连接起来规范化形成路径。

__dirname代表当前文件所在路径。

1.1.2 管理窗口状态

该实例中创建一个新窗口并监听它的move和resize事件：

渲染进程

const {
   BrowserWindow} = require('electron').remote
const path = require('path')

const manageWindowBtn = document.getElementById('manage-window')
let win

manageWindowBtn.addEventListener('click', (event) => {
   
  const modalPath = path.join('file://', __dirname, '../../sections/windows/manage-modal.html')
  win = new BrowserWindow({
    width: 400, height: 275 })

  win.on('resize', updateReply)
  win.on('move', updateReply)
  win.on('close', () => {
    win = null })
  win.loadURL(modalPath)
  win.show()

  function updateReply () {
   
    const manageWindowReply = document.getElementById('manage-window-reply')
    const message = `Size: ${
     win.getSize()} Position: ${
     win.getPosition()}`
    manageWindowReply.innerText = message
  }
})

1.1.3 窗口事件：模糊和聚焦

该实例中创建一个新窗口并监听他的blur事件：

渲染进程

const {
   BrowserWindow} = require('electron').remote
const path = require('path')

const manageWindowBtn = document.getElementById('listen-to-window')
const focusModalBtn = document.getElementById('focus-on-modal-window')
let win

manageWindowBtn.addEventListener('click', () => {
   
  const modalPath = path.join('file://', __dirname, '../../sections/windows/modal-toggle-visibility.html')
  win = new BrowserWindow({
    width: 600, height: 400 })

  const hideFocusBtn = () => {
   
    focusModalBtn.classList.add('disappear')
    focusModalBtn.classList.remove('smooth-appear')
    focusModalBtn.removeEventListener('click', clickHandler)
  }

  const showFocusBtn = (btn) => {
   
    if (!win) return
    focusModalBtn.classList.add('smooth-appear')
    focusModalBtn.classList.remove('disappear')
    focusModalBtn.addEventListener('click', clickHandler)
  }

  win.on('focus', hideFocusBtn)
  win.on('blur', showFocusBtn)
  win.on('close', () => {
   
    hideFocusBtn()
    win = null
  })
  win.loadURL(modalPath)
  win.show()

  const clickHandler = () => {
    win.focus() }
})

1.1.4 创建一个无框架窗口

无框架窗口是没有工具栏、标题栏、状态栏等的窗口，创建窗口时设置frame为false即可实现：

渲染进程

const {
   BrowserWindow} = require('electron').remote
const newWindowBtn = document.getElementById('frameless-window')

const path = require('path')

newWindowBtn.addEventListener('click', (event) => {
   
  const modalPath = path.join('file://', __dirname, '../../sections/windows/modal.html')
  let win = new BrowserWindow({
    frame: false })

  win.on('close', () => {
    win = null })
  win.loadURL(modalPath)
  win.show()
})

同理，设置transparent为true可以使无框架窗口透明化。

1.2 处理窗口崩溃和挂起

当渲染进程崩溃或挂起时BrowserWindow模块将发送事件，监听这些事件让用户选择重载、等待或关闭窗口。

1.2.1 进程崩溃后重启窗口

该实例中我们通过remote模块创建一个新的窗口，并提供一个使用process.crash()强制崩溃的链接。

窗口监听崩溃事件并在事件发生时提醒用户重载或关闭。

渲染进程

const {
   BrowserWindow, dialog} = require('electron').remote
const path = require('path')

const processCrashBtn = document.getElementById('process-crash')

processCrashBtn.addEventListener('click', (event) => {
   
  const crashWinPath = path.join('file://', __dirname, '../../sections/windows/process-crash.html')
  let win = new BrowserWindow({
    width: 400, height: 320 })

  win.webContents.on('crashed', () => {
   
    const options = {
   
      type: 'info',
      title: 'Renderer Process Crashed',
      message: 'This process has crashed.',
      buttons: ['Reload', 'Close']
    }

    dialog.showMessageBox(options, (index) => {
   
      if (index === 0) win.reload()
      else win.close()
    })
  })

  win.on('close', () => {
    win = null })
  win.loadURL(crashWinPath)
  win.show()
})

需要注意，最新文档中官方已经移除了回调函数。

dialog.showMessageBox([browserWindow, ]options)返回Promise<Object>包含以下属性：

• response 数字：被单机按钮索引。
• checkboxChecked 布尔：如果设置checkboxLabel则是复选框的选中状态，否则为false

1.2.2 进程挂起后重启窗口

该实例中我们通过remote模块创建一个新的窗口，并提供一个使用process.hang()强制挂起的链接。

窗口监听进程正式变为无响应，然后提醒用户重载或关闭。

渲染进程

const {
   BrowserWindow, dialog} = require('electron').remote
const path = require('path')

const processHangBtn = document.getElementById('process-hang')

processHangBtn.addEventListener('click', (event) => {
   
  const hangWinPath = path.join('file://', __dirname, '../../sections/windows/process-hang.html')
  let win = new BrowserWindow({
    width: 400, height: 320 })

  win.on('unresponsive', () => {
   
    const options = {
   
      type: 'info',
      title: 'Renderer Process Hanging',
      message: 'This process is hanging.',
      buttons: ['Reload', 'Close']
    }

    dialog.showMessageBox(options, (index) => {
   
      if (index === 0) win.reload()
      else win.close()
    })
  })

  win.on('close', () => {
    win = null })
  win.loadURL(hangWinPath)
  win.show()
})

2 菜单

2.1 自定义菜单

Menu和MenuItem模块能被用来创建自定义本机菜单。

菜单分两种：应用（顶部）菜单和上下文（右击）菜单。

2.1.1 创建应用菜单

Menu和MenuItem模块允许你自定义你的应用菜单。如果你没有设置任何菜单，默认情况下，Electron将为你的应用生成一个最小菜单。

主进程

const {
   BrowserWindow, Menu, app, shell, dialog} = require('electron')

let template = [{
   
  label: 'Edit',
  submenu: [{
   
    label: 'Undo',
    accelerator: 'CmdOrCtrl+Z',
    role: 'undo'