使用nwjs開發桌面應用之Hello,World! 使用nwjs開發桌面應用之Hello,World!
使用nwjs開發桌面應用之Hello,World!
今天發現原來JavaScript也可以用來開發桌面應用程式，頓時有一種很牛逼的感覺，於是馬上就開始了Hello,World!，感受一下JavaScript的強大。
可以用來開發桌面應用的js框架有三種：
1.NW.js
NW.js是Intel的工程師寫的一個基於node.js和chromium的應用程式執行環境。專案地址是：https://github.com/rogerwang/node-webkit
2.Electron
Electron是一款利用Web技術開發跨平臺桌面應用的框架。專案地址是:https://github.com/atom/electron
3.Hex
Hex是基於 CEF 並且融合了 Chromium 與 Node.js編寫的，好像有道詞典就是用這個寫的。但是這個框架已經三年沒更新了，所以直接棄用。。。。。。
於是我的目光就指向了NW.js，畢竟是Intel大神的傑作，具體Hello,World!的步驟如下。
一、NW.js的下載
官網地址是：http://nwjs.io/
進去之後，點選下載SDK的版本，並解壓至本地目錄即可。
二、應用編寫
1.在nw.exe目錄中建立一個helloworld的資料夾。
新建index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World!</title>
<script src="helloworld.js"></script>
</head>
<body>
</body>
</html>新建helloworld.js
document.write('Hello, World!');
新建package.json
{
//應用的入口頁面(也可以設定成js檔案)
"main": "index.html",
//應用的名稱
"name": "HelloWorld"
}
2. 執行helloworld。
a) 在nw.exe所在目錄按下shift+滑鼠右鍵，選擇"在此處開啟命令視窗"。然後輸入nw helloworld即可看到執行效果。
b) 可以直接將helloworld目錄拖拽到nw.exe上同樣也可以執行。
三、應用打包
一般windows的桌面應用都是exe可執行檔案，是不依賴於其他檔案和環境的。而我們建立的helloworld應用是依賴於nw.exe和相關檔案的，那麼如何將應用打包成一個可執行檔案呢？
經過google，果然是有解決方案的，那就是Enigma Virtual Box
1. 下載Enigma Virtual Box
地址是：http://enigmaprotector.com/en/downloads.html
選擇最後一個下載就可以了，然後安裝。
2. 將應用打包成helloworld.nw檔案。
進入到helloworld目錄中，全選三個檔案打包成zip，然後改名成helloworld.nw。
(遇到的坑，我本機安裝的壓縮工具為winRAR，所以打出來的格式一致有問題，所以導致無法成功執行，後來換成7-zip就好了。)
3. 合併helloworld.nw和nw.exe
將helloworld.nw檔案移動到和nw.exe同級目錄下，然後執行命令
copy /b nw.exe+helloworld.nw hello.exe
發現多了一個hello.exe檔案，雙擊發現是可以執行的。不過這還不是最終的結果，因為將hello.exe移動到其他資料夾之後，就不能正常執行了。
4. 使用Enigma Virtual Box打包成exe
Input File Name選擇剛才生成的hello，Output File Name就是輸出檔案。
重點來了，下面的Files需要將locales和pnacl兩個資料夾拖入，然後add選擇nw.exe目錄中所有不包含我們建立的helloworld應用的檔案
然後點選右下角的"Process"按鈕，
看到上圖結果，就說明執行成功了。
找到打包後的檔案，然後執行。
大功告成！！！遇到問題的小夥伴可以留言或者加入q群：210276235。
歡迎交流，QQ: 997494167今天發現原來JavaScript也可以用來開發桌面應用程式，頓時有一種很牛逼的感覺，於是馬上就開始了Hello,World!，感受一下JavaScript的強大。
可以用來開發桌面應用的js框架有三種：
1.NW.js
NW.js是Intel的工程師寫的一個基於node.js和chromium的應用程式執行環境。專案地址是：https://github.com/rogerwang/node-webkit
2.Electron
Electron是一款利用Web技術開發跨平臺桌面應用的框架。專案地址是:https://github.com/atom/electron
3.Hex
Hex是基於 CEF 並且融合了 Chromium 與 Node.js編寫的，好像有道詞典就是用這個寫的。但是這個框架已經三年沒更新了，所以直接棄用。。。。。。
於是我的目光就指向了NW.js，畢竟是Intel大神的傑作，具體Hello,World!的步驟如下。
一、NW.js的下載
官網地址是：http://nwjs.io/
進去之後，點選下載SDK的版本，並解壓至本地目錄即可。
二、應用編寫
1.在nw.exe目錄中建立一個helloworld的資料夾。
新建index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World!</title>
<script src="helloworld.js"></script>
</head>
<body>
</body>
</html>
新建helloworld.js
document.write('Hello, World!');
新建package.json
{
//應用的入口頁面(也可以設定成js檔案)
"main": "index.html",
//應用的名稱
"name": "HelloWorld"
}
2. 執行helloworld。
a) 在nw.exe所在目錄按下shift+滑鼠右鍵，選擇"在此處開啟命令視窗"。然後輸入nw helloworld即可看到執行效果。
b) 可以直接將helloworld目錄拖拽到nw.exe上同樣也可以執行。
三、應用打包
一般windows的桌面應用都是exe可執行檔案，是不依賴於其他檔案和環境的。而我們建立的helloworld應用是依賴於nw.exe和相關檔案的，那麼如何將應用打包成一個可執行檔案呢？
經過google，果然是有解決方案的，那就是Enigma Virtual Box
1. 下載Enigma Virtual Box
地址是：http://enigmaprotector.com/en/downloads.html
選擇最後一個下載就可以了，然後安裝。
2. 將應用打包成helloworld.nw檔案。
進入到helloworld目錄中，全選三個檔案打包成zip，然後改名成helloworld.nw。
(遇到的坑，我本機安裝的壓縮工具為winRAR，所以打出來的格式一致有問題，所以導致無法成功執行，後來換成7-zip就好了。)
3. 合併helloworld.nw和nw.exe
將helloworld.nw檔案移動到和nw.exe同級目錄下，然後執行命令
copy /b nw.exe+helloworld.nw hello.exe
發現多了一個hello.exe檔案，雙擊發現是可以執行的。不過這還不是最終的結果，因為將hello.exe移動到其他資料夾之後，就不能正常執行了。
4. 使用Enigma Virtual Box打包成exe
Input File Name選擇剛才生成的hello，Output File Name就是輸出檔案。
重點來了，下面的Files需要將locales和pnacl兩個資料夾拖入，然後add選擇nw.exe目錄中所有不包含我們建立的helloworld應用的檔案
然後點選右下角的"Process"按鈕，
看到上圖結果，就說明執行成功了。
找到打包後的檔案，然後執行。
大功告成！！！遇到問題的小夥伴可以留言或者加入q群：210276235。