摘要：騰訊瀏覽服務(wù)是致力于優(yōu)化移動(dòng)端體驗(yàn)的解決方案由瀏覽器團(tuán)隊(duì)出品使用騰訊瀏覽服務(wù)內(nèi)核和騰訊瀏覽服務(wù)云端服務(wù)解決移動(dòng)端使用過程中出現(xiàn)的拖拽不流暢切換留白窗口閃爍等問題。

這是一個(gè)移動(dòng)互聯(lián)的時(shí)代，這是一個(gè)屬于Android，屬于iOS的時(shí)代，在響應(yīng)大眾創(chuàng)業(yè)萬眾創(chuàng)新的號(hào)召下，越來越多的開發(fā)者轉(zhuǎn)向了移動(dòng)開發(fā)的領(lǐng)域。在Android，iOS剛剛興起的時(shí)候，對(duì)于開發(fā)者而言，要開發(fā)一整套完整的App是一件相對(duì)困難的事情，因?yàn)榧偃缧枰С值囊苿?dòng)系統(tǒng)越多，需要學(xué)習(xí)的編程語言、開發(fā)平臺(tái)也就越多。例如你需要學(xué)習(xí)Java從而開發(fā)Android，你需要學(xué)習(xí)Object-C從而開發(fā)iOS。
這也就是所謂的原生開發(fā)模式，相信早期進(jìn)入移動(dòng)開發(fā)的程序員們對(duì)原生開發(fā)模式之痛深有感觸，雖然體驗(yàn)感性能都非常的好，但復(fù)雜的開發(fā)維護(hù)成本令不少開發(fā)者不勝其煩。H5相關(guān)技術(shù)的流行給程序員帶來了福音,因?yàn)橥ㄟ^H5制作的前端頁面具有先天的跨平臺(tái)性，這樣我們就可以在一套統(tǒng)一的界面下實(shí)現(xiàn)不同移動(dòng)系統(tǒng)的交互了，這就是現(xiàn)在流行的Web App以及Hybrid App開發(fā)模式.當(dāng)前相對(duì)于純粹的Web App而言,HybridApp 具有更強(qiáng)大的能力，2者的比較請(qǐng)見下圖:

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

1)速度快：相比系統(tǒng)WebView的網(wǎng)頁加載速度有近30%的提升

2)省流量：云端優(yōu)化技術(shù)使流量節(jié)省20%

3)更安全：24小時(shí)安全問題解決機(jī)制

4)更穩(wěn)定：經(jīng)過億級(jí)用戶的使用考驗(yàn)，crash率0.15%

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

6)適屏排版、字體設(shè)置等瀏覽增強(qiáng)功能的提供

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

7)HTML5更完整支持

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

下面我們來引導(dǎo)一下這個(gè)內(nèi)核的使用方式。

首先我們應(yīng)該先訪問鏈接描述,點(diǎn)擊導(dǎo)航欄中的"開發(fā)者后臺(tái)"功能.

利用自己的QQ賬號(hào)進(jìn)行登錄

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

填寫完畢后,就可以進(jìn)入開發(fā)者后臺(tái)了

點(diǎn)擊"添加"按鈕,新建應(yīng)用, 設(shè)置應(yīng)用相關(guān)信息,提交后將得到應(yīng)用的Appke

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

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

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

2) 對(duì)原先項(xiàng)目中所有與WebView組件相關(guān)的類庫進(jìn)行替換,更換為騰訊 WebView相關(guān)組件.替換規(guī)范為


如我項(xiàng)目代碼所示,這是更換后的結(jié)果:

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

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

5) 在Application標(biāo)簽中聲明Appkey.

大功告成, 以下是注意事項(xiàng)說明:

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

2) 在設(shè)置啟動(dòng)Javascript之前先設(shè)置js服務(wù)類,測(cè)試發(fā)現(xiàn)不是這個(gè)順序的話會(huì)找不到服務(wù)類對(duì)象
WebView.addJavascriptInterface(new ProductsInfoActivityJSService(

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

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

3) 在騰訊的WebView中,數(shù)據(jù)類型監(jiān)測(cè)更加嚴(yán)格.例如服務(wù)類中某個(gè)方法假如參數(shù)類型設(shè)置為String的話,那么js調(diào)動(dòng)這個(gè)方法的時(shí)候需要注意好類型的匹配

如:

服務(wù)類方法-參數(shù)為String:

    @JavascriptInterface
public void showProductById(String id){

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

js調(diào)用此方法-需要確保參數(shù)也為string:

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

// 調(diào)用服務(wù)類完成窗口的跳轉(zhuǎn)
}