今天發現原來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。