心血來潮突然想用js嘗試寫桌面應用，突然發現我大js真的無所不能。在網上搜到了這麼一個東東：node-webkit。用Node.js來進行系統資源的訪問，用HTML+CSS完成頁面的搭建。哇，一切突然就好像變得特別簡單。大學上c#課時也用c#製作過一些很入門的桌面應用，嚴格來說那個叫桌面窗體程序。比起來，node-webkit創建桌面應用的方式就像是我平時用來搭積木的東西突然可以蓋樓了~厲害了，我的js。
廢話少說，我把我的helloworld過程詳細搞出來，過程中還有一些小坑，小思考。如下：
1.環境
首先，肯定要把node-webkit這個好幫手下載下來。
gihub地址：https://github.com/nwjs/nw.js/
nw官網：https://nwjs.io/
根據系統不同選擇不同的版本，我這裏下的是win64的版本，其他系統也基本大同小異。
v0.20.1: (Feb 2, 2017, based off of Node.js v7.5.0, Chromium 56.0.2924.87): release notes
NOTE You might want the SDK build. Please read the release notes.
☀Linux: 32bit / 64bit
☀Windows: 32bit / 64bit
☀Mac 10.9+: 64bit
☀Use LTS build for Win XP and early OSX.
latest live build: git tip version; build triggered from every git commit: https://dl.nwjs.io/live-build/
Previous versions
下載以後找到nw.exe。如果可以打開，那麼就是環境搭好啦~接下來，就是開發軟件啦~\(≧▽≦)/~
2.Hello World
我們爲了方便就在剛剛下載下來的nw文件夾裏創建一個文件夾，例如名字叫做product1。然後創建一個package.json。格式如下：
{ "name": "app1",//程序名字 "version": "0.1.0",//版本號 "main": "index.html",//程序入口 "window": { "toolbar": false, // 工具欄 "frame": false, // 框架 "width": 1000, "height": 650, "resizable": false//是否可調整大小 } }
（看看就好）：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" href="index.css"> 7 <script src="jquery-3.1.1.min.js"></script> 8 </head> 9 <body> 10 <div id="top"> 11 <span id="logo">CosName</span> 12 <div id="drag"></div> 13 <ul id="nav"> 14 <li id="close"><a href="#" id="close_btn"></a></li> 15 <li id="large"><a href="#" id="a" class="large_btn"></a></li> 16 <li id="mini"><a href="#" id="mini_btn"></a></li> 17 </ul> 18 </ul> 19 </div> 20 21 <div id="play_area"> 22 <video src="" width="400" height="400" controls="controls "></video> 23 </div> 24 <div id="movie_list"> 25 <ul> 26 <li><a href=""></a></li> 27 </ul> 28 </div> 29 <div id="footer"> 30 </div> 31 </body> 32 </html> 33 <script src="index.js" type="text/javascript"></script>
1 *{ 2 margin: 0; 3 padding: 0; 4 background-color: #3C3C3C; 5 color: lightgray; 6 outline: none; 7 user-select: none; 8 } 9 ul{ 10 list-style: none; 11 } 12 a{ 13 text-decoration: none; 14 } 15 #top{ 16 width: 100%; 17 height: 30px; 18 border-bottom: 1px solid #272727; 19 } 20 #logo{ 21 position: absolute; 22 left: 10px; 23 right: 0; 24 width: 80px; 25 height: 30px; 26 line-height: 30px; 27 font-weight: bold; 28 } 29 #drag{ 30 width: 91%; 31 height: 30px; 32 -webkit-app-region: drag; 33 display: inline-block; 34 } 35 #nav{ 36 position: absolute; 37 display: inline-block; 38 right: 0; 39 width: 90px; 40 height: 30px; 41 background-color: rebeccapurple; 42 } 43 #nav li{ 44 width: 30px; 45 height: 30px; 46 float: right; 47 } 48 #nav li a{ 49 display: inline-block; 50 width: 30px; 51 height: 30px; 52 z-index: 10000; 53 } 54 #close a{ 55 background: url("close.png") 0 no-repeat; 56 background-size: 20px; 57 background-position: center; 58 } 59 #large a{ 60 background: url("large.png") 0 no-repeat; 61 background-size: 20px; 62 background-position: center; 63 } 64 #mini a{ 65 background: url("mini.png") 0 no-repeat; 66 background-size: 20px; 67 background-position: center; 68 } 69 #close a:hover,#a:hover,#mini a:hover{ 70 opacity: 0.7; 71 } 72 #play_area{ 73 margin: 30px 0 0 20px; 74 width: 400px; 75 height: 400px; 76 border: 1px solid #272727; 77 box-shadow: 0 1px 2px #8E8E8E; 78 } 79 #footer{ 80 position: fixed; 81 bottom: 0; 82 width: 100%; 83 height: 32px; 84 border-top: 1px solid #272727; 85 box-shadow: 0 1px 2px #8E8E8E; 86 }
1 var gui = require('nw.gui'); 2 var win = gui.Window.get(); 3 $('#close_btn').click(function () { 4 win.close(); 5 }) 6 $("#mini_btn").click(function () { 7 win.minimize(); 8 }) 9 $("#a").click(function () { 10 if($(this).attr("id")=="a"){ 11 win.maximize(); 12 $(this).css("backgroundImage","url('restore.png')") 13 $(this).attr({id:"b"}); 14 }else{ 15 win.restore(); 16 $(this).css("backgroundImage","url('large.png')") 17 $(this).attr({id:"a"}); 18 } 19 })
當然這一步自由發揮，程序最終呈現的效果就是你的頁面在瀏覽器上的效果。
3.打包
nw應用的打包灰常簡單，只需要把上邊我們創建的所有和頁面有關的文件包括那個json，統統壓縮成zip格式的文件，然後更改後綴名爲.nw，把這個文件直接拖到nw.exe上運行，出來的就是你的程序了。
這一步裏我要說的是，如果在測試程序階段，可以直接把沒有壓縮的文件夾拖到nw.exe上運行，不需要壓縮也不要改後綴名，效果是一樣一樣的~
到了這裏雖然我們程序效果有了，但是有一個很重要的問題，假如我做好了一個桌面程序，我想要給小夥伴發過去讓他感受一下我的技藝精湛：）我總不能把他拖到我電腦前給他演示呀。這裏有兩步，首先把我們之前產出的這些文件和nw.exe進行一個合併，可以在nw根目錄shift加右鍵快速打開命令窗口，然後鍵入以下代碼：
copy /b nw.exe+myapp.nw myapp.exe（這裏的myapp就是你壓縮文件的名字，myapp.exe是你打包後產出exe程序的名字）
4.總結
Javascript搭建桌面應用的過程可謂簡單輕鬆，但是這種方式也有一個顯著的弊端。就是文件體積龐大。像我上述的那個程序全部打包好後有80多mb，可分明我都沒寫什麼啊╮(╯_╰)╭。所以目前看來娛樂娛樂差不多，要做商業產品的話，估計還得優化。