首页  思维导图  详情

学习electron

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





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 接收消息