NW.js开发桌面应用，如何自定义边框

利用NW.js开发桌面应用时，NW框架的边框可能无法满足我们对产品的要求，这个时候就需要自定义边框，比如无边框、无边框+有圆角、无边框+有边+有圆角等。现在问题来了，该怎么实现自定义效果呢？笔者以最后一种情况（无边框+有边+有圆角），进行简单的设置说明。

package.json配置

"window": {
    "frame": false,   // 去除框架的边框
    "transparent": true  // 窗口透明
  }

起步

看看效果：

自定义透明背景的NW.js应用

上图所示的完整HTML代码是：

  
  
  
  


  

    Hello World
  

可拖拽

现在，这个软件不能拖动，也没有关闭、最小化、最大化窗口功能，现在我们来给这个软件添加这些功能。

添加拖拽层

想要实现拖拽，关键是使用 -webkit-app-region: drag;CSS属性。上图中，蓝色横条上添加了这个属性，现在就能点它进行拖拽了。此外，在可拖拽的元素上双击，可以最大化窗口，再次双击则恢复窗口大小。

完整HTML代码如下：

  
  
  
  
  



  

    
拖拽我吧
    
Hello World
  

窗口控制（最小化、最大化、关闭）

我们在拖拽层的右上角添加几个按钮，然后给它们注册点击事件。需要注意，因为拖拽层上设置了-webkit-app-region: drag;CSS属性，这个属性会吃掉所有的鼠标事件，比如鼠标悬浮、点击等。为了确保图中的三个按钮可以点击，我们要在被点击的元素上设置-webkit-app-region: no-drag;CSS属性，去掉drag功能，就能点击了。

窗口控制

窗口的最大化等操作，需要用到nw的API，下面是实现代码：

  let min, max, close, win
  min = document.getElementById('min')  // 最小化按钮
  max = document.getElementById('max')  // 最大化按钮
  close = document.getElementById('close')  // 关闭按钮
  win = nw.Window.get()  // 获取当前窗口实例
  min.onclick = () => {
    win.minimize()  // 窗口最小化
  }
  max.onclick = () => {
    win.maximize()  // 窗口最大化
  }
  close.onclick = () => {
    nw.App.quit()  // 关闭软件
  }

最大化窗口，是指最大化到我们设置的窗口最大尺寸。如果我们没有在package.json中设置最大尺寸，而把主页面的html元素的宽高设置为100%, 100%， 最大化时就会撑满电脑桌面的可用区域（windows平台中会排除任务栏）。此外，还有win.enterFullscreen接口可以考虑使用，这个接口使得窗口全屏显示，windows中会覆盖掉任务栏。

窗口恢复操作

之前提到拖拽条双击可以放大、再点击可以恢复，我们希望当点击“最大化”按钮后，再次点击可以恢复窗口大小。（之前的代码只实现了最大化功能）这里需要用到win.restore接口。接下来的问题是，我们该如何确定窗口当前是最大化。
如果使用 win.enterFullscreen全屏显示，那么可以通过win.isFullscreen来判断当前窗口是否全屏。
如果使用win.maximize最大化窗口，是不会触发win.isFullscreen的改变的，但是我们可以监听到窗口实例的maximize事件，而当调用win.restore触发窗口实例的restore事件。结合这两个事件就可以判断当前窗口是否最大化。
现在把窗口控制部分的js代码补充完整，如下所示：

  let min, max, close, win
  let flag = false  // 标识当前的窗口是否最大化
  min = document.getElementById('min')
  max = document.getElementById('max')
  close = document.getElementById('close')
  win = nw.Window.get()
  min.onclick = () => {
    win.minimize()
  }
  max.onclick = () => {
    if (flag) {
      win.restore()  // 如果是最大化，则恢复窗口
    } else {
      win.maximize()  // 否则，最大化窗口
    }
  }
  close.onclick = () => {
    nw.App.quit()
  }
  // 监听窗口最大化事件
  win.on('maximize', () => {
    flag = true
  })
  // 监听窗口恢复事件
  win.on('restore', () => {
    flag = false
  })

拖拽条双击放大触发的是maximize事件，双击恢复触发的是restore事件。和我们上面实现的点击按钮的功能完全兼容，可以随意的操作窗口了。但是如果使用win.isFullscreen，它和拖拽条的双击功能并不兼容。

动态设置窗口最大尺寸

前面提到

如果我们没有在package.json中设置最大尺寸，而把主页面的html元素的宽高设置为100%, 100%， 最大化时就会撑满电脑桌面的可用区域（windows平台中会排除任务栏）。

我们可以使用win.setMaximumSize接口动态设置窗口的最大尺寸，调用的时候把最大宽和最大高的数值传递进去，比如：

let { availHeight, availWidth } = win.window.screen  // 获取电脑桌面的可用高度和可用宽度（排除任务栏）
win.setMaximumSize(availWidth, availHeight)   // 设置窗口的最大尺寸
win.maximize()  // 进行最大化操作

结束。