Android-X5Web詳細(xì)集成步驟(原創(chuàng))

本文意在了解掌握并快速集成騰訊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)擊!

文章使用到的官方資料:

騰訊瀏覽服務(wù)

騰訊瀏覽服務(wù)技術(shù)指南

騰訊瀏覽服務(wù)接入技術(shù)文檔

騰訊瀏覽服務(wù)SDK、API、Demo下載

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):

騰訊X5宣傳優(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ò)誤...


官方Demo的錯(cuò)誤
官方項(xiàng)目導(dǎo)入結(jié)構(gòu)圖

細(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效果如下:

X5運(yùn)行圖

B:基本配置

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


權(quán)限配置

? ? II:jar包配置


jar包jniLibs配置

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


配置ndk

由于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的配置

在自定義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的使用策略(也是筆者的另一篇文章)需要了解的可以移步下面鏈接。

Cookie的有效管理

然后: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)度的方法,如下圖


監(jiān)聽進(jìn)度

然后通過 setWebChromeClient( webChromeClient?);即可完成進(jìn)度的監(jiān)聽。

問題二:如何去除滾動(dòng)條?

解決:通過X5webview的?IX5WebViewExtension類對象,可以幫我們?nèi)コ凉L動(dòng)條,參考代碼如下

去除滾動(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)成果,謝謝。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,828評論 25 709
  • 關(guān)于這份調(diào)研報(bào)告,不是從技術(shù)角度深入探索,重點(diǎn)是從產(chǎn)品本身分析,通俗易懂才是重點(diǎn)。主要是為了鍛煉平時(shí)做技術(shù)調(diào)研和競...
    石先閱讀 23,874評論 13 48
  • 最基礎(chǔ)的使用方法 最簡單的布局: 在Activity中使用WebView: 但只是這樣的話,在模擬器上是會(huì)直接調(diào)到...
    HolenZhou閱讀 7,943評論 12 33
  • 貌似回想起來,從大學(xué)到現(xiàn)在研究生,有五分之一的周末是躺在床上刷劇,睡覺度過的。經(jīng)常感慨自己在這浪費(fèi)青春,虛度年華...
    濤濤的小鈺鈺閱讀 333評論 0 0
  • 世界上最難的事,就是要讓女人知道打折的東西也是要錢的!剛剛過去的雙十一/雙十二剁手節(jié),完全成為了女人們的網(wǎng)絡(luò)購物節(jié)...
    QBox閱讀 261評論 0 0

友情鏈接更多精彩內(nèi)容