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 共勉。