1. 程式人生 > >用HTML5打造本地桌面應用

用HTML5打造本地桌面應用

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

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

    通常我們會感覺網上有很多有趣的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" }

相關推薦

HTML5打造本地桌面應用

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

WindowBuilder編寫SWT 桌面應用程式

WindowBuilder是一款基於Eclipse平臺的雙向Java的GUI設計外掛式的軟體。它具備SWT/JFACE開發、Swing開發及GWT 開發三大功能,是一款不可多得的Java體系中的WYSIWYG工具。1 安裝WindowBuilder 可以從http://dow

HTML5開啟本地app應用的方法,如果你的手機上安裝App,就會自動打app,否則在頁面上會提示你進行下載app

html中其實是無法判斷應用是否安裝,除非在webview中通過js bridge,這裡通過一種方式達到此目的。 1、編輯AndroidManifest.xml: 主要是增加第二個,myapp用來標識schema,最好能保證手機系統唯一,那樣就可以開

HTML開發Windows桌面應用程式2

 接上次。       1.MFC,DHMTL開發 給大家演示一下,用MFC搞一個HTML應用程式。 關於如何用MFC搞DHTML,可以參見上一篇文章 貼程式碼 1.新增這個訊息對映 BEGIN_DISPATCH_MAP(CMFCApplication9Dlg, CDHtmlDialog)

通過Node-WebKithtml5開發桌面應用(安裝+打包)

1.下載Node-WebKit 2. 解壓到指定路徑 3. 在當前路徑下新建index.html,新增測試程式碼。(用它作為程式的預設頁面) <span style="font-fami

Macbook開發桌面應用,使用Alamofire鏈接.Net Core Webapi的註意事項!

結果 放棄 ads http 代碼 content ipaddress span rec ------------https方式----------------------- 因為Swift9之後訪問接口只能使用https,所以在後臺加入pfx文件(怎麽生成,自行百度吧)1

波分複OADM在本地網中的應用

城域波分和長途波分由於應用場合不同和需求不同導致在結構上也有所差別。長途波分注重超長距離傳送和減少電中繼數量,大量採用全部波長上下的背靠背的OTM方式,雖然成本較高但是同昂貴的電中繼相比運營商容易接受其價格。但是本地網內一般距離都不會很長,在200~400

HTML5從2012年誕生到現在境況如何?是否會像html一樣的顛覆桌面應用

HTML5(以後稱H5)誕生的時間正好是iOS和Android正大放異彩的時候,相對於Html4(html5以前的版本或各種IE版本的規範,以後稱H4)幾乎是桌面端的霸主,HTML5是否會是未來移動的霸主呢? H5對Html做了增強,包括audio、video、webgl、

Java進行基於瀏覽器的桌面應用程式開發(Browser-based desktop application development with java)

http://blog.terac.com/andy/e_329.html關於嵌入式網站伺服器(Embedded web server):我這幾天試用了Jetty和Tomcat。總以為Jetty很小呢,最適合做BBDA呢

html5的canvas生成圖片並儲存到本地

前端的程式碼: function drawArrow(angle) { //Init canvas var canvas = $('#cv_Arrow')[0]; var context = canvas.getContext('2d'); var width =

gnome打造自己的ubuntu桌面

一.安裝gnome開啟終端,輸入命令: sudo apt-get install gnome 下載安裝的時間有點久,不用傻呆著看, 隨便去幹點什麼過一會再回來;二.配置桌面這是原始的桌面;桌面上還有個回

heX——基於 HTML5 和 Node.JS 開發桌面應用

heX 是網易有道團隊的一個開源專案,允許你採用前端技術(HTML,CSS,JavaScript)開發桌面應用軟體的跨平臺解決方案。heX 是你開發桌面應用的一種新的選擇,意在解決傳統桌面應用開發中繁瑣的UI和互動開發工作,使其變的簡單而高效,特別適合於開發重UI,重互動

“雲”端的語雀: JavaScript 全棧打造商業級應用

作者|  不四(死馬)螞蟻金服 語雀產品技術負責人 語雀是什麼? 語雀是一個專業的雲端知識庫,面向個人和團隊,提供與眾不同的知識管理,打造輕鬆流暢的工作協同,它提供各種格式的線上文件(富文字、表格、設計稿等)編輯能力,支援實時線上多人協同編輯,資料雲端儲存不丟失。而語雀與其他文件工具最大的不同是,它

HTML5封裝成android應用APK文件的幾種方法

android作為下一代的網頁語言,HTML5擁有很多讓人期待已久的新特性。HTML5的優勢之一在於能夠實現跨平臺遊戲編碼移植,現在已經有很多公司在移動 設備上使用HTML5技術。隨著HTML5跨平臺支持的不斷增強和智能手機的迅速普,HTML5技術有著非常好的發展前景,甚至有人預言HTML5將引燃 移動平臺遊

使用windows調Linux遠程桌面

password windows display server adjust 一、安裝所需要的軟件yum install -y xrdpyum install -y vnc*chkconfig xrdp onchkconfig vncserver on二、修改配置a添加用戶:useradd

使用linux命令行界面調windows遠程桌面

linux 主機 windows display x-server原理:http://blog.chinaunix.net/uid-20672559-id-3431735.html一、windows:192.168.0.1061.安裝Xming,他是一個X-server2.調試CRT,將所有來

HTML5 格式化方式以及應用

文字 nbsp con set html5 art char spa pre <b>加粗字體 <big>定義大號字體 <em>定義著重文字 <i>定義斜體字 <small>定義小號字體 <strong&g

go語言使用go-sciter創建桌面應用(二) ui元素查找,增加,刪除,修改

.get 添加 select false 方法 count() 桌面應用 css選擇器 html 我們可以通過go-sciter給我們提供的方法,方便的對html,css編寫的UI界面進行增刪改查。 demo3.go代碼如下: package main; im

go語言使用go-sciter創建桌面應用(七) view對象常用方法,文件選擇,窗口彈出,請求

問題 adf img function jquery stdout view type 改變 view對象的詳細文檔請看: https://sciter.com/docs/content/sciter/View.htm demo9.html代碼如下: &l

Html5/CSS3做Winform,一步一步教你搭建CefSharp開發環境(附JavaScript異步調C#例子,及全部源代碼)上

轉載 界面設計 右鍵 異步 一個 由於 編寫 scrip 調用 本文為雞毛巾原創,原文地址:http://www.cnblogs.com/jimaojin/p/7077131.html,轉載請註明 CefSharp說白了就是Chromium瀏覽器的嵌入式核心,我們用此開發W