移動端web app開發備忘，webapp開發備忘

移動端web app開發備忘，webapp開發備忘

最近要做個手機html5的頁面，做些知識儲備，重要的點記錄下來以備後續。

1.devicePixelRatio:定義裝置物理象素和裝置獨立象素的比例。css中的px可以看作是裝置的獨立象素，通過devicePixelRatio，就可以知道裝置上的一個css像素代表著多少個物理像素，可以考慮devicePixelRatio+rem進行不同裝置間的適配；

2.利用Image對象實現圖片的懶載入，主要邏輯代碼如下：

var len = queue.length;var counter = 0;for(var i = 0; i < len; i++){var img = new Image();img.src = Zepto(queue[i]).data("url");img.onload = function(){counter++;if(counter >= len){Logic.onLoadComplete();}}}

通過new Image()建立Image對象，然後監聽其onload事件，當載入完成後進行載入完畢的處理。

3.Zepto.js，專為移動端web開發，更小更輕便，API和jquery類似。中文手冊地址：http://www.html-5.cn/Manual/Zepto

4.SVG vs canvas，兩種html5的瀏覽器繪圖技術。

SVG所繪製的映像都是dom元素，因此支援事件處理，canvas的每次更新需要重繪；而且svg支援動畫和濾鏡。

對於動畫的實現，canvas是不斷的重繪畫板，而svg是原生支援的。

到底什情況該選擇開發移動Web App？

移動Web也是唯一一個可供開發人員發布行動裝置 App的平台，它將各種移動互動與案頭任務有效地串連了起來。移動Web平台具有以下一些優點：容易學習，開發成本低、標準化、使用方便、易於發布。我將這些優點歸結為無處不在原則：通常開發簡單而且市場廣泛的東西往往能夠取得成功。“高品質”也是成功的關鍵因素之一，而這一點移動Web這些年還沒能做得很好。移動Web在許多方面還存在一些困難，如解決裝置的多樣性就是提升移動Web品質的一個重大挑戰。但是，移動Web遇到的困難遠沒有Native Apps遭遇的挑戰來得複雜。另外，這些挑戰將在這幾年的時間裡得到有效解決。眾所周知，我是移動Web的擁護者；然而，我也是第一個承認Native App重要性的人。開發Native App可以充分利用裝置的特性，而這一點往往是Web瀏覽器做不到的，所以對一個產品本身而言，Native App是最佳的選擇。下面幾節將討論一下Native App的一些主要功能。什麼時候應該開發一個Native App1.為應用收費沒有任何地方規定開發人員不能對一個移動Web App收取使用費，但是由於某些原因，人們常常認為不能或是不應該對一個Web App收取費用。由於曆史原因，導致行動裝置上付費服務遭遇兩大阻力：2.付款條件在行動裝置上輸入信用卡號相當麻煩，而且在許多老式裝置上也沒有安全保障。一種典型的方式是，如果你需要對你的應用收費，你可以與電訊廠商達成協議，讓電訊廠商代為為你的服務收費。這也意味著，你需要和多個電訊廠商達成合作。這通常是首選的方法，因為許多手機使用者可能根本就沒有信用卡，比如青少年。另一種方法是將使用者的信用卡資訊儲存在一個安全的網站上。使用者可以通過登入到該網站購買應用服務。這個過程不算特別理想，因為這意味著使用者不能直接通過他們的行動裝置購買服務了。3.強制分成行動電信業者是會提成的。App無論是通過電訊廠商還是通過行動裝置發布，他們都為應用提供了一套收費機制。這些電訊廠商和行動裝置將會提取部分收益，然後將剩餘的部分交給應用開發商，這也意味著，開發人員必須遵守他們的市場規則。適應電訊廠商的市場規則通常是非常困難的，需要投入大量的人力資源。相比而言，行動裝置的市場規則則簡單許多，但是也存在不少的困難。妨礙電訊廠商和行動裝置開發商利益的應用以及服務都將受到阻擾。過去，那些不靠電訊廠商和行動裝置開發商運作的網站如果收入過於顯眼的話，都逃脫不了被關閉的命運，但是最近，這樣的事情鮮少發生了。如果你想為你的Native App收費，那麼你就必須接受這個現實——你必須遵守別人的市場規則，還得放棄部分收益。開發遊戲如果你是想開發一個移動遊戲（移動遊戲是移動市場上最大的一塊），那麼你需要開發一個Native App。遊戲對資源的佔用很大，並且需要使用許多裝置API或平台API。雖然，現在有幾款完全使用Web技術開發的遊戲佔有了一定的市場份額，但是和Native App市場的佔有情況相比，還是微不足道的。遊戲使用者對應用的視覺和操作效果要求很高。移動Web雖然提供了一些模擬體驗，但還遠遠不能滿足使用者的需求。在開發移動遊戲時，你需要謹慎考慮你的應用需要支援哪些平台。幸運的是，現在有許多工具能夠協助你將你的遊戲推向多個平台，但是完成這些工作，還是需要花費大量的人力和物力。4.使用定位功能下一個功能就是定位功能，可以通過GPS或者是訊號檢測確定使用者當前的位置資訊。以前只能通過Native App的APIs查看使用者的位置資訊，但現在大多數主流行動瀏覽器上都嵌入了W3C Geolocation API。像iPhone或Android這樣安......餘下全文>>
 
web app怎開發

最近在廣州app開發公司啟匯網路官網上面看到這麼一則新聞：微軟在IOS平台上針對Office 365企業使用者推出了Outlook Web App的原生應用，將更好的企業Exchange服務推進到了IOS中。

　　這款應用有分別針對手機與平板,是微軟針對企業使用者推出的線上電子郵件服務，與一般消費者使用的Outlook.com是不同的。這次推出的OWA for iOS本地應用提供Web版本原來就支援的功能，保留了Web 版的Modern UI體驗。

同時，相對於Web版本，本地應用還有新郵件的推送提醒，連絡人同步，離線使用，語音命令，管理員遠程刪除資料等優勢。

其實，Webapp開發說白了就是一個針對Iphone、Android最佳化後的web網站，它使用的技術無非就是HTML或HTML5、CSS3、JavaScript，服務端技術JAVA、PHP、ASP。

據介紹，網頁應用中心即移動Web App市集，UC瀏覽器引入app開發人員開發這個版本，使用者可以在瀏覽器上直接調取使用。目前UC網頁應用中心的月活躍使用者數已經超過4700萬，Web App積累添加次數已超過1.8億次，收錄20大類超過1500款Web App，國內超過90%的app開發人員都會通過UC網頁應用中心推廣他們的Web App。

顯而易見，Web App開發已被各大企業重視，再從app開發公司角度看下它究竟擁有怎樣的魅力呢？

其實Web app開發效果可以和試算表，文檔編輯器一樣複雜，也可以和待做事項管理器一樣簡單。不管它是什麼，它都必須完成某些事情。

如今web已經成了網站和應用的混合。那麼，我們該怎麼區分web app和網站呢？有以下三點要素：

1.一個提供了很好的使用者體驗，讓使用者能很容易地完成任務，並利用了裝置本地的一些效能。

2.一個web應用提供了豐富的視覺體驗，又不會分散人的注意力；它注重美學，使用和本地應用一樣的設計模式，又不失易用性。

3.一個web應用非常注重使用者的互動、參與和完成任務，而不是讓他們僅僅瀏覽網頁。應用程式是自包含的（self-contained），也即使用者不用導航到其他網站或者應用來完成任務。

一個web app開發應用鼓勵使用者互動、參與並完成任務，而不是消極瀏覽，比如購買電影票、寫文檔或者與朋友分享照片、視頻。不像網站，它給使用者提供了一種主人翁的感覺，他們可以和內容或其他人進行互動。

那麼，相對於Native App，Web App開發又有哪些優勢呢？

1、app開發成本較低，只要使用web開發技術就可以輕鬆的完成web app開發

2、app升級較簡單。升級不需要通知使用者，在服務端更新檔案即可，使用者完全沒有感覺

3、和一般的web一樣，維護比較簡單，它其實就是一個網站

很多app開發公司看中web的未來發展是基於它的靈活性——既擁有在web上完成任務的一切優點，又能在離線的時候完成這些任務。支援離線應用現在已經是可以實現的了——HTML5提供了例如應用緩衝和用戶端儲存（比如，本機存放區，索引資料庫）等效能，這樣你的應用就能在沒有網路聯結的時候也可以工作了。

Tag：webapp開發，手機web app開發，html5 web app開發...餘下全文>>