直接用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 等等