先说明一下，主进程是不能主动发送数据给渲染进程的，网上使用webContents方法的文章都是抄来抄去，误导一大批新手
那么为了实现这个功能，我们可以换种方法实现：
我们假设渲染进程是index.vue文件，main.js是主进程，正确的方法和流程应该是这样：
有这样一个需求，a窗口告诉主进程，你帮我打开b窗口并传递一点数据过去，
总共用四步；代码如下：
a.vue
|
1 2 3 4 5 6 |
methods: { getNodeImg (e) { // 向main.js发送通信消息 ipcRenderer.send('img-viewer', params) } }, |
main.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// 接收到a.vue的要求 ipcMain.on('img-viewer', (event, params) => { global.previewImgUrl = params.url imgWindow = new BrowserWindow({ width: params.width, height: params.height, autoHideMenuBar: true, useContentSize: true, title: '图片预览', icon: ' ', webPreferences: { nodeIntegration: true, devTools: false } }) imgWindow.loadURL(`${winURL}#/img-viewer`) }) // 2: b.vue已经加载完了 ipcMain.on('img-viewer-loaded', () => { // 3：给b.vue发送点数据过去 imgWindow.webContents.send('imgdata', global.previewImgUrl) }) |
b.vue:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
data () { return { imgSrc: '' } }, mounted () { // 1：告诉主进程，我加载完了 ipcRenderer.send('img-viewer-loaded') // 4：接受主进程发送过来的数据 ipcRenderer.on('imgdata', (event, params) => { this.imgSrc = params }) } |
这样就很轻易的实现了主进程向渲染进程发送数据的功能。
详细的代码可以移步github把我做的小项目拉下来看一下，
https://github.com/xj124456/electron-chatbox
