使用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。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM