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