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

sanallen

2019-07-01

关注关注

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-vue开发音乐播放器之窗口的mini模式

预告一下

网上的electron实现播放器，我找了半天也没有如何mini化的，花了不少时间
接下来是另一个问题，读取本地的文件夹，就是上图打开本地文件那个
1. 如何读取音乐并获取它的时长，信息，作者，专辑呢，我利用了ffmpeg这个模块
2. 但随之而来的是ffmpeg必须要安装才能使用，我们最终打包不同客户端，不可能强制客户安装其它软件才能用我们的应用，网上也没什么解决实例，我不会c，c++什么的
3. 具体方法下一篇

electron