electron-vue開發音樂播放器 之 窗口的mini模式

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還沒畫

預告一下

1. 網上的electron實現播放器，我找了半天也沒有如何mini化的，花了不少時間

2. 接下來是另一個問題，讀取本地的文件夾，就是上圖打開本地文件那個

   1. 如何讀取音樂並獲取它的時長，信息，作者，專輯呢，我利用了ffmpeg這個模塊
   2. 但隨之而來的是ffmpeg必須要安裝才能使用，我們最終打包不同客戶端，不可能強制客戶安裝其它軟件才能用我們的應用，網上也沒什麼解決實例，我不會c，c++什麼的
   3. 具體方法下一篇