首页  思维导图  详情

学习electron

2021-11-08 16:29:37   14  举报





AI智能生成

electron学习笔记

electron

作者其他创作

大纲/内容

创建项目脚手架

mkdir my-electron-app && cd my-electron-app

npm init

npm install --save-dev electron

打开dev调试

npm install electron-devtools-installer --save-dev

一些概念

主进程入口

package.json => main 指向的文件

主进程

一个App有且仅有一个主进程（main.js)

渲染进程

可以有多个

渲染进程中打开新的窗口v12版本以后

安装单独的模块

npm install --save @electron/remote

使用

1、主进程中引入(加载页面文件后)：

require('@electron/remote/main').initialize()

require("@electron/remote/main").enable(win.webContents)

2、子进程中使用：const { BrowserWindow } = require('@electron/remote')

Note: In electron >= 14.0.0, you must use the new enable API to enable the remote module for each desired WebContents separately: require("@electron/remote/main").enable(webContents). In electron < 14.0.0, @electron/remote respects the enableRemoteModule WebPreferences value. You must pass { webPreferences: { enableRemoteModule: true } } to the constructor of BrowserWindows that should be granted permission to use @electron/remote.

参考

https://blog.csdn.net/qq_51634332/article/details/120575284

打开窗口

const win = new BrowserWindow({       width: 600,       height: 400,       webPreferences: {         preload: path.join(__dirname, renderFile)       }     }) win.loadFile('html file path')

自定义菜单

自定义顶部菜单

const { Menu } = require('electron') const template = [{   label: '文件',   submenu: [     { role: 'about' },     { type: 'separator' },     { role: 'quit' }   ] }, {   label: '设置',   submenu: [     {       label: '打开electron官网',       accelerator: 'ctrl+N',//键盘快捷键       click: async () => {         const { shell } = require('electron')         await shell.openExternal('https://electronjs.org')       }     }   ] }] const menu = Menu.buildFromTemplate(template) Menu.setApplicationMenu(menu)

自定义右键菜单

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

v15以后通过IPC通讯

删除默认菜单

win.removeMenu()

打开外部链接

const { shell } = require('electron') await shell.openExternal('https://electronjs.org')

主进程&渲染进程通讯

渲染进程可以发送同步异步  消息给主进程

渲染进程使用 ipcRenderer.send 或者 ipcRenderer.invoke 发送消息 主进程使用 ipcMain.on或者ipcMain.handle 接收消息

主进程只能发送异步消息给渲染进程

主进程向渲染进程通讯 主进程使用 win.webContents.send 发送消息 渲染进程使用 ipcRenderer.on 接收消息