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

宿命小人

已于 2024-05-15 11:42:10 修改

阅读量247

点赞数 4

文章标签： electron html javascript

于 2024-05-15 11:41:35 首次发布

本文链接：https://blog.csdn.net/qq_44738044/article/details/138901094

版权

需求：打开窗口 (加载本地的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);
}

宿命小人

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
electron 使用两个页面(额外添加一个html文件)

思路：因为要加载新弹出一个窗口并播放资源，可以自己加载一个外部的页面或者加载一个本地的页面，使用本地的会好些。让electron-forge在打包时额外加载一个html文件到项目中。video.html (在项目路径下新增 lib目录中)forge.config.ts （打包配置代码）main.ts（调用代码）
复制链接

扫一扫