NW開發的正確姿式

NW（node-webkit） 是一個用 HTML5/CSS/Javascript 這些 Web 技術來寫跨平臺應用程序的開源框架，可讓咱們寫一份代碼，同時跑在 Windows、Linux 和 Mac 上，是國人主導的在國際上也頗有影響力的開源軟件。

前端同窗看到這個概念，天然而然的就先去試試，並且大多就是把原來寫的web應用，直接用NW打包，就生成了一個應用。並且有一些公司也就是這麼用的。由於今年上半年剛作了一個基於NW的客戶端應用。這裏借用《NW.js Essentials》這本書的一個概念叫作 NATIVE UI來講下（作過移動端的同窗對於這個詞可能比較熟悉）。

NW的Native UI提供了哪些東西呢？

上面表格就是Native UI對應的API，對應的Native UI有App，window，Screen,menu,dialogs,tray,clipboard,shell.熟悉桌面系統的人都知道這些基本上是桌面系統最多見到的界面元素。若是對這些概念不熟悉，能夠去NW官網去深刻學習下。

要成爲一個好的NW的應用，就須要作好web和Native的融合。須要讓Native能夠去接管web，完成native相關的處理。默認咱們的web網頁在瀏覽器打開就會有一個窗口，並且這個窗口默認是顯示出來的。其實從這裏，咱們就可讓native介入，控制一些窗口行爲。

var myApp = {};

myApp.mainWindow = myApp.gui.Window.get();

myApp.name = myApp.gui.App.manifest.name;

經過mainWindow能夠控制NW應用窗口是否顯示在桌面上,以便於處理應用啓動過程當中的一些處理，處理完後才顯示可見窗口。

myApp.mainWindow.show();

能夠爲mainWindow增長事件

myApp.mainWindow.on('close', function () {}）

myApp.mainWindow.on('open', function () {}）

建立的menubar，menu，context menu都是添加到窗口上的，因此接管窗口很是重要。

除了接管窗口myApp.gui.Window.open('option.html')還能夠單獨再開一個nw的window.

window是NW裏的重要部件，所以先關的API，event也最豐富。

部分API

Window.title: This sets or gets the window title at runtime

Window.cookies.*: This lets you set or get window cookies

Window.menu: This associates a menu to the window (we're going to deal with it later in this chapter)

Window.reload(): This reloads the window

Window.reloadIgnoringCache(): This reloads the window, thus cleaning the cache

Window.setAlwaysOnTop(): This sets the window at the top of all the other applications' windows

Window.isTransparent and Window.setTransparent(transparent): These APIs allows you to set the background of the window as transparent (for example, Adobe Photoshop splash screen)

Window.showDevTools([id | iframe, headless]),Window. closeDevTools() and Window.isDevToolsOpen(): These let you open, close, or check for the visibility of DevTools at runtime

Window.capturePage(callback [, image_format | config_object ]): This takes a screenshot of the window

Window.eval(frame, script): This evaluates a given script in the provided frame

Window.zoomLevel: This sets or gets the window zoom level (it might be useful when dealing with 4k displays)

部分Event

capturepagedone: This is fired when Window.capturePage() succeeds; a buffer argument is passed

devtools-opened and devtools-closed: This is emitted when DevTools is opened or closed

zoom : This is fired when the window is zoomed; a parameter with the zoom level is passed

loading and loaded: This is relatively emitted when the window starts to reload and when the window is fully loaded (an alternative to window.load that doesn't rely on the DOM)

document-start: This is fired when the document object is available, but before any other DOM object is constructed or any script is run, a frame attribute will be passed if we are dealing with an iframe

document-end This is fired when the document object is fully loaded; before the onload event is emitted, a frame attribute will be passed if we are dealing with an iframe