騰訊TBS瀏覽器服務(wù)

我們都知道，在Android開發(fā)中，經(jīng)常會用到Webview,而且WebView是出了名的坑的，各種bug。這時候騰訊老哥站出來了，搞了一個TBS瀏覽器服務(wù)這個東西。 說得這么牛，其實就是一個webView控件，然后解析解析網(wǎng)頁的內(nèi)核是他自己做的，叫X5內(nèi)核(系統(tǒng)原生的WebView用的是WebKit內(nèi)核)，所以我們開發(fā)者用的時候，主要就是用這個com.tencent.smtt.sdk.WebView控件

當(dāng)然這個控件有很多功能，當(dāng)然也有些要注意的地方。

官網(wǎng)地址:http://x5.tencent.com

1. 特殊功能:

• 速度快：相比系統(tǒng)webview的網(wǎng)頁打開速度有30+%的提升；
• 省流量：使用云端優(yōu)化技術(shù)使流量節(jié)省20+%；
• 更安全：安全問題可以在24小時內(nèi)修復(fù)；
• 更穩(wěn)定：經(jīng)過億級用戶的使用考驗，CRASH率低于0.15%；
• 兼容好：無系統(tǒng)內(nèi)核的碎片化問題，更少的兼容性問題；
• 體驗優(yōu)：支持夜間模式、適屏排版、字體設(shè)置等瀏覽增強功能；
• 功能全：在Html5、ES6上有更完整支持；
• 更強大：集成強大的視頻播放器，支持視頻格式遠(yuǎn)多于系統(tǒng)webview；
• 視頻和文件格式的支持x5內(nèi)核多于系統(tǒng)內(nèi)核
• 防劫持是x5內(nèi)核的一大亮點

2. 運行環(huán)境

• 手機ROM版本高于或等于2.2版本
• 手機RAM大于500M，該RAM值通過手機 /proc/meminfo 文件的MemTotal動態(tài)獲取

注：如果不滿足上述條件，SDK會自動切換到系統(tǒng)WebView，SDK使用者不用關(guān)心該切換過程。

3. SDK尺寸指標(biāo)

• SDK提供的JAR包約293K

4. 原生和X5 WebView的類對應(yīng)表

                          系統(tǒng)內(nèi)核                                                                                SDK內(nèi)核

• android.webkit.ConsoleMessage                  com.tencent.smtt.export.external.interfaces.ConsoleMessage
• android.webkit.CacheManager                       com.tencent.smtt.sdk.CacheManager(deprecated)
• android.webkit.CookieManager                      com.tencent.smtt.sdk.CookieManager
• android.webkit.CookieSyncManager              com.tencent.smtt.sdk.CookieSyncManager
• android.webkit.CustomViewCallback com.tencent.smtt.export.external.interfaces.IX5WebChromeClient.CustomViewCallback
• android.webkit.DownloadListener                  com.tencent.smtt.sdk.DownloadListener
• android.webkit.GeolocationPermissions com.tencent.smtt.export.external.interfaces.GeolocationPermissionsCallback
• android.webkit.HttpAuthHandler                     com.tencent.smtt.export.external.interfaces.HttpAuthHandler
• android.webkit.JsPromptResult                      com.tencent.smtt.export.external.interfaces.JsPromptResult
• android.webkit.JsResult                                   com.tencent.smtt.export.external.interfaces.JsResult
• android.webkit.SslErrorHandler                      com.tencent.smtt.export.external.interfaces.SslErrorHandler
• android.webkit.ValueCallback                         com.tencent.smtt.sdk.ValueCallback
• android.webkit.WebBackForwardList            com.tencent.smtt.sdk.WebBackForwardList
• android.webkit.WebChromeClient                 com.tencent.smtt.sdk.WebChromeClient
• android.webkit.WebHistoryItem                      com.tencent.smtt.sdk.WebHistoryItem
• android.webkit.WebIconDatabase                 com.tencent.smtt.sdk.WebIconDatabase
• android.webkit.WebResourceResponse     com.tencent.smtt.export.external.interfaces.WebResourceResponse
• android.webkit.WebSettings                           com.tencent.smtt.sdk.WebSettings
• android.webkit.WebSettings.LayoutAlgorithm   com.tencent.smtt.sdk.WebSettings.LayoutAlgorithm
• android.webkit.WebStorage                            com.tencent.smtt.sdk.WebStorage
• android.webkit.WebView                                 com.tencent.smtt.sdk.WebView
• android.webkit.WebViewClient                      com.tencent.smtt.sdk.WebViewClient

在APP中集成

1. 導(dǎo)Jar包

去這個網(wǎng)址： http://x5.tencent.com/tbs/sdk.html ，看到Android SDK（完整版） 這個就是Jar包，下載回來放到你項目的lib文件夾，右鍵add as library即可。

2. 權(quán)限

在Manifest添加下面的權(quán)限

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />

3. 初始化X5內(nèi)核

在Application里面使用QbSdk.initX5Environment進(jìn)行初始化X5內(nèi)核,第一個參數(shù)傳入context，第二個參數(shù)傳入PreInitCallback，不需要callback的可以傳入null。
initX5Environment內(nèi)部會創(chuàng)建一個線程向后臺查詢當(dāng)前可用內(nèi)核版本號，這個函數(shù)內(nèi)是異步執(zhí)行所以不會阻塞 App 主線程，這個函數(shù)內(nèi)是輕量級執(zhí)行所以對App啟動性能沒有影響，當(dāng)App后續(xù)創(chuàng)建webview 時就可以首次加載x5內(nèi)核了:

public class BaseApplicatiom extends Application {
 @Override
 public void onCreate() {
 super.onCreate();
 //初始化X5內(nèi)核
 QbSdk.initX5Environment(this, new QbSdk.PreInitCallback() {
 @Override
 public void onCoreInitFinished() {
 //x5內(nèi)核初始化完成回調(diào)接口，此接口回調(diào)并表示已經(jīng)加載起來了x5，有可能特殊情況下x5內(nèi)核加載失敗，切換到系統(tǒng)內(nèi)核。
 }
 @Override
 public void onViewInitFinished(boolean b) {
 //x5內(nèi)核初始化完成的回調(diào)，為true表示x5內(nèi)核加載成功，否則表示x5內(nèi)核加載失敗，會自動切換到系統(tǒng)內(nèi)核。
 Log.e("@@","加載內(nèi)核是否成功:"+b);
 }
 });
 }
}

4. 使用WebView

然后需要用到WebView的時候，在布局這樣子下面這樣子寫，注意要全路徑com.tencent.smtt.sdk.WebView:

<com.tencent.smtt.sdk.WebView
 android:id="@+id/twv_test"
 android:layout_width="match_parent"
 android:layout_height="match_parent"/>

其余使用方法基本和系統(tǒng)的WebView一樣，例如js的交互是，也是一樣的addJavascriptInterface，所以使用成本還不算高。但是有些是需要注意的，繼續(xù)看下去:

高級一點的使用

1. 全屏播放視頻

頁面的Activity需要聲明:

android:configChanges="orientation|screenSize|keyboardHidden"

視頻為了避免閃屏和透明問題，Activity在onCreate時需要設(shè)置:

//這個對宿主沒什么影響，建議聲明
getWindow().setFormat(PixelFormat.TRANSLUCENT);

在非硬繪手機和聲明需要controller的網(wǎng)頁上，視頻切換全屏和全屏切換回頁面內(nèi)會出現(xiàn)視頻窗口透明問題，需要在activity的style進(jìn)行如下設(shè)置:

<!-- 聲明為不透明,這個視各app情況所需，不強制需求，如果聲明了，對體驗更有利 -->
<item name="android:windowIsTranslucent">false</item>。

以下接口禁止(直接或反射)調(diào)用，避免視頻畫面無法顯示：

webview.setLayerType()
webview.setDrawingCacheEnabled(true);

2. 輸入法

避免輸入法界面彈出后遮擋輸入光標(biāo)的問題，所在的Activity添加屬性：

android:windowSoftInputMode="stateHidden|adjustResize"

或者 在ActivityonCreate時候代碼設(shè)置也行：

getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE | WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN);

3. 自定義UA

UA是什么？
userAgent,用戶代理。是一個特殊字符串頭，使得服務(wù)器能夠識別客戶使用的操作系統(tǒng)及版本、CPU 類型、瀏覽器及版本、瀏覽器渲染引擎、瀏覽器語言、瀏覽器插件等。作用就是告訴網(wǎng)頁我這個是什么系統(tǒng)。

如果 app 需要自定義 UA，建議采取在 SDK 默認(rèn)UA 后追加 app UA 的方式。示例：

//其中APP_NAME_UA是app自定義UA
webSetting.setUserAgentString(webSetting.getUserAgentString() + APP_NAME_UA);

4. 額外的視頻播放器

沒錯，這貨還提供了一個視頻播放的功能，下面官方的說明:

TBS不僅提供了強大的網(wǎng)頁瀏覽功能，更提供了強大的頁面H5視頻播放支持，播放器同時支持頁面，小窗，全屏播放體驗，強大的解碼能力，包括mp4，rmvb，flv，avi等26種視頻格式支持。

TBS播放器的播放場景不僅局限于H5頁面播放，也可以接入一般的視頻流鏈接，比如本地文件，網(wǎng)絡(luò)的視頻流鏈接。開發(fā)者如果想播放一個視頻鏈接，在不自己開發(fā)播放器的前提下，一般做法是將視頻的播放鏈接放到一個Intent里面，拋給系統(tǒng)的播放器進(jìn)行播放，那么當(dāng)你集成了TBS后，你只需要通過簡單的方式接入視頻播放調(diào)用接口，這樣你不需要寫任何一句關(guān)于播放器的代碼，就可以享受一個本地播放器體驗，播放視頻再不需要Intent來跨App、跨進(jìn)程的調(diào)用了。

第一步，在Manifest添加Activity聲明：

<activity
 android:name="com.tencent.smtt.sdk.VideoActivity"
 android:configChanges="orientation|screenSize|keyboardHidden"
 android:exported="false"
 android:launchMode="singleTask"
 android:alwaysRetainTaskState="true">
 <intent-filter>
 <action android:name="com.tencent.smtt.tbs.video.PLAY" />
 <category android:name="android.intent.category.DEFAULT" />
 </intent-filter>
</activity>

第二步，調(diào)用播放視頻的調(diào)用接口，通過TbsVideo的靜態(tài)方法，如下：

//判斷當(dāng)前Tbs播放器是否已經(jīng)可以使用。
public static boolean canUseTbsPlayer(Context context)
//直接調(diào)用播放接口，傳入視頻流的url
public static void openVideo(Context context, String videoUrl)
//extraData對象是根據(jù)定制需要傳入約定的信息，沒有需要可以傳如null
public static void openVideo(Context context, String videoUrl, Bundle extraData)

5. 文件選擇器

官方demo中有。簡單說一下流程

在WebChromeClient里面有回調(diào)openFileChooser、onShowFileChooser方法。

點擊了網(wǎng)頁的控件就可以回調(diào)上面的方法

在回調(diào)方法里面我們利用Intent打開文件選擇器

然后選擇完文件后在onActivityResult回調(diào)里面進(jìn)行獲取，然后利用ValueCallback<Uri>或者ValueCallback<Uri[]>的onReceiveValue進(jìn)行返回路徑給網(wǎng)頁。

注意的地方

1. cookie的調(diào)整

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)核。

2. WebView寬高的獲取

由于SDK WebView所提供的WebView類，是對系統(tǒng)WebView的聚合包裝，所以：獲取系統(tǒng)內(nèi)核的WebView或者 x5內(nèi)核的WebView的寬高需要這樣：

webView.getView().getWidth();

3. X5內(nèi)核

開始說了，這個騰訊的WebView使用的是自己的X5內(nèi)核。

如果你的手機有安裝QQ、微信、QQ瀏覽器等等QQ的產(chǎn)品， 這個內(nèi)核就已經(jīng)是已經(jīng)安裝到手機上了。

如果都沒有，在Application初始化調(diào)用initX5Environment方法的時候，會進(jìn)行離線安裝，失敗就會自動切換自用自帶內(nèi)核。

如果都都沒有，而且手機沒有鏈接網(wǎng)絡(luò)，需要離線，這時候需要打包內(nèi)核進(jìn)app，app包增大20M左右.

那怎么判斷他是使用X5內(nèi)核還是自帶內(nèi)核呢？
顯示網(wǎng)頁文字時，可通過長按選擇文字的標(biāo)識判斷，如下水滴狀選擇效果是x5webview的標(biāo)志：

4. 64位手機的兼容

x5內(nèi)核暫時不提供64位的so文件,在64位手機上需要讓AP以32位模式運行。具體操作如下：

如果使用是Eclipse

需要將所有的.so文件都放置在so加載目錄：lib/armeabi文件夾下(沒有該目錄則新建一個，AP中沒有使用到.so文件則需要拷貝任意一個32位的so文件到該目錄下,如果沒有合適的so可以到官網(wǎng)http://x5.tencent.com/tbs/sdk.html下載官網(wǎng)“SDK接入示例“,拷貝對應(yīng)目錄下的liblbs.so文件)，lib文件夾下不要有其他以”armeabi“開頭的文件夾。

如果使用的是Android Studio:

1、打開對應(yīng)module中的build.gradle文件,在文件的android{}中的defaultConfig{}里(如果沒有defaultConfig{}則手動添加)，添加如下配置:

ndk{ 
 abiFilters "armeabi", "armeabi-v7a", "x86", "mips"
}

如果配置后編譯報錯，那么需要在gradle.properties文件中加上Android.useDeprecatedNdk=true;

2、打開http://x5.tencent.com/tbs/sdk.html,下載SDK接入示例,拷貝對應(yīng)目錄下的liblbs.so文件，到你的armeabi目錄下

5. 混淆

jar包本來就已經(jīng)是混淆好的了，如果你打包時候沒有添加規(guī)則再混淆一遍的話，就會無法使用x5內(nèi)核了。所以需要添加混淆規(guī)則：

下載混淆文件：http://res.imtt.qq.com/TES/proguard.zip

解壓后用文本編輯器打開，復(fù)制里面的內(nèi)容到你項目的proguard-rules.pro混淆文件即可。

簡單包裝

如果在項目中使用，一般來說最好是封裝多一層。

• 防止和原生的WebView搞混
• 有什么問題，一改全改。
• 可以添加一些功能，例如進(jìn)度條等。

這里給一個簡單加進(jìn)度條的封裝，在項目中使用的話，你在布局文件里面使用路徑+ProgressWebview即可

public class ProgressWebview extends WebView {
 private ProgressBar progressbar; //進(jìn)度條
 private int progressHeight = 10; //進(jìn)度條的高度，默認(rèn)10px
 public ProgressWebview(Context context) {
 super(context);
 initView(context);
 }
 public ProgressWebview(Context context, AttributeSet attributeSet) {
 super(context, attributeSet);
 initView(context);
 }
 private void initView(Context context) {
 //開啟js腳本支持
 getSettings().setJavaScriptEnabled(true);
 //創(chuàng)建進(jìn)度條
 progressbar = new ProgressBar(context, null,
 android.R.attr.progressBarStyleHorizontal);
 //設(shè)置加載進(jìn)度條的高度
 progressbar.setLayoutParams(new AbsoluteLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, progressHeight, 0, 0));
 Drawable drawable = context.getResources().getDrawable(R.drawable.progress_bar_states);
 progressbar.setProgressDrawable(drawable);
 //添加進(jìn)度到WebView
 addView(progressbar);
 //適配手機大小
 getSettings().setUseWideViewPort(true);
 getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
 getSettings().setLoadWithOverviewMode(true);
 getSettings().setSupportZoom(true);
 getSettings().setBuiltInZoomControls(true);
 getSettings().setDisplayZoomControls(false);
 setWebChromeClient(new WVChromeClient());
 setWebViewClient(new WVClient());
 }
 //進(jìn)度顯示
 private class WVChromeClient extends WebChromeClient {
 @Override
 public void onProgressChanged(WebView view, int newProgress) {
 if (newProgress == 100) {
 progressbar.setVisibility(GONE);
 } else {
 if (progressbar.getVisibility() == GONE)
  progressbar.setVisibility(VISIBLE);
 progressbar.setProgress(newProgress);
 }
 if (mListener != null) {
 mListener.onProgressChange(view, newProgress);
 }
 super.onProgressChanged(view, newProgress);
 }
 }
 private class WVClient extends WebViewClient {
 @Override
 public boolean shouldOverrideUrlLoading(WebView view, String url) {
 //在當(dāng)前Activity打開
 view.loadUrl(url);
 return true;
 }
 @Override
 public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
 //https忽略證書問題
 handler.proceed();
 }
 @Override
 public void onPageFinished(WebView view, String url) {
 progressbar.setVisibility(GONE);
 if (mListener != null) {
 mListener.onPageFinish(view);
 }
 super.onPageFinished(view, url);
 }
 }
 private onWebViewListener mListener;
 public void setOnWebViewListener(onWebViewListener listener) {
 this.mListener = listener;
 }
 //進(jìn)度回調(diào)接口
 public interface onWebViewListener {
 void onProgressChange(WebView view, int newProgress);
 void onPageFinish(WebView view);
 }
}

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接

最新評論