變臉式應用

[序]

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

川劇中的變臉藝術，如行雲流水般切換臉譜，令人驚嘆。

如果把手機應用中的每個頁面看成一張臉譜，在操作時我們也希望像變臉表演一樣有著輕鬆流暢的體驗。

而用傳統的網頁技術製作的仿手機應用和原生手機應用的體驗尚有較大差距，主要原因是每個頁面都是一張網頁，在操作時有大量網頁載入和重新整理，不流暢且浪費大量流量。

對於網頁重新整理問題的解決方案是使用ajax技術製作互動式無重新整理網頁。早在2023年前後，微軟的outlook web access成為第乙個應用了ajax技術的成功的商業應用程式，2023年以後，隨著谷歌地圖、gmail等互動式網頁應用的流行，ajax技術也開始流行起來，也誕生了「單網頁應用(spa)」這個概念。

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

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

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

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

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

[任務]

用筋斗雲前端框架建立乙個h5應用專案myproject，在瀏覽器執行起來。

git clone  myproject

如果github訪問困難，也可以用這個git倉庫：設定web伺服器（如apache/nginx/iis等），新增虛擬目錄myproject, 指向myproject/server目錄，這時，就可以直接執行起前端應用：

http://localhost/myproject/

在開發環境下，建議配置web伺服器，將所有檔案都設定為不快取(輸出http頭cache-control: no-cache)，避免修改檔案後仍然顯示舊內容。

測試時建議使用chrome瀏覽器，按f12開啟開發者模式，點左上角的手機模式模擬(toggle device *******)或按ctrl-shift-m，模擬手機上的執行效果應用。

在這個示例應用中，使用者可以建立訂單、檢視訂單列表和訂單詳情，檢視個人資訊等，分別在各個邏輯頁中展現，邏輯頁跳轉切換時不會重新整理整個網頁，這就是典型的變臉式應用。

變臉式應用與後端的互動完全是是業務資料，後端不傳輸任何網頁、網頁模板或前端樣式。這裡由於還沒有連線後端，示例中使用的資料均為模擬後端介面返回的資料。

筋斗雲前端支援模擬介面返回資料，這在前端開發時非常有用。檔案mockdata.js中即是應用使用到的介面模擬，下面章節裡將會詳細介紹。

page目錄是預設的邏輯頁目錄，比如首頁、登入頁、訂單列表等邏輯頁的html和js檔案都放在這裡。

（未完待續）

變臉式應用

人臉識別應用之「變臉」

變臉讓你的aptana變得「性感」

不可思議的川劇變臉

變臉式應用

人臉識別應用之「變臉」

變臉 讓你的aptana變得「性感」

不可思議的川劇變臉

相關推薦

變臉讓你的aptana變得「性感」