軟件藝術思考者  
          混沌,彷徨,立志,蓄勢...
          公告
          日歷
          <2017年2月>
          2930311234
          567891011
          12131415161718
          19202122232425
          2627281234
          567891011

          導航

          隨筆分類(86)

          隨筆檔案(85)

          搜索

          •  

          最新評論

          閱讀排行榜

          評論排行榜

           
          NW.js入門

          NW.js能做什么?

          NW.js是基于Node.js的。它允許您直接從瀏覽器調用Node.js代碼和模塊,并在您的應用程序中使用Web技術。此外,您可以輕松地將Web應用程序打包到本機應用程序。

          獲取NW.js

          您可以從官方網站http://nwjs.io獲取最新的二進制文件。或者你也可以建立NW.js按照中的說明二進制文件自行建設NW.js

          提示:

          建議您選擇SDK構建風格來開發您的應用程序,這使您能夠使用DevTools調試您的應用程序。有關構建版本之間的差異,請參閱構建版本。

          編寫NW.js應用程序


          示例1 - Hello World

          這個基本示例演示如何編寫一個NW.js應用程序。

          步驟1.創建package.json

          {    “name”  “helloworld”    “main”  “index.html”  } 

          package.json是您的應用程序中的清單文件。它是以JSON格式編寫的。該main字段顯示了"index.html"在本示例中由NW.js打開的第一頁(如果引用了HTML文件)。該name字段是在NW.js應用程序中使用的唯一名稱。有關詳細信息,請參見清單格式

          使用JS文件作為主

          你可以把JS文件設置為"main"字段,如"main.js"。然后,JS文件將在開始時加載到后臺頁面,默認情況下不打開任何窗口。通常你可以做一些初始化,然后手動打開窗口。例如,

          // initialize your app  // and ...  nw 窗口open 'index.html'  {}, function win  {}); 

          步驟2.創建index.html

          <!DOCTYPE html>  < html >    < head >      < title > Hello World!</ title >    </ head >    < body >      < h1 > Hello World!</ h1 >    </ body >  </ html > 

          這是正常的HTML文件。您可以使用最新瀏覽器支持的任何Web技術。

          步驟3.運行應用程序

          cd / path / to / your / app / path / to / nw。 

          /path/to/nw是NW.js的二進制文件。在Windows上,它的nw.exe; 在Linux上,它的nw; 在Mac,它的nwjs.app/Contents/MacOS/nwjs

          在Windows上拖放

          在Windows上,您可以拖動folder containing package.jsonnw.exe以運行應用程序。

          示例2 - 使用NW.js API

          所有NW.js API都在nw對象中全局加載,可以直接在JavaScript文件中使用。有關支持的API的完整列表,請參閱API參考

          此示例顯示如何在NW.js應用程序中創建本機上下文菜單。您可以index.html使用以下內容創建:

          <!DOCTYPE html>  < html >  < head >    < title >上下文菜單</ title >  </ head >  < body  style = “width:100%; height:100%>  < p > “右鍵單擊”顯示上下文菜單。</ p >  < script >  //創建一個空的上下文菜單 var  menu  =  new  nw Menu ();  //添加一些項目與標簽 菜單追加 NW 菜單項({    標簽 “項目A”    單擊 函數(){      警報'你點擊了“項目A” );    }  }));  菜單追加 NW 菜單項({  標簽 '項目B'  }));  菜單追加 NW 菜單項({  類型 “分隔符”  }));  菜單追加 NW 菜單項({  標簽 '項目C'  }));  // Hooks“contextmenu”事件 文檔身體的addEventListener '文本菜單'  函數EV  {    //防止顯示默認的上下文菜單   EV 的preventDefault ();    //彈出的地方,你點擊本機上下文菜單中   的菜單彈出EV 點¯x  EV ÿ );    return  false ;  }, false );  </ script >    </ body >  </ html > 

          ...然后運行您的應用程序:

          cd / path / to / your / app / path / to / nw。 

          require('nw.gui')

          require('nw.gui')還支持使用傳統的加載NW.js API的方式。它返回相同的nw對象。

          例3 - 使用Node.js API

          你可以直接從DOM調用node.js和模塊。所以它使用nw.js編寫應用程序的無限可能。

          此示例顯示如何使用osNode.js的模塊查詢操作系統平臺。只需創建index.html具有以下內容的文件,并使用NW.js運行它。

          <!DOCTYPE HTML>  < HTML >  < >    < 標題>我的操作系統平臺</ 標題>  </ >  < 身體>  < 腳本>  //使用Node.js的獲取系統平臺的 變種 OS  =  要求“OS” );  文檔“您正在運行的'  操作系統平臺());  </ script >  </ body >  </ html > 

          您還可以使用由npmNW.js.安裝的模塊。

          本地節點模塊

          在運行時構建的Native Node模塊npm install與NW.js ABI不兼容。要使用它們,你必須用源代碼重建它nw-gyp。有關詳細信息,請參閱使用本機節點模塊

          下一步是什么

          請參閱使用DevTools調試以調試NW.js應用程序。

          請參閱打包和分發,以便在生產中打包和重新分發應用程序。

          有關可能遇到的問題,請參閱常見問題解答

          如果您要從NW.js 0.12或舊版本遷移應用程序,請參閱遷移說明

          獲得幫助

          NW.js wiki上有很多有用的信息。維基也是對所有人開放的,你鼓勵你在wiki上發布你的知識。

          您也可以在Google群組的郵件清單或Gitter上的即時通訊中提出問題

          請報告錯誤或提交要求在GitHub使NW.js更強大。

          posted on 2017-02-23 11:26 智者無疆 閱讀(193) 評論(0)  編輯  收藏

          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
           
          Copyright © 智者無疆 Powered by: 博客園 模板提供:滬江博客


             觀音菩薩贊

          主站蜘蛛池模板: 稻城县| 巴马| 安西县| 邯郸县| 名山县| 靖江市| 崇左市| 德阳市| 上高县| 青岛市| 西峡县| 姜堰市| 习水县| 安陆市| 塔河县| 岚皋县| 马关县| 营口市| 南江县| 兴城市| 巨鹿县| 晋宁县| 墨玉县| 宁德市| 长宁县| 静海县| 同江市| 郁南县| 元朗区| 铁岭县| 江源县| 郑州市| 石首市| 锦屏县| 工布江达县| 桐乡市| 乌拉特后旗| 蓝山县| 成武县| 峨边| 萨嘎县|