electron-vue开发音乐播放器 之 窗口的mini模式

electron-vue 窗口的mini模式electron中打开新窗口通常就是新开一个html页面，vue是单页面，只有一个入口文件，它的路由跳转是H5的location；设想新增入口文件，就是新加html，但这样失去了单页面的作用，vue也无法在两个不同html中运行方法我个人的方法是子窗口打开同一个html文件，但路由地址不同为什么要这样，直接拖曳缩小不行吗？不行为了布局这些，设置了窗口最小大小，设置了以后，窗口的setSize方法中宽高小于最小宽高是无效的，mini化也就只能新建窗口了实现// main/index.jsfunction createWindow () { // 初始化窗口就是mainWindow,省略 BrowserWindow.mainWindow = mainW; // 一定要加,用于判断是否新建子窗口，否则会不断新建 BrowserWindow.miniWindow = null;}// 监听窗口状态ipc.on(‘winreduction’, (event, state) => { // 监听从mini窗口变回原来大小 if(state == ‘mini’) { // 主要是这里，发送一个窗口要从mini模式还原到原来大小,事件从mini.vue发出 event.sender.send(‘full’, ‘reduction’) } else { mainWindow.unmaximize(); } event.sender.send(‘statechange’, ‘reduction’);})// app.vue// 在appvue里新建子窗口const electron = require(“electron”);const ipc = electron.ipcRenderer;const currWin = electron.remote.getCurrentWindow();import { setTimeout, clearTimeout, setImmediate } from “timers”;let miniWindow = null;function createMiniWin() { let miniWindow = new electron.remote.BrowserWindow({ width: 280, height: 48, frame: false, titleBarStyle: “hidden”, // macOs useContentSize: true, show: false, center: true, resizable: false, webPreferences: { webSecurity: false // 禁用同源策略 } }); let winURL = window.location.href; let uri = winURL + winURL.substring(0, winURL.indexOf("#") + 1); if (/#/.test(uri)) { uri += “mini”; } else { uri += “#/mini”; } miniWindow.loadURL(uri); miniWindow.once(“ready-to-show”, () => { miniWindow.hide(); // mainWindow.setAlwaysOnTop(true, ‘status’); // 总是最顶层 if (miniWindow.moveTop) { miniWindow.moveTop(); } }); miniWindow.on(“closed”, () => { miniWindow = null; }); return miniWindow;}// 这就是在index里设置BrowserWindow.miniWindow的原因，这样就会只创建一次if (electron.remote.BrowserWindow.miniWindow === null) { miniWindow = electron.remote.BrowserWindow.miniWindow = createMiniWin(); ipc.send(“miniCreate”, miniWindow);}export default { name: ‘app’, data() { return { state: “reduction”, } }, mounted() { ipc.on(“statechange”, (event, data) => { this.state = data; mainWindow: electron.remote.BrowserWindow.mainWindow, miniWindow: electron.remote.BrowserWindow.miniWindow, }); ipc.on(“full”, (event, state) => { this.state = state; /* 这个是一个坑，本来我设想是路由跳转回来，但是会导致窗口出现延迟，就像是打开网页一样的感觉 因为是边学边用，没有看过全部API，我找了半天，终于找到一个goBack方法，用于回退，没有延迟 感觉和原生一样 */ this.mainWindow.webContents.goBack(); // mini隐藏，main显示 this.miniWindow.hide(); this.mainWindow.show(); }); }, // 省略 watch: { state(old, news) { if (old == “mini”) { // 点击缩小按钮，路由跳转到mini，并且将主窗口隐藏，mini窗口显示 this.$router.push({ name: “mini” }); this.miniShow(); } } }}// mini.vueconst electron = require(“electron”);const remote = electron.remote;const ipc = electron.ipcRenderer;export default { name: “mini”, data() { return { mainWindow: remote.BrowserWindow.mainWindow, }; }, created() {}, methods: { close() { ipc.send(“winclose”); }, full() { ipc.send(“winreduction”, “mini”); // 发出要从mini窗口变回原来大小 } }};效果如图mini还没画预告一下网上的electron实现播放器，我找了半天也没有如何mini化的，花了不少时间接下来是另一个问题，读取本地的文件夹，就是上图打开本地文件那个如何读取音乐并获取它的时长，信息，作者，专辑呢，我利用了ffmpeg这个模块但随之而来的是ffmpeg必须要安装才能使用，我们最终打包不同客户端，不可能强制客户安装其它软件才能用我们的应用，网上也没什么解决实例，我不会c，c++什么的具体方法下一篇