序 - 用H5技術開發手機應用

本書將以實戰練習和示例分析為主，給讀者展現用H5技術製作手機應用的開發體驗。

當需要製作一款手機應用，希望它既可以在手機瀏覽器或微信公眾號之類的輕應用平臺使用，也可以在安卓、蘋果等手機上安裝使用，由於各平臺技術棧完全不同，光前端就需要至少三套人馬在各平臺各自為戰，開發和維護成本極高。現在你多了一種用H5技術製作全平臺手機應用的選擇，不僅極大的降低開發成本，而且由於H5技術源於已經用了至少20多年的網頁技術，門檻也遠低於才興起幾年的手機平臺開發技術。架構師在選型時會糾結，又想優雅的做全平臺應用，又擔心用網頁技術製作的手機應用的體驗到底行不行。

川劇中的變臉藝術，如行雲流水般切換臉譜，令人驚歎。 如果把手機應用中的每個頁面看成一張臉譜，在操作時我們也希望像變臉表演一樣有著輕鬆流暢的體驗。 而用傳統的網頁技術製作的仿手機應用和原生手機應用的體驗尚有較大差距，主要原因是每個頁面都是一張網頁，在操作時有大量網頁載入和重新整理，不流暢且浪費大量流量。

對於網頁重新整理問題的解決方案是使用Ajax技術製作互動式無重新整理網頁。早在1998年前後，微軟的Outlook Web Access成為第一個應用了Ajax技術的成功的商業應用程式，2005年以後，隨著谷歌地圖、Gmail等互動式網頁應用的流行，Ajax技術也開始流行起來，也誕生了“單網頁應用(SPA)”這個概念。

在手機應用領域，由於早期手機效能弱，做應用程式基本只能使用原生開發語言，學習門檻很高。隨著手機效能的增強和H5技術的流行，已經可以把“單網頁應用”技術應用到手機上，讓整個應用就是一個網頁，而原本一張張相互連結的網頁變成了H5應用中的一個個可流暢切換的邏輯頁面，消除了網頁載入，操作體驗接近手機原生應用。

這種支援多邏輯頁面的具有流暢的操作體驗的H5單網頁應用，我們將它稱為變臉式應用。

對手機單網頁應用有以下常見誤解：

• 只能做做小工具，不適合做大型商業應用。這是因為沒有使用好的模組化開發模型，去找個支援大型開發的好框架先。
• 耗記憶體，耗流量，效能低下。某些單頁應用簡單地將所有邏輯頁一次性全部載入，沒有邏輯頁優化，也沒有做好快取、圖片等優化，而招此罵名。解決方法是找個支援動態載入邏輯頁、支援H5應用優化的開發框架。
• 沒法做搜尋引擎優化(SEO)。以前做網頁的同時要兼顧做SEO，現在其實可以將做網頁應用和做SEO分離了，對SEO可以單獨設計，從而做的更好。這就像使用者訪問一個站點，如果是手機訪問就跳轉手機版，如果是電腦訪問就跳轉電腦版，而如果是爬蟲機器人訪問，也可以備好一套狗糧，不再和人吃的一樣。

筋斗雲前端框架（jdcloud-m）是一個變臉式單網頁應用的開源開發框架，它以頁面路由和介面呼叫為核心，提供多邏輯頁支援和遠端介面呼叫封裝，同時對製作安卓、蘋果原生應用也提供良好的支援，因而也是一個全平臺H5應用框架。

本書就以該開發框架為基礎，講解手機應用開發中常見需求的解決方案。