移動Web開發調研

背景

在移動互聯網浪潮下，移動設備普及，對配置須要考慮移動端設備可訪問性。Web做爲最貼近用戶的配置手段，面向從PC端傳統頁面，向移動端頁面的轉型。

 

概念

PC Web： 面向傳統PC電腦的瀏覽器開發的Web人機交互界面。

移動Web：面向移動設備的瀏覽器開發的Web人機交互界面。移動設備包括：手機、Pad等移動設備。

移動APP：面向移動設備開發的APP軟件，直接運行於移動設備的系統上。不一樣於移動Web，其不須要藉助中間軟件運行。

Web APP: 以瀏覽器爲入口，實現 App 的 Web 化，當瀏覽器能良好的發揮HTML5的技術特性，將會帶來應用體驗新的變革。和移動Web屬於一個概念。

http://www.geekpark.net/topics/157633

咱們有必要了解移動Web和移動APP各自的特色，才能弄清移動Web的定位。

移動APP

優勢：

一、 移動APP具備更好的用戶體驗和交互操做。

二、 能夠充分發揮設備硬件操做系統的特性。

缺點：

一、 開發週期長，維護成本高，調試困難。

二、 平臺間移植困難，存在版本兼容性風險。

移動Web

優勢：

 一、 開發效率高，成本低。

 二、 跨平臺，一次開發，處處運行。

 三、 無需安裝和更新。

 缺點：

 一、 沒法發揮本地硬件和操做系統的特性。

 二、 難以實現複雜的用戶界面效果。

從對比中能夠發現，移動Web不能發揮設備硬件的功能，其適合傳統的Web站點創建移動Web版本。

 技術調研

HTML5

HTML5 是 HTML 標準的最新演進版本。 這個術語表明了兩個不一樣的概念：

它是一個新的 HTML 語言版本包含了新的元素，屬性和行爲，同時包含了一系列能夠被用來讓 Web 站點和應用更加多樣化，功能更強大的技術。 這套技術每每被稱做 HTML5 和它的朋友們，一般簡稱爲 HTML5。

 

功能分爲如下大類：

• 語義：可以讓你更恰當地描述你的內容是什麼。
• 連通性：可以讓你和服務器之間經過創新的新技術方法進行通訊。
• 離線 & 存儲：可以讓網頁在客戶端本地存儲數據以及更高效地離線運行。
• 多媒體：使 video 和 audio 成爲了在全部 Web 中的一等公民。
• 2D/3D 繪圖 & 效果：提供了一個更加分化範圍的呈現選擇。
• 性能 & 集成：提供了很是顯著的性能優化和更有效的計算機硬件使用。
• 設備訪問 Device Access：可以處理各類輸入和輸出設備。
• 樣式設計: 讓做者們來創做更加複雜的主題吧！

每一個類中詳細功能見下面URL，與CPE Web相關的功能包括（語義、繪圖、樣式設計）。

https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5

HTML5名聲如今很大，可是實際上就是增長了一些新的功能和特性。 可是架不住廣告鋪天蓋地，別人總跟你提，可是真正懂了人不是不少，這樣HTML5淪爲了一個營銷手段。即便咱們的設備只能用到不多一部分，可是若是用了，別人就會以爲很高大上。

 

移動設備的大量使用，HTML5規範和Webkit內核的推進，使得HTML5和移動Web開發綁定在一塊兒，HTML5確實能提升移動端的體驗（例如音視頻、定位、Canvas）， 可是實際上HTML5對象不區分PC和移動端。

 

目前主流的PC和移動端瀏覽器對HTML5功能有不一樣程度的支持。

PC上幾款主流瀏覽器跑分：

http://html5test.com/

 

 

移動瀏覽器支持狀況，能夠訪問下面網站查詢：

http://mobilehtml5.org/

 

響應式設計

響應式Web設計這種方案：一個網站可以兼容多種移動設備屏幕尺寸，而不是爲每種屏幕尺寸作一個特定的版本。這個概念能夠說是爲移動互聯網而生的。

http://www.cnblogs.com/powertoolsteam/archive/2012/06/01/2529886.html

 

優勢：

一、 由於無需爲不一樣的設備維護不一樣的網站，這種方式節省了時間和金錢。

二、 響應式設計無需考慮用戶代理的檢測。

 缺點：

一、 要考慮更多的分辨率，交互和場景，對設計師和PM的能力要求更高，頁面考慮東西更多，設計時間也會變得更長。

二、 由於內容必須在客戶端使用Javascript進行調整，因此要求變化的內容要儘量的最少。UI發揮空間更小。

 

適用場景：

那些以文檔爲中心的網站，他們在不一樣的設備上的主要用途都不會改變，好比一個產品頁面，對於這種網站響應式的設計就很是的適合。

 

不適用場景：

由於UI發揮空間小等因素，這種響應式設計不適合界面元素和交互等更加複雜的網頁，好比淘寶。

 

參考：

https://developer.mozilla.org/zh-CN/docs/Web_Development/Mobile/Responsive_design

http://www.rbt.cn/html/xiangyingshi/37235.html

 

移動Web框架

移動Web開發，涉及的基本概念，能夠穩步積累。 若是要作移動Web，下面介紹了一些網絡推薦的開源框架，能夠快速搭建移動Web界面。

 1、 jQuery Mobile

jQuery發佈的針對手機和平板設備、通過觸控優化的Web框架。它基於jQuery，在不一樣移動設備平臺上可提供統一的用戶界面。該框架基於漸近加強技術，並利用HTML5和CSS3特性。

 二、 Sencha Touch

它是一款HTML5移動應用框架。經過它能夠建立Web應用，在外觀和感受上與Apple iOS 和Google Android本地應用十分相像。它利用HTML5發佈音頻/視頻，進行本地存儲；利用CSS3提供圓角、背景漸變、陰影等普遍使用的樣式。

 三、 Ionic

  Ionic提供了一個免費且開源的移動優化HTML，CSS和JS組件庫，來構建高交互性應用。基於Sass構建和AngularJS 優化。

 Ionic既是一個CSS框架也是一個Javascript UI庫。許多組件須要Javascript才能產生神奇的效果，儘管一般組件不須要編碼，經過框架擴展能夠很容易地使用，好比咱們的AngularIonic擴展。

 四、 Amaze UI

 Amaze UI 採用業內先進的 Mobile first 理念，從小屏逐步擴展到大屏，最終實現全部屏幕適配，適應移動互聯潮流。Amaze UI 含近 20 個 CSS 組件、10 個 JS 組件，更有 17 款包含近 60 個主題的 Web 組件，可快速構建界面出色、體驗優秀的跨屏頁面，大幅度提高你的開發效率。Amaze UI 很是注重性能，基於輕量的 Zepto.js 開發，並使用 CSS3 來作動畫交互，平滑、高效，更適合移動設備，讓你的 Web 應用能夠高速載入。

 五、 Weex

2016年4月21日，阿里巴巴在Qcon大會上宣佈開源跨平臺移動開發工具Weex，Weex可以完美兼顧性能與動態性，讓移動開發者經過簡捷的前端語法寫出Native級別的性能體驗，並支持iOS、安卓、YunOS及Web等多端部署。

 對於移動開發者來講，Weex主要解決了頻繁發版和多端研發兩大痛點，同時解決了前端語言性能差和顯示效果受限的問題。開發者可經過Weex官網申請內測。（http://alibaba.github.io/weex/）

 開發者只須要在本身的APP中嵌入Weex的SDK，就能夠經過撰寫HTML/CSS/JavaScript來開發Native級別的Weex界面。Weex界面的生成碼其實就是一段很小的JS，能夠像發佈網頁同樣輕鬆部署在服務端，而後在APP中請求執行。

 與 現有的開源跨平臺移動開放項目如Facebook的React Native和微軟的Cordova相比，Weex更加輕量，體積小巧。由於基於web conponent標準，使得開發更加簡潔標準，方便上手。Native組件和API均可以橫向擴展，方便根據業務靈活定製。Weex渲染層具有優異的性 能表現，可以跨平臺實現一致的佈局效果和實現。對於前端開發來講，Weex可以實現組件化開發、自動化數據綁定，並擁抱Web標準。

 

http://www.cnblogs.com/onetwo/p/5724919.html

http://www.envicloud.cn/pages/news/216.html

http://www.oschina.net/p/weex