[序]
本書將以實戰練習和示例分析爲主，給讀者展現用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應用框架。
本書就以該開發框架爲基礎，講解手機應用開發中常見需求的解決方案。
運行變臉式應用
[任務]
用筋斗雲前端框架創建一個H5應用項目myproject，在瀏覽器運行起來。
先從github上下載開源的筋斗雲前端框架及示例應用：https://github.com/skyshore2001/jdcloud-m
建議安裝git工具直接下載，便於以後更新，例如直接創建H5應用項目叫myproject：
git clone https://github.com/skyshore2001/jdcloud-m.git myproject
如果github訪問困難，也可以用這個git倉庫： http://dacatec.com/git/jdcloud-m.git
下載後，假定myproject是我們的項目目錄。其中，子目錄server是H5應用目錄，開發主要集中在這裏。tool是用於優化和發佈的工具，之後在站點上線優化時介紹。
設置WEB服務器（如Apache/nginx/IIS等），添加虛擬目錄myproject, 指向myproject/server目錄，這時，就可以直接運行起前端應用：
http://localhost/myproject/
在開發環境下，建議配置WEB服務器，將所有文件都設置爲不緩存(輸出HTTP頭Cache-Control: no-cache)，避免修改文件後仍然顯示舊內容。
測試時建議使用chrome瀏覽器，按F12打開開發者模式，點左上角的手機模式模擬(toggle device toolbar)或按Ctrl-Shift-M，模擬手機上的運行效果應用。
在這個示例應用中，用戶可以創建訂單、查看訂單列表和訂單詳情，查看個人信息等，分別在各個邏輯頁中展現，邏輯頁跳轉切換時不會刷新整個網頁，這就是典型的變臉式應用。
變臉式應用與後端的交互完全是是業務數據，後端不傳輸任何網頁、網頁模板或前端樣式。這裏由於還沒有連接後端，示例中使用的數據均爲模擬後端接口返回的數據。
筋斗雲前端支持模擬接口返回數據，這在前端開發時非常有用。文件mockdata.js中即是應用使用到的接口模擬，下面章節裏將會詳細介紹。
在server目錄下，lib目錄下的js/css文件都屬於框架使用的文件，不宜隨意修改，其中app_fw.js是筋斗雲前端框架的核心部分。
page目錄是默認的邏輯頁目錄，比如首頁、登錄頁、訂單列表等邏輯頁的html和js文件都放在這裏。
cordova目錄是用於製作原生手機app時使用的。筋斗雲框架支持全平臺應用，即一套H5代碼，可同時製作安卓應用、蘋果應用、微信微站等。
（未完待續）