node-webkit学习之【无边框窗口用JS实现拖动改变大小等】

效果如下图

原生的如下图（原生的用在自己的app上面太丑了，并且还带边框，所以重写了左上角的三个功能键）

1.首先了解一下nw底下的package.json 文件

{
  "name": "nw-quick-start-demo", //（字符串）包的名字，必须为独一无二的，可由字母，数字，下划线组成，不能有空格。（
  "version": "0.0.1",
  "main": "app/test/dist/index.html",//字符串）当node-webkit打开时的默认页面。
  "single-instance":false,
  "node.js": true, //（布尔型）nodejs是否node-webkit中启用。
  "window": { //控制窗口的样子
    "icon": "app/images/logo.png", //（字符串）图标的路径。
    "toolbar": true, //（布尔值）是否显示工具栏。
    "title": "zm", //（字符串）默认打开的窗口的名字。
    "resizable":true, //（字符串）只可能是这么几个值null center mouse。null指无定位，center指在显示器中间，mouse指在鼠标的位置。
    "show_in_taskbar":true,    //（布尔值）是否在任务栏上显示。
    "position": "center",
    "frame": false, //（布尔值）是否显示窗口框架。
    "width": 430, //定义窗口的宽高
    "height": 350,
    "resizable":false //（布尔值）窗口是否可调整大小。
  },
  "webkit": { //控制webkit特性是否启用
    "plugin": true
  },
  "dependencies": {
    "vue-router": "^2.3.0"
  }
}

　2.无窗口模式下实现可以拖拽　

如果frame 为false的话。程序将无边框显示。无边框显示则无法执行拖拽等功能。

可以设置以下代码让窗口可以拖拽

 body
    {
        -webkit-user-select:none;
        -webkit-app-region:drag;
    }

　但是统一在body加上这个样式的话可以拖拽了，但是所有点击等事件都会失去焦点了。

解决方法：就是在头部header元素加上可以拖拽样式。但是header里面的按钮等带有事件的元素加上样式【-webkit-app-region:no-drag;】让带有事件的元素可以点击。

3.无窗口模式下实现窗口最大化最小化关闭等 窗口功能键

html代码写好样式（项目中使用vue和ES6 所以事件的调用方法是用vue的）

<div id="toolBtns"  class="noDrag" @click="focusWindow()"> //功能键上必须加上不可以拖拽样式，不然点击没有反应
    <a href="javascript:;" class="noDrag"  @click="miniWindow()"><i id="minisizeBtn"></i></a>
    <a href="javascript:;" class="noDrag mr-10 ml-10" @click="resizeWindow()"><i id="resizeBtn"></i> </a>
    <a href="javascript:;" class="noDrag"  @click="closeWindow()"><i id="closeBtn"></i> </a>

</div>

　　js实现

//node-webkit带有丰富的api，可以直接调用api来调整窗口
var gui = require('nw.gui');  //要访问api 首先需要先加载“nw.gui”模块
var win = gui.Window.get(); //需要将其功能添加到窗口 用get(),通过win.则可获取窗口对象
var flag=1;
console.log(gui);
win.on('resize', function () {  //resize对象在窗体大小被重置时触发的事件。把标志放在resize中改变大小，
                            //目的是为了不让拖拽让窗口变大变小后影响  最大化最小化功能键的功能
     if(flag==1) {
            flag=0;
        }else {
            flag=1;
        }
})
//功能键点击事件
miniWindow() {   //实现窗口的最小化
    win.minimize();
},
closeWindow() { //实现窗口的关闭
    win.close();
},
resizeWindow() {  //实现窗口的最大化最小化，通过全局的flag来控制不受拖拽影响
    if(flag==1) {
        //win.enterFullscreen();
        win.maximize(); //窗口最大化事件。
    }else {
        win.restore(); //恢复窗口到上一状态。
    }
},

　　注意：如果功能键事件没有写在启动文件里面时，加载“nw.gui”模块 依旧需要写在启动文件里面，不然获取不到！

附上nw.js的中文学习文档 https://wizardforcel.gitbooks.io/nwjs-doc/content/wiki/index.html共勉。