vue-cli-plugin-electron-builder 在新窗口中打开子组件答案

【问题标题】：vue-cli-plugin-electron-builder open child component in a new windowvue-cli-plugin-electron-builder 在新窗口中打开子组件
【发布时间】：2020-04-20 02:37:58
【问题描述】：

我正在为我的电子应用程序使用 vue-cli-plugin-electron-builder，我试图弄清楚如何在新窗口中打开一个组件，这实际上是一个视频播放器。场景如下：

我有一个带有开始和结束时间戳的电影对话列表。当我点击每行的开始时间戳时，新窗口应该打开并且视频播放器应该启动。

在这种状态下，我可以打开一个新窗口，如下所示：

import { remote } from "electron";

export default {
methods: {
    startVideo(id, startTimestamp) {
      // eslint-disable-next-line no-console
      console.log(id);
      // eslint-disable-next-line no-console
      console.log(startTimestamp);

      let videoPlayerWindow = new remote.BrowserWindow({
        show: true,
        width: 1440,
        height: 900,
        webPreferences: { plugins: true }
      });
    }
}
}

但我不知道在这种情况下如何注入视频播放器子组件。

【问题讨论】：

标签： windows vuejs2 electron vue-component

【解决方案1】：

我做过类似的事情，所以我应该能够在这里为您设置正确的路径。你可能只需要填补一些空白

您需要create a sub page using vue-cli。

所以在你的vue.config.js 添加

module.exports = {
  //... 
  pages: {
    index: 'src/main.js', // your main window
    video_player: 'src/video_player/main.js' // your video window
  }
}

然后，src/video_player/main.js 中的示例组件（这是您将加载视频播放器组件的位置）

import Vue from 'vue'
Vue.config.productionTip = false
const ipc = require('electron').ipcRenderer;

new Vue({
    render: h => h('div', 'This is your video player, use a component here instead')
}).$mount('#app')

// listen for data from the main process if you want to, put this in your component if necessary
ipc.on('data', (event, data) => {
  // use data
})

现在在您的主进程或src/background.js 中，您将需要添加一个事件侦听器以从渲染器进程打开窗口。

import { app, protocol, BrowserWindow, ipcMain } from 'electron' // import ipcMain

...

// create the listener
ipcMain.on('load-video-window', (event, data) => {
  // create the window
  let video_player = new BrowserWindow({ show: true,
    width: 1440,
    height: 900,
    webPreferences: {
      nodeIntegration: true,
      plugins: true
    } })

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    video_player.loadURL(process.env.WEBPACK_DEV_SERVER_URL + 'video_player.html')
    if (!process.env.IS_TEST) video_player.webContents.openDevTools()
  } else {
    video_player.loadURL(`app://./video_player`)
  }

  video_player.on('closed', () => {
    video_player = null
  })

  // here we can send the data to the new window
  video_player.webContents.on('did-finish-load', () => {
      video_player.webContents.send('data', data);
  });

});

最后，在您的渲染器进程中，发出打开窗口的事件

import { ipcRenderer } from "electron"

export default {
    methods: {
        startVideo(id, startTimestamp) {
          // eslint-disable-next-line no-console
          console.log(id);
          // eslint-disable-next-line no-console
          console.log(startTimestamp);

          let data = {id, startTimestamp}

          // emit the event
          ipcRenderer.send('load-video-window', data);
        }
    }
}

希望对您有所帮助。

Noah Klayman 在这里做了一个完整的例子https://github.com/nklayman/electron-multipage-example。

你只需要适应。

【讨论】：