[序]

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

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

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

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

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

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

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

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

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

運行變臉式應用

[任務]

用筋斗云前端框架創建一個H5應用項目myPRoject，在瀏覽器運行起來。

先從github上下載開源的筋斗云前端框架及示例應用：https://github.com/skyshore2001/jdcloud-m

建議安裝git工具直接下載，便于以后更新，例如直接創建H5應用項目叫myproject：

如果github訪問困難，也可以用這個git倉庫： http://dacatec.com/git/jdcloud-m.git

下載后，假定myproject是我們的項目目錄。其中，子目錄server是H5應用目錄，開發主要集中在這里。tool是用于優化和發布的工具，之后在站點上線優化時介紹。

設置WEB服務器（如Apache/nginx/IIS等），添加虛擬目錄myproject, 指向myproject/server目錄，這時，就可以直接運行起前端應用：

在開發環境下，建議配置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代碼，可同時制作安卓應用、蘋果應用、微信微站等。

（未完待續）