手机端网站首页怎么做,宁德时代网站哪个公司做的,商城模板网站模板免费下载,前端开发工具推荐本文示例采用ElectronVue3TS编写#xff0c;请读者理顺思路#xff0c;自行带入自己的项目。 注#xff1a; 读本文前请先搞懂什么是主进程#xff0c;什么是渲染进程。
在Electron中有着ipcMain和ipcRenderer、contextBridge模块#xff0c;以及创建窗口对象上的webCont…本文示例采用ElectronVue3TS编写请读者理顺思路自行带入自己的项目。 注 读本文前请先搞懂什么是主进程什么是渲染进程。
在Electron中有着ipcMain和ipcRenderer、contextBridge模块以及创建窗口对象上的webContents。很显然ipcMain和窗口对象上的webContents是在主进程中使用的ipcRenderer和contextBridge用于向渲染进程暴露API是在预加载脚本中使用的。 请看下方示例关键讲解写在代码注释中。
一、主进程发送消息到渲染进程
主进程中发送消息是使用new 窗口时的对象上的webContents发送消息。例如 main.js中
let appWindow;
const createWindow () {appWindow new BrowserWindow({width: 850,height: 700,webPreferences: {preload: path.join(path.resolve(), preload/index.js)}})// 创建窗口后向渲染进程发送平台信息但是不能直接发送给渲染进程需要通过预加载脚本进行中转appWindow.webContents.send(platform, process.platform)
}于是在preload/index.js中
const { contextBridge, ipcRenderer } require(electron)
// ipcRenderer监听消息名为platform的事件并在第二个参数回调函数中接收参数
// 回调函数又包含两个参数一个是事件信息一个是消息传递的参数
ipcRenderer.on(platform, (_, arg) {// 拿到参数后我们使用contextBridge向渲染进程中也就是html或vue界面暴露名为platform的API当然名字可自定义其它。// 暴露出的API挂载在window对象上contextBridge.exposeInMainWorld(platform, arg)
})于是在vue界面中我们可以使用以下代码获取平台信息 index.vue文件
script setup langtsimport { ref, onMounted } from vueconst platform refstring()onMounted(() {// 此时可以在window对象上直接读取platform数据值platform.value window.platform})
/script二、主进程发送消息渲染进程进行监听
上面一个示例只有在窗口创建时向渲染进程发送了一个消息且只发送一次。那假如我现在有个需求是需要监听窗口的变化最大化、最小化、缩小等等信息。获取窗口最大小的API存在于创建的窗口对象上那么此时就应该在主进程中监听窗口变化发送消息给渲染进程并且渲染进程需要监听主进程发送的消息。 主进程 main.js
let appWindow;
const createWindow () {appWindow new BrowserWindow({width: 850,height: 700,webPreferences: {preload: path.join(path.resolve(), preload/index.js)}})// appWindow对象上的on方法监听窗口事件appWindow.on(resize, () {// 当窗口发生变化时使用webContents.send方法向预加载脚本发送消息消息名为resizeWindow并挈带参数为窗口是否最大化appWindow.webContents.send(resizeWindow, appWindow.isMaximized())})
}那么在预加载脚本中preload/index.js就有了如下代码
const { contextBridge, ipcRenderer } require(electron)// 首先向渲染进程中暴露出一个名为resizeWindow的API名字可自定义并将此API以对象的形式向外暴露对象中编写一个监听窗口更新的方法名为onUpdateWindow
// 此更新方法接收一个回调函数用于在渲染进程中获取参数
// 此用法成为 高阶函数
// 更新方法的方法体为 ipcRenderer监听主进程发送的resizeWindow事件
// 在接受窗口变化事件的第二个参数中接收变化参数并调用callback()函数将变化值传递进此回调中
contextBridge.exposeInMainWorld(resizeWindow, {onUpdateWindow: (callback) ipcRenderer.on(resizeWindow, (_, value) callback(value)),
})在渲染进程中
script setup langts
import { ref, onMounted } from vueconst isMaxWin refboolean(false)onMounted(() {// 调用window对象上的resizeWindow中的onUpdateWindow,并传递一个函数进去//此函数对应的就是上方的callback当ipcRenderer监听到事件后调用callback()// 此回调函数就能够接收到窗口是否最大化的值window.resizeWindow.onUpdateWindow((value: boolean) {isMaxWin.value value})
})
/script三、渲染进程发送消息到主进程
渲染进程向主进程发送消息也是预加载脚本中向渲染进程暴露出一个API渲染进程中调用此API触发预加载脚本中对应的函数此函数可以通过ipcRenderer调用主进程中的方法。
首先预加载脚本中的代码
const { contextBridge, ipcRenderer } require(electron)// 向渲染进程的window对象中绑定languageAPI此API以对象的形式存在一个setTitle方法
// 此方法接收一个title并在方法体中使用ipcRenderer.invoke调用主进程中名为language:setTitle的监听事件
// 注意language:setTitle只是自定义的名称为了更醒目而已开发者可以自定义其他名称
contextBridge.exposeInMainWorld(language, {setTitle: (title) ipcRenderer.invoke(language:setTitle, title),
})
主进程中的代码
const { BrowserWindow, ipcMain} require(electron);let appWindow;
const createWindow () {appWindow new BrowserWindow({width: 850,height: 700,webPreferences: {preload: path.join(path.resolve(), preload/index.js)}})
}
// 预加载脚本中invoke对象的监听事件为ipcMain.handle
// 所以此时主进程会监听名为language:setTitle的事件并在回调函数中的第二个参数接收参数。
ipcMain.handle(language:setTitle, (_, title) {// 设置窗口名称appWindow.setTitle(title)
})在渲染进程中调用预加载脚本中定义的方法
script setup langts
import { ref } from vue
import { useI18n } from vue-i18nconst { locale, t } useI18n()
const changeLanguage (language: string) {locale.value language// 当在界面中触发此方法时 调用window.language.setTitle方法并传入参数window.language.setTitle(t(app.name))
}
/script四、解决预加载脚本暴露在window对象上的数据在ts中报错问题
由于自定义的API名称挂载到了window对象上window此前并无此API所以在ts的代码编写中会出现Proerty does not exist on type Window typeof globalThis的错误即使代码可以运行。 所以此时我们需要定义.d.ts文件声明Window的API类型。 在项目根目录或者适合你项目的地方创建任意名称的.d.ts文件并编写文件内容
declare module *.vue;type handleWindowAPI {get: () Promiseboolean;set: (value: string) Promisevoid;
}
type languageAPI {setTitle: (title: string) void;
}
type darkModeAPI {toggle: () Promiseboolean;
}
type resizeWindowAPI {onUpdateWindow: (callback: Function) Promiseboolean;
}
interface Window {platform: string;language: languageAPI;darkMode: darkModeAPI;handleWindow: handleWindowAPI;resizeWindow: resizeWindowAPI;
}之后在tsconfig.json文件中的include属性中加载此ts文件
{compilerOptions: {target: ES2020,useDefineForClassFields: true,module: ESNext,lib: [ES2020, DOM, DOM.Iterable],skipLibCheck: true,/* Bundler mode */moduleResolution: bundler,allowImportingTsExtensions: true,resolveJsonModule: true,isolatedModules: true,noEmit: true,jsx: preserve,/* Linting */strict: true,noUnusedLocals: true,noUnusedParameters: true,noFallthroughCasesInSwitch: true},// 这里加载项目所有src下以ts结尾的文件include: [src/**/*.ts, src/**/*.tsx, src/**/*.vue],references: [{ path: ./tsconfig.node.json }]
}
最后提醒
在预加载脚本中向渲染进程中暴露API时暴露同一个名称的API的代码只能执行一次否则将会报错Cannot bind an API on top of an existing property on the window object
