【Electron+React】实现网络视频边下边播，以及离线播

框架基础架构

在使用Electron框架来实现桌面版网络播放器之前，我们首先需要构建Electron应用的基础框架。使用electron官方脚手架可以大量节省搭建时间。当然如果项目复杂，需要在渲染进程使用web框架的。也可以在里面找到已经集成了vue,react的相关脚手架。react方面有比较热门的electron-react-boilerplate和dva官方的dva-boilerplate-electron。我参照的是这个项目的文件结构，并做些调整。

WX20201015-172444.png

其实大部分的开发其实与主进程的通讯并不多。那我们只需修改一下配置就可以像web开发一样在浏览器完成渲染进程的页面开发。
用浏览器开发可以使用chrome扩展(Redux DevTools)

 {
    target: 'web',
  }

为安全考虑以及使用web的target编译，我们隔离上下文，使用preload来注入通讯方法。

const mainWindow = new BrowserWindow({
  webPreferences: {
     nodeIntegration: false，
     contextIsolation: true,
     preload: path.join(__dirname, 'preload.js'),
    }
})
// dev
mainWindow.loadURL('http://localhost/')
// prod
mainWindow.loadURL(
      url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true,
      }),
    );

/*preload.js*/
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electron', {
  sendToMain: (name, data) => ipcRenderer.send(name, data),
  handleFromMain: (name, fn) => {
    ipcRenderer.on(name, function (event, ...args) {
      fn(...args);
    });
  },
});

通过打包编译过程中的环境变量配置注入，以及Html中的变量注入，来实现生产环境以及开发环境的切换。

WX20201015-172250.png

具体webpack配置可参考开源脚手架，有配置问题可以留言讨论。