本文意在了解掌握并快速集成騰訊X5系統(tǒng)內(nèi)核,更好的提高Android與H5在應(yīng)用上的渲染交互效果;X5web內(nèi)核下該如何有效的管理cookie;X5webview下的ndk基本配置說明;X5webview常見問題等等。
Android-X5WebView封裝(含Cookie管理、進(jìn)度監(jiān)聽、適配8.1系統(tǒng)等策略)詳情請點(diǎn)擊!
文章使用到的官方資料:
1:什么是騰訊X5Web?
移動(dòng)互聯(lián)網(wǎng)時(shí)代,Web成為各超級App的通用基礎(chǔ)技術(shù)。Web瀏覽不再局限于傳統(tǒng)瀏覽器,相反已經(jīng)進(jìn)入絕大部分App的各類應(yīng)用場景。越來越多的App基于Hybrid模式開發(fā)和部署業(yè)務(wù)。騰訊瀏覽服務(wù)(TBS,Tencent Browsing Service)整合騰訊底層瀏覽技術(shù)和騰訊平臺(tái)資源及能力,提供整體瀏覽服務(wù)解決方案。騰訊瀏覽服務(wù)面向應(yīng)用開發(fā)商和廣大開發(fā)者,提供瀏覽增強(qiáng),內(nèi)容框架,廣告體系,H5游戲分發(fā),大數(shù)據(jù)等服務(wù),能夠幫助應(yīng)用開發(fā)商大幅改善應(yīng)用體驗(yàn),有效提升開發(fā),運(yùn)營,商業(yè)化的效率。傳統(tǒng)系統(tǒng)內(nèi)核(Webview)存在適配成本高、不安全、不穩(wěn)定、耗流量、速度慢、視頻播放差、文件能力差等問題,這是移動(dòng)應(yīng)用開發(fā)商在進(jìn)行Hybrid App開發(fā)時(shí)普遍面臨的難題。騰訊瀏覽服務(wù)基于騰訊X5內(nèi)核解決方案(包括內(nèi)核和云服務(wù)),能夠有效解決傳統(tǒng)移動(dòng)web技術(shù)面臨的普遍問題,同時(shí)能極大擴(kuò)展應(yīng)用(Hybrid App)內(nèi)瀏覽場景的服務(wù)能力。
2:騰訊X5Web的優(yōu)點(diǎn):

3:開始集成
A:集成前準(zhǔn)備
個(gè)人建議還是首先運(yùn)行騰訊下騰訊的X5Demo,不僅對X5有個(gè)初步印象,而且方便對項(xiàng)目中的功能進(jìn)行篩選使用。下載demo,導(dǎo)入AS(筆者的Android studio 是3.0版本)導(dǎo)入后,就報(bào)了第一個(gè)錯(cuò)誤...


細(xì)心的老司機(jī)可能一眼就發(fā)現(xiàn)了問題,這里就不多說問題直接給大家提供解決辦法:

在項(xiàng)目的 build.gradle里面(綠色區(qū)域)按照筆者為大家截圖(也就是紅色區(qū)域)的位置,在對應(yīng)區(qū)域添加紅色段落內(nèi)代碼即可。(代碼內(nèi)容如下)
buildscript {
repositories{ jcenter() }
dependencies{ classpath "com.android.tools.build:gradle:2.3.3" }
}
repositories {
maven {url 'http://repo1.maven.org/maven2' }
}
按照上面步驟,等待項(xiàng)目構(gòu)建完畢以后,Demo理論上就可以正常運(yùn)行了。(如果上述方法還是不行那只能說臉黑自行解決咯)項(xiàng)目成功運(yùn)行后的Demo效果如下:

B:基本配置
????I:權(quán)限配置

? ? II:jar包配置

III:項(xiàng)目 build.gradle配置:

由于X5暫時(shí)不提供64位so文件,為保證64位手機(jī)能正常加載x5內(nèi)核,可以在項(xiàng)目依賴中去配置ndk。為什么要配置ndk以及如何配置,詳細(xì)請參考?X5Web配置ndk的官方詳細(xì)說明
C:開始使用
首先:將Android系統(tǒng)源碼和XML里的系統(tǒng)包和類替換為騰訊X5WebSDK里的包和類,

舉個(gè)例子就是不要使用android系統(tǒng)的webview,而是使用騰訊的webview。當(dāng)然,具體的替換規(guī)則可以參考文章前面的鏈接,里面有詳細(xì)的使用說明。
其次:初始化設(shè)置

在自定義application里面進(jìn)行x5內(nèi)核初始化接口,別忘記了在清單文件里面要配置自定義application。
接著:關(guān)于cookie的管理和使用
官方文檔告知我們:com.tencent.smtt.sdk.CookieManager和com.tencent.smtt.sdk.CookieSyncManager的相關(guān)接口的調(diào)用,需要在接入SDK后,放到創(chuàng)建X5的WebView之后(也就是X5內(nèi)核加載完成)進(jìn)行;否則,cookie的相關(guān)操作只能影響系統(tǒng)內(nèi)核。
圖下給大家提供了一種cookie在X5的使用策略(也是筆者的另一篇文章)需要了解的可以移步下面鏈接。
然后:X5Web兼容視頻播放的使用
如果有視頻播放的需求,需要在享受頁面視頻的完整播放體驗(yàn)需要在頁面的Activity(配置文件)需要聲明android:configChanges="orientation|screenSize|keyboardHidden";
網(wǎng)頁中的視頻進(jìn)入屏幕的時(shí)候,可能出現(xiàn)閃爍的情況,需要如下設(shè)置:Activity在onCreate時(shí)需要設(shè)置:getWindow().setFormat(PixelFormat.TRANSLUCENT);(這個(gè)對宿主沒什么影響,建議聲明)
值得一提的是,以下接口禁止(直接或反射)調(diào)用,避免視頻畫面無法顯示:
webview.setLayerType() ; webview.setDrawingCacheEnabled(true);
最后:建議包裝x5webview
如何包裝?也就是自定義x5webview,建議:可以先花一點(diǎn)時(shí)間看一下官方的Demo,然后根據(jù)自身業(yè)務(wù)集成使用。當(dāng)然,筆者自己也封裝了一些最基本的功能?X5WebView的封裝?大家可以參考下(寫得不好的話請見諒)
常見問題:
問題一:
如何拿到X5webview的加載進(jìn)度,比如在Html加載前,客戶端這邊需要展示一張圖片,當(dāng)加載完畢以后這張圖片就隱藏,然后顯示需要展示的html內(nèi)容?
解決:在WebChromeClient這個(gè)類里面(import com.tencent.smtt.sdk.WebChromeClient ;?)有一個(gè)監(jiān)聽進(jìn)度的方法,如下圖

然后通過 setWebChromeClient( webChromeClient?);即可完成進(jìn)度的監(jiān)聽。
問題二:如何去除滾動(dòng)條?
解決:通過X5webview的?IX5WebViewExtension類對象,可以幫我們?nèi)コ凉L動(dòng)條,參考代碼如下

問題三:如何去除廣告?
使用的小伙伴反饋說H5上面有廣告,這里給兩種思路去解決,如果有更好的方法請直接在評論區(qū)提出:
1:可以使用Https
2:對加載的url進(jìn)行簡單的判斷(可以跟后臺(tái)討論設(shè)置規(guī)則)允許的域名進(jìn)行放行 其他就攔截,不允許的則攔截
點(diǎn)擊這里了解更多的X5問題大雜燴?X5問題大匯總
騰訊X5的基本介紹和使用就到這里,當(dāng)然可能有很多問題還沒有發(fā)現(xiàn),筆者在項(xiàng)目中如果有遇到任何問題會(huì)及時(shí)更新文章,各位看官有任何問題請直接聯(lián)系筆者或者評論區(qū)下提問。當(dāng)然也希望各位老鐵多多點(diǎn)贊支持,如果寫的不好還請大家多多包涵。
說完了基本使用,我們再談封裝,關(guān)于X5WebView的基本封裝,大家可以參考我的另一篇文章?X5WebView封裝?里面含源碼及使用說明,望大家多多支持。
如果這篇文章對你有幫助,希望各位看官留下寶貴的star,謝謝。
Ps:著作權(quán)歸作者所有,轉(zhuǎn)載請注明作者, 商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處(開頭或結(jié)尾請?zhí)砑愚D(zhuǎn)載出處,添加原文url地址),文章請勿濫用,也希望大家尊重筆者的勞動(dòng)成果,謝謝。