electron-vue 窗口的mini模式
electron中打开新窗口通常就是新开一个html页面,vue是单页面,只有一个入口文件,它的路由跳转是H5的location;Electron + React + Node.js + ES6 开发桌面软件
设想
新增入口文件,就是新加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还没画![在这里插入图片描述](https://img-blog.csdnimg.cn/20190402192045766.gif)
预告一下
- 网上的electron实现播放器,我找了半天也没有如何mini化的,花了不少时间
-
接下来是另一个问题,读取本地的文件夹,就是上图打开本地文件那个
- 如何读取音乐并获取它的时长,信息,作者,专辑呢,我利用了ffmpeg这个模块
- 但随之而来的是ffmpeg必须要安装才能使用,我们最终打包不同客户端,不可能强制客户安装其它软件才能用我们的应用,网上也没什么解决实例,我不会c,c++什么的
- 具体方法下一篇