基於HTML+CSS+Javascript開發窗口應用
最近接了一個私人外包項目,用到了HTML技術開發傳統的桌面應用程序,一開始也不太會,因為沒有相關的開發經驗,但經過一番學習后,頗有感慨,原來還可以利用HTML+CSS+JavaScript等技術來方便快速的開發界面漂亮的Windows桌面應用程序。通過這個項目,感覺自己也學到了不少新知識,遂寫點東西記錄一下自己在開發過程中的一些心得感悟。
以前開發桌面應用程序我一般都喜歡選擇MFC+Visual C++或者C#等語言來編寫應用,但是感覺極為不方便。一是,寫出來的窗口界面都不太好看;二是,代碼量比較大;三是,軟件跨平台特性也不好。近些年HTML技術快速發展,利用HTML5+CSS3可以快速的開發漂亮的各種網頁,同時也出現了一些利用此類技術來快速開發桌面應用的技術和工具。
這里,介紹一種非常好用的工具 ——nw.js(http://nwjs.io),nw.js實際上 是node.js和webkit的結合體,webkit提供DOM操作,node.js提供本地化操作,且將二者的context完全整合,可在HTML代碼中直接使用node.js的API,功能十分強大。
有了這個工具,利用HTML等技術來開發桌面應用變得易如反掌(當然,需要開發者熟悉HTML、CSS3、JavaScript等網頁開發技術)。開發過程幾乎完全就和普通網頁開發過程一模一樣了。
第一步,下載nw.js,並解壓,解壓后內容如下:
第二步,這一步完全就是網頁開發,將各個頁面的HTML文件寫好(這里以我這次的應用為例)。
第三步,頁面開發完成后,在頁面所在目錄添加一個配置文件package.json,后面在用nw.js打包應用的時候,會用到此文件,該文件里主要配置一些應用程序及窗口的參數。具體可參考配置
main參數用來指定窗口啟動時顯示的頁面,這里我指定我index.html。可以根據需要自行設定。
第四步,將所有網頁以及網頁所在目錄下的其他文件和文件夾同一打包成壓縮文件test.zip,並復制到剛才解壓的nw.js文件夾下。此時,打開windows cmd,進入到nw.js所在文件夾,執行copy /b nw.exe+test.zip setup.exe
(test.zip為剛才的壓縮文件,setup.exe是最后我們要生成的可執行文件)。命令執行完成后,將看到文件夾下生成了一個setup.exe,這就是我們的應用,雙擊便可啟動。
軟件啟動界面
菜單展開頁面
至此,基本就算完成了。生成了setup.exe后,原來的test.zip以及nw.exe文件都可以刪掉了,程序運行時已經不再需要這些東西。這里演示的是使用nw.js將網頁打包成windows應用程序,當然也可以下載mac版的nw.js,將網頁打包成mac版的。
可以看到,用nw.js工具將網頁打包成桌面應用過程十分簡單,只需要掌握基本的網頁開發技術,就能開發界面非常漂亮的各種窗口應用程序。