關于在android webview上運作html5的開發經驗

一、問題描述：

在項目開發中（軟硬體結合項目），為了實作xp、android、linux三個平台的統一，選擇html5作為終端開發語言。html5作為一種網頁語言，其運作需要借助浏覽器，那麼不可避免的問題就是:

1、選擇什麼浏覽器來承載跨平台的界面顯示？

2、前端設計選擇何種架構？（本人負責前端開發）

3、前後端的通信選擇何種方式？

4、如何解決首次進入界面時的閃爍問題？

二、浏覽器的選擇：

起初總覺得可以找到一種免費開源的浏覽器，但最後發現，能夠支援xp android linux三大平台且具備無邊框全屏效果的浏覽器機會沒有（至少我沒找到，也許找源碼編譯chrome可以實作）。不得已改變了政策，

利用平台自身的特點為html5添加一個殼！比如：android 有webview,xp和linux都可以采用QT的webview,而且兩者都是基于webkit的，這點很滿意，這意味着兩者的差别很小，一份代碼三個平台都可以運作。

三、前端設計架構

在這之前主要從事androidk開發很少接觸web開發，以至于連強大的angularjs和jquery都不知曉。通過向朋友請教，推薦使用angularjs作為單界面應用程式的開發，用jquery解決了國際化問題。當然開發過程中遇到N多的問題，

采取各種手段、途徑總算解決了大部分，

當然看書是少不了的,這兩本書《AngularJS權威教程(中文版)》、《JavaScript設計模式與開發實踐》帶我入了門。

四、通信

搞過html5的同僚直接告訴我，通信直接調用 webSocket接口，琢磨一天後發現真的很好用。

五、閃爍的問題

這個問題應該是開發過程是遇到的最無解的問題。現象是：任何界面第一次通路時需要從服務端通路資源，這個過程會導緻資源的加載有快慢之分,主要是圖檔和自定義的控件，給使用者的感覺很不舒服，如同平時我們

網速慢的時候打開網頁一樣。解決的思路是：在應用開啟時可将所有的圖檔預加載至angularjs緩存或者浏覽器緩存。搜尋一個星期後找到的方法大概可分為以下兩種（圖檔的預加載）：

1、通過new Img()并為其設定 src屬性實作圖檔的預加載，實際是加載到浏覽器緩存

2、使用$http.get();将圖檔預加載至angularjs的預設緩存

這兩種方法都嘗試過，在win10上用chrome作為浏覽器，利用mongoose開啟web服務，驗證發現兩種方法都能很好的起到圖檔預加載的效果。于是本人很高興的将其放到android上測試，結果一點作用沒有，懷疑是浏覽器的問題，

于是在android上裝chrome在跑html5，緩存是有效的。結論很明顯：android webview沒有去緩存圖檔。那怎麼辦呢？查webview的相關知識發現，android webview有一堆的設定，按照網上提供的設定，一個個試，

結果不管我怎麼設定，緩存就是不起作用，此刻已經接近奔潰了！

在查找問題的時候一直有一個現象讓我很迷惑：angularjs會将通路過的資源自動緩存在自帶的緩存中，也就是通路過的界面再次通路時瞬間全部顯示。受到這個啟發：何不在啟動時将全部圖檔都通路一次呢？

接着：我在程式初始化界面加了如下代碼

</li>

</ul>

array是所有css樣式的數組，item.value是對應的class名稱，同時将button的width:0%;height:0%，如此一來即使加載了圖檔也不會顯示出來，結果總算緩存了，當我第一次通路每個界面時，此時的圖檔已經準備好了，閃爍效果得到大大的改善。

雖然這個方法很笨但是，解決了實際問題。

希望我的開發經驗能夠給你一點點的幫助，也希望有相關經驗的大神們不吝賜教！

繼續閱讀