用HTML5打造本地桌面應用

jopen 8年前發布 | 12K 次閱讀 HTML5 前端技術

    HTML5讓Web開發人員用純HTML技術開發富客戶端互聯網應用或者甚至本地桌面應用成為了可能。HTML5可以將任何普通網站轉變成Web應用。HTML5 web 應用不僅具有在桌面瀏覽器應用中的優勢,同時在智能手機和平板中也是開發利器。

    在手機端,有一個非常棒的工具叫做PhoneGap,使用這個快速開發平臺,任何人都可以使用HTML5+CSS3+JavaScript開發出安卓,iOS等應用。PhoneGap的最好的一個特點是,你并不需要聯網,不需要連接web服務器,你可以從把它當成本地桌面應用。一旦下載到本地,它和本地原生應用一樣可以離線使用。

phonegap

    通常我們會感覺網上有很多有趣的HTML應用,但這些應用非要你打開瀏覽器,輸入網址。其實我們更喜歡直接點擊桌面的一個圖標就啟動一個程序的這種體驗。用HTML5+js開發的本地桌面應用就是要提高給用戶這種體驗,除了上面說的PhoneGap,還有一些像Pokki和Chrome Package Apps或Mozilla XUL Runner都是開發HTML5本地桌面應用的框架。

    Pokki和Chrome不僅可以用來開發HTML5桌面應用,而且可以把這些應用放到交易市場中出售。

    另外一個有趣的工具是Node-Webkit,本文下面內容主要討論的將是它。

    Node-Webkit是一個基于Chromium和Node.js運行平臺。它能讓你把HTML5應用打包成本地桌面應用或游戲安裝到Windows、Linux或Mac系統中。Node-Webkit項目是由英特爾開源技術中心開發,發起人是王文睿。

為什么Node-WebKit是開發HTML5本地桌面應用的最佳選擇

  1.       Node-WebKit能把你的HTML5應用打包成本地桌面應用,在Windows、Linux或Mac平臺上,你不需要其它依賴就可以獨立運行你的HTML5應用。

  2.        它支持Node.js。你可以使用Node.js的所有模塊來開發你喜歡的app或游戲。不僅你可以使用Node.js原生的模塊,而且可以使用第三方的node.js模塊。

如何使用Node-Webkit開發HTML5本地桌面應用

    這非常簡單,像傳統的開發你的HTML5應用一樣開發它們,完成之后用Node-Webkit打包它。打包的方法是

   1.  先下載Node-Webkit

   2.  然后創建一個包文件命名為package.json, 寫入下面的代碼:

{
  "name": "nw-demo",
  "main": "index.html"
}

   這里的“name”是你應用的名稱,“main”是你的應用的啟動文件,也就是應用啟動是第一加載的文件。

    3.  將你的HTML5應用文件和package.json一起打包成zip

    4. 重命名zip文件,將其后綴變成 .nw ,比如app.nw

    5.  現在你就可以用node-webkit runtime來運行你的app了在Linux上的運行命令是

./nw app.nw

在Windows平臺上你可以直接把你的app.nw拖拽到 nw.exe 程序上就行了。

    6. 想讓你的應用更容易傳播和發布,可以將它和node-webkit封裝到一起,也就是將你的HTML5應用 app.nw 和 nw.exe 合成一個可執行文件。在Linux上的做法是

cat /usr/bin/nw app.nw > app && chmod +x app

在Window上的做法是

copy /b nw.exe+app.nw app.exe




來自: http://my.oschina.net/zhouhang0907/blog/542879

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!