electron应用API

前言

学习electron过程中发现有很多API，官方文档直接展示英文，写个简便目录留以自用。
官网

1 app-主进程-事件生命周期

建立窗口功能需要在app实现ready后才能调用。没有app的ready，系统会报错。
案例：

//此段代码可以执行
const {app, BrowserWindow } = require('electron')
function create(){
  const top = new BrowserWindow()
  const child = new BrowserWindow({ parent: top })
  child.show()
  top.show()
}
app.whenReady().then(create)
//此段报错
const {BrowserWindow } = require('electron')
const top = new BrowserWindow()
const child = new BrowserWindow({ parent: top })
  child.show()
  top.show()

![在这里插入图片描述](https://img-blog.csdnimg.cn/4cca1ebe0cc04e63afe3018b0b819a55.png

2 autoUpdater-主进程-程序自动更新

不同平台存在细微差别。
官网

3 BrowserView-主进程-嵌入其他内容控制视图

在BrowserWindow界面中添加额外的内容，嵌入行为。

4 BrowserWindow-主进程-创建控制浏览器窗口

可以使用参数定义各种类型窗口，能够通过判断各类事件触发后续操作。存在一系列实例方法。
参考链接

5 clipboard-主+渲染-剪贴板的复制粘贴

const { clipboard } = require('electron')

clipboard.writeText('Example string', 'selection')
console.log(clipboard.readText('selection'))

6 contentTracing-主进程-追踪数据找性能瓶颈

app.whenready后执行该模块功能

7 crashReporter-主进程-提交崩溃日志

https://www.electronjs.org/zh/docs/latest/api/crash-reporter

8 desktopCapturer-主进程-捕获音频、视频源信息

9dialog-主进程-打开保存文件、警报

const { app,dialog } = require('electron')
function fun(){
  console.log(dialog.showOpenDialog({ 
    properties: ['openFile', 'multiSelections'] 
  })
  )
}
app.whenReady().then(fun)

10 globalShortcut-主进程-监听键盘

app.whenReady()后执行

11 ipcMain-主进程-主到渲染异步通信

可以建立channel，通过这个channel交互。

12 Menu-主进程-原生应用/上下文菜单

const { app,Menu, shell, ipcMain, BrowserWindow } =require('electron');
 
// normal （常规菜单项）
// separator （分割线）
// submenu （子菜单）
// checkbox （复选菜单项）
// radio （单选菜单项）
// 创建 menu
app.on('ready',()=>{
  createMainWindow()
  createMenu()
})
function createMainWindow(){
  const win = new BrowserWindow({
    height:800,
    width:600
  })
}
function createMenu() {
  const template = [
    {
      label: '原生应用菜单演示',
      submenu: [
      ],
    },
    {
      label: '文件',
      submenu: [
        {
          label: '打开',
          accelerator: 'ctrl+q',
          click() {},
        },
        {
          label: '保存',
          click() {
          },
        },
        {
          type: 'separator',  // 分割线
        },
        {
          label: '打印',
          click() {},
        },
      ],
    },
    {
      label: '编辑',
      submenu: [
        {
          label: '撤销',
          role: 'undo',
        },
      ],
    },
    {
      label: '视图',
      submenu: [
        {
          label: '全屏',
          role: 'togglefullscreen',
        },
      ],
    },
    {
      label: '帮助',
      submenu: [
        {
          label: '关于',
          click() {
            shell.openExternal('https://www.baidu.com');
          },
        },
      ],
    },
  ];
  let menu = Menu.buildFromTemplate(template)
  Menu.setApplicationMenu(menu)
}

引用文章1

引用文章2

13 MessageChannelMain-主进程-通道消息传递

14 MessagePortMain-主进程-通道消息传递的端口

15 nativeImage-主+渲染-png/jpg创建图标

16 nativeTheme-主进程-本地色彩变化

17 net-主进程-发送http请求的客户端api

api组件都很像node.js

18 netlog-主进程-记录会话的网络事件

除指定方法，其余需在app.whenready后执行

19 powerSaveBlocker-主进程-阻止系统进入低功耗 (休眠) 模式

方法：
powerSaveBlocker.start(type)
type string - 阻止方式：

1. prevent-app-suspension - 阻止应用被暂停。 保持系统活动状态，但允许屏幕关闭。 实例：下载文件或播放音频。
2. prevent-display-sleep - 防止显示器进入休眠状态。 保持系统和屏幕的活跃性。 实例：播放视频。

20 process-主+渲染-处理对象的扩展

事件&属性：https://www.electronjs.org/zh/docs/latest/api/process

21 protocol-主进程-自定义协议&拦截基于现有协议的请求

22 screen-主进程-检索有关屏幕大小、显示器、光标位置等的信息.

https://www.electronjs.org/zh/docs/latest/api/screen

23 session-主进程-浏览器会话、cookie、缓存、代理设置

24 shell-主+渲染+非沙盒-默认应用程序管理文件和url。

25 systemPreferences-获取system preferences

26 Tray-主进程-系统托盘，添加图标和上下文菜单到系统通知区

27 webContents-主进程-渲染控制web界面

const { app, BrowserWindow } = require('electron')
function fun()
{
  win = new BrowserWindow({ width: 800, height: 1500 }),
  win.loadURL('http://baidu.com'),
  contents = win.webContents,
  console.log(contents)
}
app.whenReady().then(fun)

官方链接

28 webFrameMain-主进程-控制页面和内联框架(iframes)。

const { app, BrowserWindow,webFrameMain } = require('electron')
function fun()
{
  win = new BrowserWindow({ width: 800, height: 1500 }),
  win.loadURL('http://baidu.com'),
  win.webContents.on(
    'did-frame-navigate',
    (event, url, httpResponseCode, httpStatusText, isMainFrame, frameProcessId, frameRoutingId) => {
      const frame = webFrameMain.fromId(frameProcessId, frameRoutingId)
      if (frame) {
        const code = 'document.body.innerHTML = document.body.innerHTML.replaceAll("heck", "h*ck")'
        frame.executeJavaScript(code)
      }
    }
  )
}
app.whenReady().then(fun)

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

async function main () {
  const win = new BrowserWindow({ width: 800, height: 600 })
  await win.loadURL('https://baidu.com')

  const youtubeEmbeds = win.webContents.mainFrame.frames.filter((frame) => {
    try {
      const url = new URL(frame.url)
      return url.host === 'www.youtube.com'
    } catch {
      return false
    }
  })

  console.log(youtubeEmbeds)
}

app.whenReady().then(main)

29 contextBridge-渲染进程-隔离的上下文中创建一个安全的、双向的、同步的桥梁

做通信的时候常用，暴露一个electron下的api。

30 ipcRenderer-渲染进程-渲染到主异步通信

与ipcMain有些类似。

31 webFrame-渲染进程-自定义渲染当前网页