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()
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 - 阻止方式：
- prevent-app-suspension - 阻止应用被暂停。 保持系统活动状态，但允许屏幕关闭。 实例：下载文件或播放音频。
- 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有些类似。