文/玄魂
幾個月前，要開發一個簡易的展示應用，要求支持離線播放（桌面應用）和在線播放（web應用）。
當時第一想到的是flex，同一套代碼（或者只需少量的更改）就可以同時運行在桌面和瀏覽器上。由於很多展現效果要全新開發，我想到了impress.js(https://github.com/bartaz/impress.js/)。如果選擇impress.js，就意味着要將html5作為桌面應用，當時想到要封裝webkit，但是本人對這方面也不是很熟悉，時間也很有限，就又沿着這個方向搜索，找到了node-webkit(https://github.com/rogerwang/node-webkit)。
node-webkit解決了我通過html和js來編寫桌面應用的難題。
至於node-webkit的定義，按照作者的說法：
“ 基於node.js和chromium的應用程序實時運行環境，可運行通過HTML(5)、CSS(3)、Javascript來編寫的本地應用程序。node.js和webkit的結合體，webkit提供DOM操作，node.js提供本地化操作；且將二者的context完全整合，可在HTML代碼中直接使用node.js的API。”
Frameless window，是沒有操作系統默認樣式的邊框的窗口，也就意味着最大、最小和關閉按鈕也訪問不到，同時默認情況下窗口不能被拖拽。
在node webkit學習(2)基本結構和配置(http://www.xuanhun521.com/Blog/2014/4/10/node-webkit%E5%AD%A6%E4%B9%A02%E5%9F%BA%E6%9C%AC%E7%BB%93%E6%9E%84%E5%92%8C%E9%85%8D%E7%BD%AE)一文中，介紹frame屬性時，給出了一個簡單示例，本篇文章以該示例為基礎進行擴展。
Frameless window的使用場景，通常是我們需要自定義標題欄，窗口邊框樣式和按鈕的時候。
首先創建示例程序文件，framelessDemo.html和package.json。
framelessDemo.html代碼如下：
<html>
<head>
<title>frame less windowdemo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body >
<h1>frameless window 測試</h1>
<script>
var gui = require('nw.gui');
</script>
</body>
</html>
package.json內容如下：
{
"name": "framelessWindow-demo",
"main": "framelessDemo.html",
"nodejs":true,
"window": {
"title": " framelessWindow-demo ",
"toolbar": true,
"width": 800,
"height": 600,
"resizable":true,
"show_in_taskbar":true,
"frame":false,
"kiosk":false
},
"webkit":{
"plugin":true
}
}
運行程序，效果如下：
此時窗口無邊框，無標題欄，不能拖拽。
5.2 如何啟用無邊框窗口
鄙視不標明出處的轉載，更多相關內容，歡迎訪問玄魂的博客（www.xuanhun521.com）
注意package.json中window的配置，將字段frame設置為false即可。
{
"window": {
"frame": false
}
}
5.3 窗口拖拽
默認情況下，無框窗口是不可拖拽的，可以通過給body添加“-webkit-app-region: drag”樣式，來啟用拖拽。
如果在body上設置了拖拽，需要在button上去除拖拽，否則按鈕無法點擊，添加如下樣式：
如果你僅僅使用自定義titlebar組件，也需要設置在titlebar中的按鈕no-drag。
5.4 窗口操作
鄙視不標明出處的轉載，更多相關內容，歡迎訪問玄魂的博客（www.xuanhun521.com）
在無框窗口中，我們仍然需要使用戶能夠進行最大、最小，關閉窗口等操作。
首先我們可以使用javascript中的window對象來關閉窗口。
因為node-webkit有window對象，使用window api是我們的首選，詳見：node-webkit學習(4)Native UI API 之window（http://www.xuanhun521.com/Blog/2014/4/14/node-webkit%E5%AD%A6%E4%B9%A04native-ui-api-%E4%B9%8Bwindow）
5.5 推薦demo
demo地址：https://github.com/zcbenz/nw-sample-apps/tree/master/frameless-window。
這個示例演示了使用frameless window時，如何自定義實現所有標准窗口的功能。
本文內容主要參考node-webkit的官方英文文檔（https://github.com/rogerwang/node-webkit/wiki/Frameless-window）。
下一篇文章，介紹menu。
鄙視不標明出處的轉載，更多相關內容，歡迎訪問玄魂的博客（www.xuanhun521.com）
更多相關內容，歡迎訪問玄魂的博客(更多node-webkit相關內容 http://www.xuanhun521.com/Blog/Tag/node-webkit)
ps：nw.js，electron交流群 313717550