새 창에서 열린 하위 구성 요소

새 창에서 열린 하위 구성 요소

전자 앱에 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 }
      });
    }
}
}

이 경우 비디오 플레이어 아동용 부품을 어떻게 주입해야 할지 모르겠어요

나도 비슷한 일을 했으니 널 여기서 올바른 길로 인도할 수 있을 거야.몇 가지 빈칸을 채워야 할 수도 있습니다.

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에서 완전한 예를 제시했습니다.

넌 적응만 하면 돼

언급URL : https://stackoverflow.com/questions/59546249/vue-cli-plugin-electron-builder-open-child-component-in-a-new-window