現在使用混合開發的公司越來越多，雖然出現了一些新技術，比如Facebook的react native、阿里的weex，但依然阻擋不了一些公司採用h5的決心，當然，這也是從多方面考慮的選擇。

在三年前就使用過html5混合開發，當時做的是一款貴金屬軟體，漲跌五線譜、乾坤交易，還有各個股市的資訊，那時候還是上波牛市爆發的前夕，哎。。。

最近公司讓用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了。當然，根據需要還有一些特殊字元也需要轉義，”%”只是一個個例。

五坑：部分手機報錯不顯示

A WebView method was called on thread ‘JavaBridge’. All WebView methods must be called on the same thread。

這是由於部分手機WebView中方法必須在同一個執行緒，通過列印Thread.currentThread()便知不屬於同一個執行緒，解決方案：

mWebView.post(new Runnable() {
                @Override
                public void run() {
                    mWebView.loadUrl("javascript:" + data);
                }
            });

程式碼還未從公司專案中剝離，目前不上傳了，如有錯誤或者補充，多多指教。