nodejs+chromium 建立桌面應用程序

直接用nodejs+javascript+html+css也能夠建立桌面應用程序啦，前端開發的同窗應該都比較感興趣。

生成的應用程序自帶nodejs環境和chrome瀏覽器環境。

github的atom編輯器就是這麼開發的 ，demo：https://atom.io/

目前比較流行的有2個框架：

1. node-webkit 簡稱nw.js;

    https://github.com/nwjs/nw.js

 

2. electron (github開發和維護)

   https://github.com/atom/electron  

簡單介紹下基於這兩個框架怎麼開發桌面應用

一： nw.js

   1. 去官網下載nw框架：http://nwjs.io/，  下載完後解壓：

    

雙擊nw.exe直接運行，看到以下界面說明在你的機器上能夠運行：

2. 建立hello world 程序

  1) :建一個index.html

 2).建立配置文件 package.json

還有不少其餘有用的屬性能夠配置，好比指定應用的圖標，顯不顯示瀏覽器的工具欄，指定瀏覽器的初始大小等等。https://github.com/rogerwang/node-webkit/wiki/Manifest-format

3).而後將index.html和package.json這兩個文件壓縮到一個zip壓縮包裏，命名爲app.zip，擴展名改成nw,變爲 app.nw

4). 獲得的app.nw這個文件就能夠用nw.exe來執行了，直接把app.nw拖到下載的node-webkit解壓縮後的nw.exe上就能夠運行了。

5). 把app.nw文件與node-webkit的環境文件打包成一個可執行文件

    a): copy /b nw.exe+app.nw app.exe 獲得app.exe
    b): 使用Enigma Virtual Box (下載:http://enigmaprotector.com/en/downloads.html) 合併app.exe 與相關的dll文件

點擊process生成exe應用程序。

 

二： electron

1. 打造第一個 Electron 應用

a. 建立文件：

git clone https://github.com/atom/electron-quick-start
cd electron-quick-start
npm install && npm start

b.打包node+chromium環境和項目代碼

安裝 electron-packager npm install electron-packager -g

electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> --version=<Electron version> [optional flags...]

@platform - String Allowed values: linux, win32, darwin, all
@arch - String Allowed values: ia32, x64, all

c. 生成獨立的二進制文件

安裝 electron-builder

npm install electron-builder -g

electron-builder <sourcedir> --platform=<platform> --config=<configPath> --out=<outputPath>

platform: win,
osx config: path to config
file out: path to output the installer

windows下用electron生成應用程序比較麻煩 ，還須要安裝nullsoft scriptable installer,   能夠到linux下生成windows應用程序

 

使用這2個框架的優勢：

1. 跨平臺

2. 學習成本低

缺點：環境包文件體積大

 

參考文檔：

https://cnodejs.org/topic/53233277bfb7097d7a00059e

http://www.csdn.net/article/2014-01-08/2818066-Node-Webkit

https://github.com/atom/electron

https://github.com/atom/electron/blob/master/docs-translations/zh-CN/tutorial/quick-start.md   //中文入門文檔

https://www.npmjs.com/package/electron-packager

https://www.npmjs.com/package/electron-builder

http://www.liuhaihua.cn/archives/124970.html 等等