慕课网electron写音乐播放器教程,代码跟随教程变动(二)

上次代码中,可以发现构建两个进程的代码几乎一样,若需要渲染的进程有很多,对于以下这个代码块会出现多次使用,如果每次都去复制粘贴显然不现实

mainWindow = new BrowserWindow({
    width: 900,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration:true//设置此项以使用nodejs
    },
    frame:false
  })

  因此使用一个封装类来进行代码复用

class AppWindow extends BrowserWindow{//自定义创建窗口的封装类,继承于BrowserWindow
  constructor(config, fileLocation){
    const basicConfig = {
      width: 900,
      height: 600,
      webPreferences: {
        preload: path.join(__dirname, 'preload.js'),
        nodeIntegration:true//设置此项以使用nodejs
      },
      frame:false
    }
    const finalConfig1 = Object.assign(basicConfig, config)//将传入的对象和原来的对象合并
    const finalConfig = { ...basicConfig, ...config}//也可以这样写(ES6语法)
    super(finalConfig)//调用父类的constructor
    this.loadFile(fileLocation)//调用当前类
    //不懂的去看super和this的区别
  }
}

  此时只需要这样调用

mainWindow = new AppWindow({}, './renderer/index.html')

const addWindow = new AppWindow({
      width:500,
      height:400,
      parent:mainWindow
    }, './renderer/ad.html')

  同时使用ready-to-show进行一个优化,在AppWindow中添加

 this.once('ready-to-show', ()=>{
      this.show()
    })

  

posted @ 2019-06-14 18:12  wtaufpziv  阅读(211)  评论(0编辑  收藏  举报