Hybird App ( 混合模式移動應用)開發初體驗

最近1，2個月一直都嘗試開發一款Hybird app，遇到了不少問題，談談本身的體會。

Hybird app (混合模式移動應用），它利用例如安卓端webview組件+HTML5內嵌的方式混合的方式開發的移動應用，
好處顯而易見，因爲內嵌的是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話，用這種方案仍是能夠考慮的。