笔者最近收到做桌面端的需求,为了一套代码满足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 开发看的,嘿嘿
这是一个项目目录.先手动添加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
生命不息,代码不止!码农一枚,请多点赞
