摘要：騰訊瀏覽服務是致力于優化移動端體驗的解決方案由瀏覽器團隊出品使用騰訊瀏覽服務內核和騰訊瀏覽服務云端服務解決移動端使用過程中出現的拖拽不流暢切換留白窗口閃爍等問題。

這是一個移動互聯的時代，這是一個屬于Android，屬于iOS的時代，在響應大眾創業萬眾創新的號召下，越來越多的開發者轉向了移動開發的領域。在Android，iOS剛剛興起的時候，對于開發者而言，要開發一整套完整的App是一件相對困難的事情，因為假如需要支持的移動系統越多，需要學習的編程語言、開發平臺也就越多。例如你需要學習Java從而開發Android，你需要學習Object-C從而開發iOS。
這也就是所謂的原生開發模式，相信早期進入移動開發的程序員們對原生開發模式之痛深有感觸，雖然體驗感性能都非常的好，但復雜的開發維護成本令不少開發者不勝其煩。H5相關技術的流行給程序員帶來了福音,因為通過H5制作的前端頁面具有先天的跨平臺性，這樣我們就可以在一套統一的界面下實現不同移動系統的交互了，這就是現在流行的Web App以及Hybrid App開發模式.當前相對于純粹的Web App而言,HybridApp 具有更強大的能力，2者的比較請見下圖:

從圖中可見，Hybrid App相對WebApp最主要的能力就在于可以通過一些中間件調用到手機底層的物理設備,例如傳感器,攝像頭等等,增強與用戶的交互性。而WebApp只是一個純粹的html界面,更主要是做數據的呈現而已。但不管是Hybrid App還是WebApp,在手機設備上面運行的時候都是借助WebView組件來對h5界面進行渲染展示的，所以可以這樣說，WebView的能力直接決定了Hybrid / WebApp的前端交互能力。相信很多直接使用默認WebView組件呈現h5的開發者都有一種直觀的感覺,就算h5頁面中圖片與文本信息并不多,但在WebView中展示的時候都會出現拖拽不流暢，切換留白,窗口閃爍等的現象，這就是WebView自身渲染能力不強的問題所致。今天這編文章不打算細致分析WebView內核的實現,而是引導讀者如何使用騰訊的X5內核去替代系統內置的WebView，解決手機系統默認WebView能力不足的狀況。
騰訊X5瀏覽服務是致力于優化移動端WebView體驗的解決方案,由QQ瀏覽器團隊出品,使用騰訊X5瀏覽服務內核SDK和騰訊X5瀏覽服務云端服務,解決移動端WebView使用過程中出現的拖拽不流暢,切換留白,窗口閃爍等問題。經過筆者測試, 性能提升比較明顯, 對采用WebApp與HybridApp開發模式的程序員來說是一個非常值得推薦的選擇，它的具體優點有:

1)速度快：相比系統WebView的網頁加載速度有近30%的提升

2)省流量：云端優化技術使流量節省20%

3)更安全：24小時安全問題解決機制

4)更穩定：經過億級用戶的使用考驗，crash率0.15%

5)集成強大的視頻播放器，支持各種視頻格式直接打開

6)適屏排版、字體設置等瀏覽增強功能的提供

(注意,Appcan原先的h5界面假如直接在X5內核中展示,默認情況下會影響原先的排版布局的,需要借助viewport進行重新排版.在注意事項中有說明)

7)HTML5更完整支持

8)無系統碎片化問題、更少的兼容性問題

下面我們來引導一下這個內核的使用方式。

首先我們應該先訪問鏈接描述,點擊導航欄中的"開發者后臺"功能.

利用自己的QQ賬號進行登錄

登錄完畢后,填寫信息登記

填寫完畢后,就可以進入開發者后臺了

點擊"添加"按鈕,新建應用, 設置應用相關信息,提交后將得到應用的Appke

訪問http://x5.tencent.com/doc?id=1004,這是接入指南,建議程序員多看,但想吐槽一下,即便是一線服務商了,但百度也好,騰訊也好在開發文檔完善性方面還是要有待加強,否則程序員就要耗費更多的時間精力進行摸索.

下載Android SDK以及接口示例,過程不表

點擊"接入文檔",按要求操作:
1) 復制sdk jar到工程的libs目錄下

2) 對原先項目中所有與WebView組件相關的類庫進行替換,更換為騰訊 WebView相關組件.替換規范為


如我項目代碼所示,這是更換后的結果:

3) 替換layout布局文件中的WebView,改為騰訊的WebView. 如我項目代碼所示,這是更換后的結果:

4) 聲明權限,下面是涉及到的所有權限

5) 在Application標簽中聲明Appkey.

大功告成, 以下是注意事項說明:

1) 假如我們自己開發的頁面是基于Appcan的,需要把viewport修改為下面的形式,否則樣式會變小
      

2) 在設置啟動Javascript之前先設置js服務類,測試發現不是這個順序的話會找不到服務類對象
WebView.addJavascriptInterface(new ProductsInfoActivityJSService(

this), "Javahelper"); // 這在前

WebView.getSettings().setJavaScriptEnabled(true);  // js啟動在后

3) 在騰訊的WebView中,數據類型監測更加嚴格.例如服務類中某個方法假如參數類型設置為String的話,那么js調動這個方法的時候需要注意好類型的匹配

如:

服務類方法-參數為String:

    @JavascriptInterface
public void showProductById(String id){

Intent i = new Intent(context, ProductInfoActivity.class);
i.putExtra("pid", id);
context.startActivity(i);
}

js調用此方法-需要確保參數也為string:

  function loadProductByCID(cid){
cid = cid.toString();
    Javahelper.showProducts(cid); 

// 調用服務類完成窗口的跳轉
}