Hybird App ( 混合模式行動裝置 App)開發初體驗

標籤：style   blog   http   ar   使用   sp   strong   檔案   資料   

最近1，2個月一直都嘗試開發一款Hybird app，遇到了很多問題，談談自己的體會。

Hybird app (混合模式行動裝置 App），它利用例如安卓端webview組件+HTML5內嵌的方式混合的方式開發的行動裝置 App，
好處顯而易見，由於內嵌的是Html5, 所以跨平台，擴充性，開發成本都是很不錯的優勢。

Hybird App擁有很多從開發工具到打包發布的解決方案，比較出名的是來自Adobe的phonegap, 國內有AppCan,這2種解決方案都有比較好的工具平台。這次我採用的的是Appcan, 需要注意的是Appcan的開發工具只有windows平台的，另外不得不吐槽的是，方案裡面整合的js外掛程式指令碼，bug很多。

我採用的技術架構，

 

其中利用Appcan作為應用的打包平台，通過其內建的JS組件進行資料請求，請求得到的資料利用JS做些商務邏輯處理後，使用AngularJS進行綁定渲染，UI組件的東西則用的GMU.js,而gmu內建了zepto.js和scroll.js等等, 頁面則是h5+css3。可以看到的是與傳統的web相比，其中多了不少js架構和庫的應用，畢竟把資料的調用和業務處理都移到了JS端，所以在這裡提醒大家，可以考慮加入js模組管理的架構，例如seajs。資料繫結這塊感覺Angular真的很棒，寫好綁定後，只需要專註後端JS資料的業務處理即可，提升了不少開發效率。

在編碼階段遇到了不少問題，例如並不能利用url像平時那樣進行參數傳遞，發現抓取不到頁面跳轉後的參數。為了減少請求次數，也嘗試採用LocalStorage緩衝json。通過Manifest cache 緩衝html,css,js檔案，來提升介面的響應速度。通過css3替代js做動畫效果，但是效果並不理想，感覺還是沒有js來的流暢。頁面跳轉白屏，資料載入的延遲等等狀況，載入動畫體驗需要做的更好，而且盡量減少頁面的跳轉，把一些功能集中到單個html檔案。

總而言之，採取了很多最佳化方法，但是顯然這種hybird app在效能體驗等方面還是問題很多，但是例如一些互動簡單的app話，用這種方案還是可以考慮的。

Hybird App ( 混合模式行動裝置 App)開發初體驗