初探Electron----ipcRenderer问题

笔者最近收到做桌面端的需求,为了一套代码满足mac和Windows,遂选择了flutter,在调研flutter桌面端的时候,发现flutter对于Windows的内嵌webview不太友好,需要在包里集成WebView2,同时webview上如果在添加组件的话,也有滑动上的问题,项目中会有大量的webview上的需求,遂放弃了flutter,选用electron。
electron 集成还是超级简单的,我选用的是在vue2项目下添加electron支持,剩下的就是前端开发了,但是在打开新的子窗口时,遇到了electron 最近的一个更新,在vue界面中,不能直接通过 const { ipcRenderer } = window.require('electron'); 获取ipcRenderer,需要添加一个preload.js,来进行中转,百度了一下,发现相关资料较少,官网说的也不太直白,这里做下科普吧,主要是给新手electron 开发看的,嘿嘿

image.png

这是一个项目目录.先手动添加preload.js,里面内容为

const { contextBridge, ipcRenderer } = require('electron');

const validChannels = ['show-read-win',];
contextBridge.exposeInMainWorld(
    'ipc', {
    send: (channel, data) => {
        if (validChannels.includes(channel)) {
            ipcRenderer.send(channel, data);
        }
    },
    on: (channel, func) => {
        if (validChannels.includes(channel)) {
            // Strip event as it includes `sender` and is a security risk
            ipcRenderer.on(channel, (event, ...args) => func(...args));
        }
    },
},
);

修改vue.config.js为

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  pluginOptions: {
    electronBuilder: {
      preload: 'src/preload.js'  //make sure you have this line added
    }
  }
})

然后再background.js中引入

const path = require('path');

 const win = new BrowserWindow({
    minWidth: 1024,
    minHeight: 768,
    width: 1024,
    height: 768,
    center: true,
    transparent: false,
    frame: true, // 隐藏窗口边框
    backgroundColor: '#00000000', // 透明背景色
    skipTaskbar: false,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
    }
  })

这里面有个问题是path,报错我忘了截图.需要下载

 npm install path-browserify    #这个库

然后添加webpack.config.js文件,里面内容

const path = require('path');

module.exports = {
    resolve: {
        fallback: {
            "fs": false,
            "path": require.resolve("path-browserify")
        }
    },
};

这样就可以直接使用啦,在主窗口

      window.ipc.send("show-read-win"); //就可以直接发送通知

在background.js进行接收

ipcMain.on('show-read-win', () => {
  if (childWindow === null) {
    createChildWindow();
  } else {
    childWindow.show();
  }
});

这样就全部完成啦,有什么问题可以留言探讨~

Electron Mac 打包报 Error: Exit code: ENOENT. spawn /usr/bin/python 如何解决
which python
找到自己的2.7python目录

/Library/Frameworks/Python.framework/Versions/2.7/bin/python

然后找到目录下的/node_modules/dmg-builder/out/dmg.js
将
"/usr/bin/python" 修改成 /Library/Frameworks/Python.framework/Versions/2.7/bin/python 就可以了

参考资料
https://medium.com/swlh/how-to-safely-set-up-an-electron-app-with-vue-and-webpack-556fb491b83

生命不息,代码不止!码农一枚,请多点赞