electron获取机器码,vue与electron通信代码
发布时间:2023-08-03, 18:46:16 分类:Vue | 编辑 off 网址 | 辅助
正文 2864字数 10,621阅读
在Electron项目中安装了node-machine-id模块
npm install node-machine-id
Run code
Cut to clipboard
在Electron的主进程中,
使用node-machine-id模块获取机器码并通过contextBridge传递给渲染进程:
// main.js (Electron主进程入口文件)
const { app, BrowserWindow, ipcMain, contextBridge } = require('electron');
const { machineIdSync } = require('node-machine-id');
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false, // 禁用nodeIntegration
contextIsolation: true, // 启用contextIsolation
preload: path.join(__dirname, 'preload.js'), // 指定preload脚本
},
});
mainWindow.loadFile('index.html');
}
app.on('ready', createWindow);
Run code
Cut to clipboard
然后,在Electron主进程的同级目录下创建preload.js文件,
用于在渲染进程中暴露machineIdSync函数:
// preload.js
const { contextBridge } = require('electron');
const { machineIdSync } = require('node-machine-id');
// 使用contextBridge安全地暴露machineIdSync函数给渲染进程
contextBridge.exposeInMainWorld('myElectronAPI', {
machineIdSync: machineIdSync,
});
Run code
Cut to clipboard
在Vue.js应用中,
使用window.myElectronAPI.machineIdSync来获取机器码:
// 在Vue.js应用中
// 使用window.myElectronAPI.machineIdSync可以安全地在渲染进程中获取机器码
const machineId = window.myElectronAPI.machineIdSync();
console.log('Machine ID:', machineId);
Run code
Cut to clipboard
===end===
在 Electron 中,当渲染进程通过 ipcRenderer.invoke() 调用某个方法时,
需要在主进程的 ipcMain 中注册对应的处理函数。
在主进程 main.js 中添加对 test1 消息的处理:
// main.js (Electron主进程入口文件)
const { app, BrowserWindow, ipcMain, contextBridge } = require('electron');
const { machineIdSync } = require('node-machine-id');
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
preload: path.join(__dirname, 'preload.js'),
},
});
mainWindow.loadFile('index.html');
}
// 在主进程中注册对应的处理函数
ipcMain.handle('test1', (event, arg) => {
console.log('Received test1 message from renderer:', arg);
// 在这里执行对test1消息的处理,并返回结果给渲染进程
return 'Hello from Electron';
});
app.on('ready', createWindow);
Run code
Cut to clipboard
在渲染进程的 preload.js 中
// preload.js
const { contextBridge, ipcRenderer } = require('electron');
const { machineIdSync } = require('node-machine-id');
// 使用contextBridge安全地暴露machineIdSync函数和test1方法给渲染进程
contextBridge.exposeInMainWorld('myElectronAPI', {
machineIdSync: machineIdSync,
test1: (a) => {
return ipcRenderer.invoke('test1', a);
},
});
Run code
Cut to clipboard
在 Vue.js 应用中,
调用 window.myElectronAPI.test1 来触发 test1 方法,
并获取主进程中处理后的结果:
// 在Vue.js应用中
async function test1FromElectron() {
const result = await window.myElectronAPI.test1('Hello from Vue.js');
console.log('Result from main process:', result);
}
test1FromElectron();
Run code
Cut to clipboard
现在,应该能够在渲染进程中成功调用主进程中的 test1 方法,并得到返回结果了
(支付宝)给作者钱财以资鼓励 (微信)→
暂无评论 »