H5混合開發

h5混合開發,一些頁面和功能有h5分擔,最初時候放在本地assets文件夾下,後來由於前端同事頻繁修改和更新,再加上數據安全方面考慮,決定把包放在服務器,採用接口返回字段,判斷是否需要下載更新,接下來就談下開發中遇到的幾個坑,給自己做個筆記,也分享給需要的朋友。

一坑:Android系統

對於h5的混合開發,Android系統就是個大坑,三年前接入h5點時候,那時候好多手機卡的跟ppt似的,4.0後Google進行了一些優化,效率上確實好了很多,但後面又來了一系列巨坑,比如4.3之前一個內核,4.3一個單獨內核,4.3之後又是一個內核,原生的WebView沒法做到整體兼容,最後採取了一個方案,使用大企鵝的x5內核,優點如下:

  1. 裏面類名和方法名,和原生的名稱幾乎是一樣的,使用更方便
  2. QQ和微信都是採用x5內核,內核共享,不需要單獨下載
  3. 兼容性相對較好

二坑:DownloadManager。

最初的方案是採用系統下類DownloadManager,既然是系統提供的,很多碼友肯定覺得很OK的,但是爆破部隊瞎搞,三星的手機系統卻把DownloadManager的api刪了,這尼瑪就噁心了,你還是繼續玩爆炸吧。。。

三坑:webview載入不顯示

之前放在assets的時候,頁面顯示的很6,換成下載到本地讀取,居然不顯示了,打印下路徑,沒問題,那就可以確定問題出在了加載過程了,查了下資料發現,可以是用loadData,這種方法需要先將html文件讀取出來,以字符串傳入loadData,可以展示頁面,但是不會引用css、js等文件。也可以使用loadUrl,不過需要注意,這裏因爲是使用本地數據,所以傳入的url需要做些處理,例如:

  1. 如果html文件存於assets:則加前綴:file:///android_asset/
  2. 如果html文件存於sdcard:則加前綴:content://com.android.htmlfileprovider/sdcard/

PS:content前綴可能導致異常,直接使用file:///sdcard/ 或者 file:/sdcard也可以

四坑:特殊字符的轉義

有一個頁面,iOS同事那邊一直顯示正常,Android這邊怎麼都出不來,同樣頁面不同數據的頁面就顯示頁面,當時就覺得很奇怪,不應該是h5點問題,要不iOS也不會顯示,打印了URL一看,擦,URL中有一個”%”,轉義後便OK了。當然,根據需要還有一些特殊字符也需要轉義,”%”只是一個個例。

發佈了53 篇原創文章 · 獲贊 8 · 訪問量 7萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章