electron 使用两个页面(额外添加一个html文件)

需求:打开窗口 (加载本地的html页面) 并播放视频资源

环境

electron 28.1.3 + electron-forge 7.2.0

思路:因为要加载新弹出一个窗口并播放资源,可以自己加载一个外部的页面或者加载一个本地的页面,使用本地的会好些。让electron-forge在打包时额外加载一个html文件到项目中。

参考资料

代码

forge.config.ts (打包配置代码)

const config: ForgeConfig = {
  packagerConfig: {
    // 指定新增html资源配置
    extraResource:["./lib"]
  },
  rebuildConfig: {},
  makers: [new MakerSquirrel({}), new MakerZIP({}, ['darwin']), new MakerRpm({}), new MakerDeb({})],
  plugins: [
    new VitePlugin({
      // `build` can specify multiple entry builds, which can be Main process, Preload scripts, Worker process, etc.
      // If you are familiar with Vite configuration, it will look really familiar.
      build: [
        {
          // `entry` is just an alias for `build.lib.entry` in the corresponding file of `config`.
          entry: 'src/main.ts',
          config: 'vite.main.config.ts',
        },
        {
          entry: 'src/preload.ts',
          config: 'vite.preload.config.ts',
        },
        {
          entry: 'src/renderer_order.js',
          config: 'vite.preload.config.ts',
        },
      ],
      renderer: [
        {
          name: 'main_window',
          config: 'vite.renderer.config.ts',
        },
      ],
    }),
  ],
};

video.html (在项目路径下新增 lib目录中)

<!DOCTYPE html>
<html>
<head>
    <title>Video Player</title>
</head>
<body style="margin: 0; padding: 0;">
    <video src="" controls autoplay style="width: 100%; height: 100vh;"></video>
</body>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 获取 URL 查询参数
        const queryParams = new URLSearchParams(window.location.search);
        // 获取参数值
        const param1Value = queryParams.get('videoUrl');
        // 在控制台打印参数值
        console.log('videoUrl', param1Value);
        const video = document.querySelector('body > video')
        video.src = param1Value; // 设置视频文件的路径
    });
</script>
</html>

main.ts(调用代码)

// 显示视频窗口
const videvWinow =(videoUrl:string)=>{//videoUrl 为视频资源路径
  const { width, height } = screen.getPrimaryDisplay().workAreaSize
  const floatingWindow = new BrowserWindow({
    width: 800,
    height: 550,
    // alwaysOnTop: true, // 设置为总是在顶部
    // frame: false, // 去掉窗口边框
    // transparent: true, // 设置为透明
    resizable: true, // 设置为不可调整大小
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration:true,
      webSecurity: false,
      webviewTag:true
    },
  });
  // 调整窗口的位置,x,y为坐标
  // floatingWindow.setPosition(x, y)
  // 设置窗口位置
  // const mainScreen = screen.getPrimaryDisplay();
  // const { width, height } = mainScreen.workAreaSize;
  // const x = width / 2 - 400; // 窗口宽度的一半
  // const y = height / 2 - 300; // 窗口高度的一半
  floatingWindow.setPosition(0, 10);
  // 打开视频页面调试
  // floatingWindow.webContents.openDevTools();

  const queryParams = {'videoUrl': videoUrl};
  const queryStr = new url.URLSearchParams(queryParams).toString();
  let videoHTML =  '/lib/video.html'
  if(MAIN_WINDOW_VITE_DEV_SERVER_URL){
   // 测试环境路径
    videoHTML =  '/lib/video.html'
  }else{
  // 正式环境路径
    videoHTML =  '/resources/lib/video.html'
  }
  const fileUrl = url.format({
    pathname: path.join(process.cwd(), videoHTML),
    search: queryStr
  });
  floatingWindow.loadURL(fileUrl);
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值