phonegap3.0+HTMLl5 開發 ipad app 總結

忙碌了一段時間，終於完成了手上的這個ipad上的app ,app是用phonegap+ jquery mobile 開發的，不是用原生的objective c開發的。由於app有許多chart的渲染,若是使用javascript難度會小不少,不過phonegap的缺點也是顯而易見---性能很差,尤爲是當須要調用native api的時候.

下面就對我在完成app過程當中的一些總結：

1.local storage本地存儲容量不超過5M, 若是須要本地數據庫應考慮數據量。若是數據庫較多，須要使用native的sqlite數據庫，xcode5.0工程裏面能夠直接新建sqlite3.0數據庫。因爲是基於phongap的開發,須要添加SQLitePlugin，在github上能夠找到已經寫好的插件。

2.每一個頁面會包括面3個函數windows.load,document.ready(),deviceReady() 3個事件的執行順序, 若是須要從數據庫讀取數據，須要注意放在deivceReady()事件以後.

3.訪問外部的service,須要在phonegap 配置文件,添加whitelist.不須要藉助ajax +jsonp的方式來實現跨域。

4.jquery mobile中的navbar最多隻能有5列，若是導航菜單多於5列,會自動換成2行

5.jquery mobile頁面之間的跳轉有白屏，嘗試了晚上提到的不少方案，效果都不明顯。最後不得不頁面跳轉的過程當中加上gif動畫，以掩飾白屏的問題。

6.頁面的優化，儘可能減小資源文件的引用，css文件放在頭部，js文件放在尾部，並儘可能壓縮。

7.如何頁面內容較多，而又必須在一個頁面顯示完成，就不得不使用滾輪了，這時候另一個Js插件iscroll-4就比較好用了。

8.分享一個很好用的js滾輪插件mobiscroll(部分收費)，相似於ios原生的pickervier控件同樣，更多demo能夠參考官網

8.分享一個slider插件(egorkhmelev-jslider )，以下圖中的顯示效果,我花了很多時間才作到以下圖的效果.

 

9.最後就是chart,用了幾套開源的js插件，效果都不滿意，最後使用了收費的FusionCharts