宣威做网站推广的公司,跨境电商网站怎么做,网站怎么做评估,如何把国外的网站在国内做镜像进程间通信 (IPC) 是在 Electron 中构建功能丰富的桌面应用程序的关键部分之一。 由于主进程和渲染器进程在 Electron 的进程模型具有不同的职责#xff0c;因此 IPC 是执行许多常见任务的唯一方法#xff0c;例如从 UI 调用原生 API 或从原生菜单触发 Web 内容的更改。
在 …进程间通信 (IPC) 是在 Electron 中构建功能丰富的桌面应用程序的关键部分之一。 由于主进程和渲染器进程在 Electron 的进程模型具有不同的职责因此 IPC 是执行许多常见任务的唯一方法例如从 UI 调用原生 API 或从原生菜单触发 Web 内容的更改。
在 Electron 中进程使用 ipcMain 和 ipcRenderer 模块通过开发人员定义的“通道”传递消息来进行通信。
在本文中我们使用vue3viteelctron做演示将介绍一些基本的 IPC 模式并提供具体的示例。您可以将这些示例作为您应用程序代码的参考。
一、搭建项目
1、使用vite创建vue3项目
npm init vite2、安装依赖
npm install3、安装electron
npm install electron --save-dev4、配置package.json
main: main.js,
scripts: {dev: vite,start: electron .
}5、创建文件
main.js主进程文件preload.js预加载脚本文件
6、启动vue项目和electron项目
npm run devnpm run start7、项目目录结构 二、主进程到渲染进程
从主进程发送到渲染器进程指定一个渲染器接收消息。 消息通过 WebContents 实例发送到渲染器进程。
在下面的示例中我们将在主进程创建一个菜单点击菜单事件后发送消息到渲染器进程渲染器进程接受到消息后做弹窗操作。
1、主进程页面
// main.js
const {app,BrowserWindow,Menu} require(electron)
const path require(path)
//主进程创建窗口方法
const createWindow () {const win new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, preload.js)}})//打开渲染页面win.loadURL(http://localhost:5173)//创建自定义菜单const template [{label: 文件,submenu: [{label: 新建,accelerator: CmdOrCtrlN,click() {// 这里点击新建菜单向渲染进程发送消息win.webContents.send(update-isShow)}}]}]const menu Menu.buildFromTemplate(template)Menu.setApplicationMenu(menu)
}
//在应用准备就绪时调用创建窗口方法函数
app.whenReady().then(() {createWindow()
})2、预加载脚本页面
// preload.js
const { contextBridge, ipcRenderer} require(electron)
//桥接渲染进程与主进程的点击新建菜单方法
const openDialog (callback) {ipcRenderer.on(update-isShow, callback)
}
contextBridge.exposeInMainWorld(electronAPI, {openDialog})3、渲染进程页面具体的vue页面
// renderer.js
// vue页面监听消息操作
window.electronAPI.openDialog((){//...这里打开弹窗
})三、渲染进程到主进程双向
从渲染器进程代码调用主进程模块并等待结果。 通过 ipcRenderer.invoke 与 ipcMain.handle 搭配使用来完成。
在下面的示例中我们将从渲染器进程发送一个网址到主进程主进程拿到网址打开网址截屏获取图片并返回图片路径。
1、渲染进程页面具体的vue页面
// renderer.js
// vue页面触发新增网站按钮事件
const handleSubmit async () {const result await window.electronAPI.sendUrl(url)//拿到主进程返回的结果做添加处理console.log(result)
}2、预加载脚本页面
// preload.js
const { contextBridge, ipcRenderer} require(electron)
//桥接渲染进程与主进程的新增网站方法
const sendUrl async (url) {const result await ipcRenderer.invoke(get-url-event, url)return result
}
contextBridge.exposeInMainWorld(electronAPI, {sendUrl})3、主进程页面
// main.js
const { ipcMain} require(electron)
//主进程使用shell打开网站
ipcMain.handle(get-url-event, async (event, url) {const result await getSource(url)return result
})
//获取网站截屏图片
const getSource (url) {return new Promise((resolve, reject) {//...这里处理逻辑并返回结果resolve(base64)})
}四、渲染进程到主进程单向
从渲染器进程发送到主进程使用 ipcRenderer.send 发送消息然后使用 ipcMain.on 接收。
在下面的示例中我们将从渲染器进程发送一个网址到主进程主进程拿到网址打开网址。
1、渲染进程页面具体的vue页面
// renderer.js
// vue页面触发打开网站按钮事件
const handleOpen (url) {window.electronAPI.openUrl(url)
}2、预加载脚本页面
// preload.js
const { contextBridge, ipcRenderer} require(electron)
//桥接渲染进程与主进程的打开网站方法
const openUrl (url) {ipcRenderer.send(open-url-event, url)
}
contextBridge.exposeInMainWorld(electronAPI, {openUrl})3、主进程页面
// main.js
const { ipcMain, shell} require(electron)
//主进程使用shell打开网站
ipcMain.on(open-url-event, (event, url) {shell.openExternal(url)
})五、示例代码下载
1、项目介绍
通过vue3elctron实现一个基础的桌面端应用——收藏夹功能。使用了部分vue3的基本功能及方法了解Electron的一下API的使用开发中的常用的插件及依赖的使用方法。
pinialocalStorage数据持久化unplugin-auto-import自动引入依赖unplugin-vue-components自动引入组件provide与inject组件间通信electron进程间相互通信element-plus构建UI界面
2、项目启动
安装依赖
npm install启动vue项目
npm run dev启动electron项目
npm run start3、项目截图
