01/移動應用中HTML5的新特性

　　工欲善其事，必先利其器。我比較推崇的學習技術的方式，是先整體瞭解，然後結合實際需求，再做針對性的學習。整體瞭解的方式，比較建議是直接看官網的API文件，這裡可以推薦幾個網站： http://www.w3school.com.cn/html5/index.asp, https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5, http://www.html5rocks.com， http://caniuse.com/

　　其中，特別說明下http://caniuse.com/，通過這個網站，我們可以非常快速的查詢到你所想使用的html5的特性在各個瀏覽器，包括不同終端的瀏覽器的相容性情況。

　　HTML5 在移動應用開發上面能夠利用的特性主要有：

　　1. form input type

　　表單是我們在開發中經常會遇到的，如果按照傳統的方式，要介入jquery validate或者自己寫正則進行判斷，但是其實html5的form表單新增的input type屬性，能夠快速幫我們實現所需要的功能。

　　2. video & audio

　　移動瀏覽器是不支援flash的，在一些微信專題活動中，經常會看到嵌入音訊，那麼audio標籤就是比較適合的應用場景，html5中audio提供的api attr還是比較全面的。

　　視訊格式一般有mp4和webm兩種格式，在使用的時候，一般建議同時生成兩種，根據瀏覽器相容性，進行相應的選擇。音訊audio，一般會同時製作mp3 ogg格式。

　　3. storage

　　關於web storage，大家可以參考我之前分享的一篇內容：

　　http://www.chaichunyan.com/topics/html5-training/5.html5_storage/#/

　　重點是localstorage，尤其是我們在做移動應用的效能優化時，localstorage能夠發揮很大的作用。

　　學習的時候，建議大家帶著問題去學習，比方說“localstorage最大的儲存容量是多少？”“有沒有有效期？”“cookie是有域的概念的，那麼localstorage呢？”

　　4. css3

　　html5其實更多的是一個web標準，這個標準裡邊，包含了html、Java api、css。css3是我們在移動應用中要重點學習和掌握的。

　　1.選擇器

　　2.自定義字型

　　3.多欄佈局

　　4.文字,容器陰影

　　5.圓角

　　6.漸變效果

　　7.動畫 ...

　　大家可以通過下面一個例子有一個直觀的印象：

　　http://www.chaichunyan.com/topics/html5-training/7.css3_summary/demos/index.html

　　之前很多我們需要通過js或者切圖實現的效果，在移動端，就可以直接通過css3實現。

　　這裡特別強調下關於佈局，css3彈性佈局，希望大家能夠仔細去了解，我在面試時候，必問的一道題，當然，面試只是手段，更重要的是希望能夠學以致用，真正在實際工作中發揮作用。

　　flexbox佈局的相容性，彈性盒模型實現的原理，這些我們在做移動終端除錯時候，如果只是靠反覆試錯，那麼效率是非常低的。

　　瞭解了html5的特性，開發者就會在移動應用上一展身手了。

　　02/HTML5移動應用中踩過的那些坑

　　1.佈局

　　移動瀏覽器訪問的web站點，後面稱為mobile webapp哈（泛指移動終端瀏覽器訪問的web站點），能不能使用傳統的流式佈局？答案是可以，但是要慎用。

　　mobile webapp對css3的彈性佈局支援還是比較給力的，iOS Safari還好，但是Android的碎片化非常嚴重，尤其是Android上面各種第三方瀏覽器會做各種各樣的定製化，使用flexbox比float能夠減少你在佈局除錯上的時間，而且相容性有保證。

　　2.圖片適配

　　這裡邊要提供一個概念，是螢幕解析度和物理解析度，為什麼我們使用ios看到的圖片清晰度那麼高，原因是普通的手機螢幕，一點顯示一個畫素，但是iphone4s 以後是一個點四個畫素。

　　那按照320的設計稿切出來的圖片，在iphone上面顯示肯定是有鋸齒的。

　　處理方法可以參見我之前分享的一篇文章：圖片的適配與清晰度

　　http://blog.csdn.net/spring21st/article/details/7513906

　　3.字型

　　我把字型的處理分為兩類，一種是藝術字體、icon，另一種是我們在頁面中的字型。

　　移動終端對網路的要求是比較高的，我們要儘可能減少網路請求，圖片是非常大的網路開銷，當然，我們可以用合併圖片的方式減少請求數，但是請求量變大了。

　　css3支援web fonts，所以，我們可以引入字型檔案，而不是所有的字型都是通過切圖的方式來實現。對於icon，一種方式是處理，但是現在更常見的做法，是轉換成向量字型。

　　這裡推薦一個網站：font awesome http://fortawesome.github.io/Font-Awesome/icon/css3/

　　這裡邊涵蓋了大部分我們會用到的圖示，當然，公司有精力和人力的情況下，建議可以維護自己的向量字型庫。

　　4.橫豎屏

　　我們可以通過css 的media query 判斷橫豎屏。

　　但是這種只能控制樣式展現，當我們需要監聽橫豎屏變化的時候，就只能通過js監聽window.onorientationchange事件的方式實現。

　　但是，下面這種情況會讓你很無語：

　　那我們推薦下面這種實現方案：

　　相比較pc web，mobile webapp的除錯更復雜，而且未知的問題更多，遇到問題，我們要有耐心去跟蹤定位，就像之前我們遇到iscroll效能問題、fast-click穿透的問題，都是一點一點排查處理的。

　　03/混合應用（Hybrid）的注意事項

　　現在“快速迭代，敏捷開發，低成本上線“基本上是每家公司都追求的目標，混合應用就是在這種場景下應運而生。

　　Hybrid App優點眾多，Web前端工程師0成本介入，不依賴版本的實時更新，快速實現跨平臺需求，等等。但是，我對混合的看法是，根據實際情況合理使用，因地制宜。

　　那麼什麼樣的場景適合混合應用開發？

　　1. 快速原型，驗證產品功能。我們之前開發過一個app，Android和iOS提供宿主環境，webview展現內容都是通過html5實現的，半個月就開發上線了，較之傳統應用開發人員成本和時間成本都縮短很多。

　　2. 內容類的應用，比如csdn的app，就是採用hbuilder混合方案實現的，對效能要求沒有那麼高。

　　在考慮hybird的時候，要避免以下幾個誤區：

　　（1）為了HTML 5而Hybrid App

　　html5只是技術實現手段而已，要根據公司的實際業務場景，以及人員配比，綜合考慮，不能因為react native比較火，就必須要在公司推行這種實現方案，我覺得為技術而技術是不可取的。

　　（2）忽略移動應用中的關鍵因素

　　mobile webapp本質上還是基於PC的一種開發模式，開發者使用PC瀏覽器模擬App中的webview進行除錯。PC瀏覽器與手機webview的區別是巨大的，包括能支配的CPU資源，最大佔有的記憶體，執行的網路環境，click和touch事件的區別，瀏覽器對CSS/JS的解析和對事件處理等等。

　　app工程師考慮比較多的記憶體的問題，這些在web開發時候是很少考慮的。另外，就是網路環境方面，雖然現在3g、4g覆蓋率越來越高，但是移動終端的訪問和pc還是有很大差距，wifi和蜂窩網路的切換，基站變化等諸多因素都會導致網路間歇性斷開，web開發對於這種不穩定網路環境問題的處理上都有所欠缺。

　　（3）互動體驗一致性

　　ios和Android的互動設計是兩套規範，雖然有相似的地方，但是從操作習慣上，就已經決定了，我們想用一套互動設計，適配兩個平臺是很難的，包括包括視覺風格，介面切換，操作習慣等。

　　Hybrid App方案是一把雙刃劍，一方面它平衡了Native App和Web頁面的優缺點，一定程度上解決了Native App開發過程中迭代慢，版本依賴，Native開發資源不足的問題，但另一個方面過度依賴Hybrid方案會造成Web前端開發成本快速上升，甚至造成App整體體驗下降，甚至造成功能缺失。

　　回到最開始那句話”不要為了Hybrid而Hybrid“，根據實際場景，控制好方案中native和web的邊界。

　　04/ Q&A

　　Q1：關於響應式開發中對於手機螢幕高度的解決有沒有什麼好的解決方案？

　　響應式開發本質上是移動設計優先的一種開發方式，我沒太明白對於手機螢幕高度的解決，具體的問題是什麼樣的，原則上高度是不需要做處理的，除非是你對首屏有要求。關於響應式開發，可以看看我這篇文章http://www.chaichunyan.com/index.php/2016/03/03/html5-wrd/

　　Q2:對首屏有要求的情況, 除了判斷高度還有沒有其他好的解決方案?如果是flex佈局可以解決這個問題嗎？

　　問題的根本是獲取首屏的高度，（1）如果你是後端渲染的話，可以獲取機型和瀏覽器版本，拿到螢幕解析度做適配 （2）根據螢幕寬度做適配，但是做不到完全絕對的首屏自適應，如果有更好的方案，我再跟大家分享。

　　Q3:hybrid開發中，h5頁面太多的話，會不會影響ios釋出？

　　之前有ios對phonegap這種跨平臺的應用稽核是不通過，不過現在放開這個限制了。h5頁面過多，會影響應用的效能和體驗，建議可以把h5打包放到ipk裡邊，但是要做好靜態資源的版本管理。

　　Q4：css3 彈性佈局中， 由於android碎片化嚴重的問題， 能不能有好的案例指導？ 我們要求支援到android4以上版本。

　　真的要善用文件和工具, http://caniuse.com/#search=flex, 我分享時候提到的這個網站，明確說明了flex相容性。

　　如果是Android4.4以上機型，基本上可以放心使用，注意的地方有兩個：1. 要記得寫各個瀏覽器的css字首 2. flex裡邊可以巢狀flex.

　　Q5：hybird開發過程中， 原生程式碼登入許可權問題，h5部分的頁面，如何共享登入相關資訊？

　　這要看你實現的方案，（1）巢狀靜態的h5頁面，那麼需要native開啟webview的時候，使用js briage呼叫頁面js的方法，寫入使用者資訊，實現登入共享 （2）如果開啟的是動態渲染的頁面（如php輸出的頁面），那麼可以在請求的url中攜帶使用者token，php通過query string判斷驗證，這個是native和webview資料互動的問題。

　　Q6：h5動畫在部分安卓webview中有時候會出現卡頓,這種情況改怎麼優化呢?

　　1. 可以做簡單的測試，看看瀏覽器支援的情況，如果瀏覽器支援不夠好，那麼可能要做降級處理。

　　2. 減少動畫效果，因為動畫是要使用gpu渲染的，原生app能夠流暢，很大程度上是直接呼叫硬體處理的。

　　優化的方案我這邊基本上是降級處理，Android低版本不支援的話，就使用基本動畫，比方不會使用3D翻轉。因為h5畢竟受限於webview環境，像jquery 和 zepto都提供對機型和瀏覽器的判斷。

　　Q7：在移動端瀏覽器上能支援h5離線儲存的效能嗎？

　　No problem.我們在實際專案中，優化前端效能，曾經用localstorage做靜態資源的版本管理和儲存。