共计 2799 个字符，预计需要花费 7 分钟才能阅读完成。
electron-vue 窗口的 mini 模式
electron 中打开新窗口通常就是新开一个 html 页面，vue 是单页面，只有一个入口文件，它的路由跳转是 H5 的 location；
设想
新增入口文件，就是新加 html，但这样失去了单页面的作用，vue 也无法在两个不同 html 中运行
方法
我个人的方法是子窗口打开同一个 html 文件，但路由地址不同
为什么要这样，直接拖曳缩小不行吗？
不行为了布局这些，设置了窗口最小大小，设置了以后，窗口的 setSize 方法中宽高小于最小宽高是无效的，mini 化也就只能新建窗口了
实现
// main/index.js
function 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.vue
const 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++ 什么的
具体方法下一篇