TBS 騰訊瀏覽服務 之X5WebView集成指南

• 1. 什么是騰訊瀏覽服務?
• • 1.1 騰訊瀏覽服務
  • 1.2 瀏覽增強
  • • 1.2.1 安全
    • 1.2.2 極速,省流
    • 1.2.3 可靠
    • 1.2.4 兼容
    • 1.2.5 HTML5能力
    • 1.2.6 內核共享
    • 1.2.7 增強瀏覽能力
    • • 1.2.7.1 文件打開能力
      • 1.2.7.2 視頻支持能力
      • 1.2.7.3 下載能力
      • 1.2.7.4 瀏覽體驗擴展
  • 1.3 整合能力開放
  • • 1.3.1 內容能力
    • 1.3.2 大數據服務能力
    • 1.3.3 商業能力
  • 1.4 TBS (騰訊瀏覽服務)的優勢
• 2.如何集成TBS 騰訊瀏覽服務?
• • 2.1 下載SDK
  • 2.2 將SDK中的Lib 添加到項目中
  • 2.3 添加*.so 庫
  • 2.4 AndroidManifest.xml里加入權限聲明
  • 2.5 初始化X5 瀏覽器內核
  • • 2.5.1 AndroidManifest.xml里添加自定義的Application類
    • 2.5.2 自定義應用程序類中初始化X5 內核
  • 2.6 重寫自定義X5WebView
  • 2.7 修改界面
  • 2.8 添加視圖綁定框架依賴
  • 2.9 主活動中調用
  • 2.10 啟動程序

1. 什么是騰訊瀏覽服務?

1.1 騰訊瀏覽服務

• 移動互聯網時代，Web成為各超級App的通用基礎技術。Web瀏覽不再局限于傳統瀏覽器，相反已經進入絕大部分App的各類應用場景。越來越多的App基于Hybrid模式開發和部署業務。
• 騰訊瀏覽服務（TBS，Tencent Browsing Service）整合騰訊底層瀏覽技術和騰訊平臺資源及能力，提供整體瀏覽服務解決方案。騰訊瀏覽服務面向應用開發商和廣大開發者，提供瀏覽增強，內容框架，廣告體系，H5游戲分發，大數據等服務，能夠幫助應用開發商大幅改善應用體驗，有效提升開發，運營，商業化的效率。
• 騰訊瀏覽服務目前已接入超過1000款App，涵蓋20個多個行業和領域；目前平臺日活躍用戶超5億；日均處理訪問需求超 110億次，累計處理移動頁面需求已接近57000億次。騰訊瀏覽服務的發布同時也意味著騰訊首次對外開放萬億級數據能力為行業伙伴提供服務。

1.2 瀏覽增強

傳統系統內核(Webview)存在適配成本高、不安全、不穩定、耗流量、速度慢、視頻播放差、文件能力差等問題，這是移動應用開發商在進行Hybrid App開發時普遍面臨的難題。騰訊瀏覽服務基于騰訊X5內核解決方案（包括內核和云服務），能夠有效解決傳統移動web技術面臨的普遍問題，同時能極大擴展應用(Hybrid App)內瀏覽場景的服務能力。

1.2.1 安全

騰訊瀏覽服務為應用瀏覽場景提供完善的安全保障體系，包括：云安全方案：保障數據安全，防惡意劫持（DNS劫持,HTTP劫持等），防惡意網址，防惡意文件下載等；端安全方案：及時解決系統內核無法解決的各類風險和漏洞，支持熱修復，24小時安全問題解決機制。

1.2.2 極速,省流

騰訊瀏覽服務在云端對網頁及資源流進行壓縮，在終端優化網頁加載全流程。基于騰訊瀏覽服務，流量消耗普遍可減少20%~40%，網頁加載速度平均可提升35%。

1.2.3 可靠

經過億級用戶的使用考驗，騰訊瀏覽服務crash率低于0.06%。

1.2.4 兼容

• Android應用及前端開發都面臨嚴重碎片化問題，不同尺寸手機，不同操作系統，不同瀏覽器內核的瀏覽效果可能大相徑庭，開發者須付出極大適配成本。
• X5內核基于統一Blink內核，無縫隱藏系統差異，在所有Android手機平臺表現一致；同時，X5也是微信、手機QQ、手機QQ空間、手機QQ瀏覽器等超級App的內核。騰訊瀏覽服務可以幫助開發者實現一次開發，同時適配App、手機瀏覽器、社交媒體，有效提升應用開發效率。

1.2.5 HTML5能力

騰訊瀏覽服務提供完善的HTML5能力支持。特別是，騰訊瀏覽服務針對canvas, webGL的渲染能力和性能大大優于傳統內核，能夠有效支持復雜的HTML5手游（包括基于HTML5的3D,VR類游戲）實現不遜色于Native的性能體驗。基于騰訊瀏覽服務的HTML5游戲可以流暢運行于國內市場占有率領先的HTML5手機游戲渠道，包括手機QQ瀏覽器頁游平臺、手機QQ空間玩吧等。

1.2.6 內核共享

基于騰訊瀏覽服務，應用可以與超級應用（如微信、手機QQ、手機QQ空間、手機QQ瀏覽器）宿主共享X5內核，因而應用只需集成約200K
size的SDK即可使用騰訊瀏覽服務。

1.2.7 增強瀏覽能力

1.2.7.1 文件打開能力

目前支持42種文件格式，包括20種文檔、12種音樂、6種圖片和4種壓縮包。幫助應用實現應用內文檔瀏覽，無需跳轉調用其他應用。

1.2.7.2 視頻支持能力

目前支持26種視頻格式。

1.2.7.3 下載能力

騰訊瀏覽服務內嵌下載能力。基于騰訊瀏覽服務，應用無需調用其他下載資源，有效減少劫持換包風險。

1.2.7.4 瀏覽體驗擴展

騰訊瀏覽服務提供豐富的瀏覽功能擴展，提升瀏覽體驗

1.3 整合能力開放

騰訊瀏覽服務不僅是移動互聯網的Web技術解決方案，同時，基于騰訊龐大的內容和運營體系，整合內容框架和商業能力，騰訊瀏覽服務還向合作伙伴開放：內容，商業，數據能力，幫助合作伙伴有效運營內容，提升用戶粘性，實現商業變現。同時，騰訊瀏覽服務宣布不參與廣告分成，將收益100%給合作伙伴。

1.3.1 內容能力

• 騰訊瀏覽服務內容模塊包含資訊、視頻、小說、游戲以及獨有的微信熱文等，合作伙伴可以根據自身產品形態和用戶群體選擇自定義的內容模塊接入，對自身產品服務進行補充。
• 例如針對HTML5游戲，騰訊瀏覽服務提供從技術到運營和變現，包括技術平臺，游戲選型，運營，框架集成，登錄，支付等的端到端服務，幫助合作伙伴一鍵接入HTML5游戲運營平臺，基于自身業務屬性低成本運營HTML5游戲。

1.3.2 大數據服務能力

騰訊瀏覽服務的大數據能力基于騰訊龐大的產品體系，包括微信、手機QQ、手機QQ瀏覽器等超級應用以及各類垂直應用。騰訊瀏覽服務為合作伙伴所提供的內容、廣告能力均基于騰訊立體化的的數據系統。合作伙伴可以通過騰訊瀏覽服務提升數據分析能力，更有效率地運營內容。

1.3.3 商業能力

• 基于騰訊瀏覽服務廣告框架的騰訊廣告聯盟
  合作伙伴可通過騰訊瀏覽服務廣告框架接入騰訊廣告聯盟，在不影響用戶體驗的情況下于內容模塊以及其他產品頁面中嵌入廣告位。廣告主資源由騰訊廣告聯盟提供，同時騰訊宣布不參與廣告分成，目前階段將該部分收益100%分給合作伙伴。騰訊瀏覽服務和騰訊廣告聯盟基于騰訊的大數據能力，能夠為合作伙伴的用戶賦予更多標簽，提升廣告效果，兼顧用戶體驗，從而為合作伙伴提供更好的收益。
• 商業Portal
  合作伙伴可便捷接入騰訊瀏覽服務提供的定制化商業Portal，基于應用自身屬性運營內容并直接獲得其中的商業收益。

瀏覽是移動互聯網最基礎的功能之一，騰訊希望通過資源和能力的聚合將瀏覽的價值進行更好的挖掘，并通過服務的形式提供給合作伙伴。騰訊希望將整合了全新能力和資源的瀏覽價值通過服務的形式共享給合作伙伴，讓數據和技術在更大范圍內創造出不一樣的精彩。

1.4 TBS (騰訊瀏覽服務)的優勢

速度快：相比系統webview的網頁打開速度有30+%的提升；

省流量：使用云端優化技術使流量節省20+%；

更安全：安全問題可以在24小時內修復；

更穩定：經過億級用戶的使用考驗，CRASH率低于0.15%；

兼容好：無系統內核的碎片化問題，更少的兼容性問題；

體驗優：支持夜間模式、適屏排版、字體設置等瀏覽增強功能；

功能全：在Html5、ES6上有更完整支持；

更強大：集成強大的視頻播放器，支持視頻格式遠多于系統webview；

視頻和文件格式的支持x5內核多于系統內核

防劫持是x5內核的一大亮點

2.如何集成TBS 騰訊瀏覽服務?

官網: https://x5.tencent.com
反饋：https://x5.tencent.com/tbs/feedback.html

2.1 下載SDK

SDK 下載地址: https://x5.tencent.com/tbs/sdk.html

2.2 將SDK中的Lib 添加到項目中

• 切換到Project 視圖我們才能看到Libs 文件夾
  
• 下載SDK壓縮包Libs 文件夾下的Jar 復制到libs 文件夾下
  
• 選中項目右鍵,Open Module Settings
  
• 為項目添加剛才引入的依賴
  
• 然后選擇剛才的jar
  
• 選好后如下所示:
  

2.3 添加*.so 庫

值得注意的是,我們還是切換到project視圖,在src/main 目錄下創建
jniLibs 文件夾

復制 \TBSSDK_43646_1557142332012\TBSSDK_43646\SDK接入示例-Android Studio\SDK接入示例-AndroidStudio\X5WebDemo\src\main\jniLibs\armeabi\liblbs.so
到這四個文件夾下.

修改module/build.gradle 配置文件如下:

android {compileSdkVersion 28buildToolsVersion "29.0.0"defaultConfig {applicationId "com.xingyun.smartx5webviewsample"minSdkVersion 16targetSdkVersion 28versionCode 1versionName "1.0"testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"// Specifies the ABI configurations of your native// libraries Gradle should build and package with your APK.ndk {abiFilters "armeabi", "x86",'x64','x86_64'}}buildTypes {release {minifyEnabled falseproguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'}} }

值得注意的是:
abiFilters “armeabi”, “x86”,‘x64’,‘x86_64’
對應的是四個文件夾如下:

• 除非我們在build.gradle 中添加了: jniLibs.srcDir:customerDir
• 否則 Android Studio 默認加載so 目錄為：src/main/jniLibs
• 如果沒有這四個文件夾,則會報錯崩潰,啟動不了,安裝不上apk.
• so加載目錄請只保留armeabi或者armeabi-v7a

這四個東西是什么呢?
創建模擬器的時候我們可以看到

2.4 AndroidManifest.xml里加入權限聲明

<!-- 請求網絡權限 --><uses-permission android:name="android.permission.INTERNET" /><!-- 讀存儲權限 --><uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /><!-- 寫存儲權限 --><uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /><!-- 網絡狀態權限 --><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /><!-- WIFI 狀態權限 --><uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /><!-- 手機狀態權限 --><uses-permission android:name="android.permission.READ_PHONE_STATE" /><!-- 讀取設置權限 --><uses-permission android:name="android.permission.READ_SETTINGS" />

2.5 初始化X5 瀏覽器內核

2.5.1 AndroidManifest.xml里添加自定義的Application類

<applicationandroid:name=".MyApplication"android:allowBackup="true"android:icon="@mipmap/ic_launcher"android:label="@string/app_name"android:roundIcon="@mipmap/ic_launcher_round"android:supportsRtl="true"android:windowSoftInputMode="stateHidden|adjustResize"android:usesCleartextTraffic="true"android:theme="@style/AppTheme"><activity android:name=".MainActivity"><intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /></intent-filter></activity></application>

注意:
這里要添加的是name 屬性,值為我們自定義的應用程序類
android:name=".MyApplication"
避免輸入法界面彈出后遮擋輸入光標的問題
android:windowSoftInputMode="stateHidden|adjustResize"
Android 新版本默認不支持Http 請求,需要支持Http請求需要添加:
android:usesCleartextTraffic="true"

2.5.2 自定義應用程序類中初始化X5 內核

import android.app.Application; import android.util.Log;import com.tencent.smtt.sdk.QbSdk;public class MyApplication extends Application {@Overridepublic void onCreate() {super.onCreate();//初始化X5 瀏覽器內核initX5WebViewCore();}private void initX5WebViewCore() {//搜集本地tbs內核信息并上報服務器，服務器返回結果決定使用哪個內核。QbSdk.PreInitCallback cb = new QbSdk.PreInitCallback() {@Overridepublic void onViewInitFinished(boolean arg0) {// TODO Auto-generated method stub//x5內核初始化完成的回調，為true表示x5內核加載成功，否則表示x5內核加載失敗，會自動切換到系統內核。Log.d("swallow", " onViewInitFinished is " + arg0);}@Overridepublic void onCoreInitFinished() {// TODO Auto-generated method stubLog.d("swallow", " onCoreInitFinished");}};//x5內核初始化接口QbSdk.initX5Environment(getApplicationContext(), cb);} }

2.6 重寫自定義X5WebView

我們實際開發中一般不直接使用X5WebView 而是繼承它自定義一個.

值得注意的是,我們繼承的WebView 并不是Android 自帶的WebView,
而是com.tencent.smtt.sdk.WebView 包下的WebView.

package com.xingyun.smartx5webviewsample.custom;import android.annotation.SuppressLint; import android.content.Context; import android.graphics.Canvas; import android.util.AttributeSet; import android.view.View; import android.widget.TextView;import com.tencent.smtt.sdk.WebSettings; import com.tencent.smtt.sdk.WebSettings.LayoutAlgorithm; import com.tencent.smtt.sdk.WebView;public class X5WebView extends WebView {TextView title;@SuppressLint("SetJavaScriptEnabled")public X5WebView(Context arg0, AttributeSet arg1) {super(arg0, arg1); // this.setWebChromeClient(chromeClient); // WebStorage webStorage = WebStorage.getInstance();initWebViewSettings();this.getView().setClickable(true);}@SuppressLint("SetJavaScriptEnabled")private void initWebViewSettings() {WebSettings webSetting = this.getSettings();webSetting.setJavaScriptEnabled(true);webSetting.setJavaScriptCanOpenWindowsAutomatically(true);webSetting.setAllowFileAccess(true);webSetting.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);webSetting.setSupportZoom(true);webSetting.setBuiltInZoomControls(true);webSetting.setUseWideViewPort(true);webSetting.setSupportMultipleWindows(true);// webSetting.setLoadWithOverviewMode(true);webSetting.setAppCacheEnabled(true);// webSetting.setDatabaseEnabled(true);webSetting.setDomStorageEnabled(true);webSetting.setGeolocationEnabled(true);webSetting.setAppCacheMaxSize(Long.MAX_VALUE);// webSetting.setPageCacheCapacity(IX5WebSettings.DEFAULT_CACHE_CAPACITY);webSetting.setPluginState(WebSettings.PluginState.ON_DEMAND);// webSetting.setRenderPriority(WebSettings.RenderPriority.HIGH);webSetting.setCacheMode(WebSettings.LOAD_NO_CACHE);// this.getSettingsExtension().setPageCacheCapacity(IX5WebSettings.DEFAULT_CACHE_CAPACITY);//extension// settings 的設計}@Overrideprotected boolean drawChild(Canvas canvas, View child, long drawingTime) {boolean ret = super.drawChild(canvas, child, drawingTime);return ret;}public X5WebView(Context arg0) {super(arg0);setBackgroundColor(85621);} }

2.7 修改界面

activity_main.xml 如下:

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><com.xingyun.smartx5webviewsample.custom.X5WebViewandroid:id="@+id/myX5WebView"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent" /></android.support.constraint.ConstraintLayout>

注意: 這里的X5WebView 就是我們剛自定義的WebView

2.8 添加視圖綁定框架依賴

app/build.gradle

dependencies {implementation fileTree(dir: 'libs', include: ['*.jar'])implementation 'com.android.support:appcompat-v7:28.0.0'implementation 'com.android.support.constraint:constraint-layout:2.0.0-beta1'testImplementation 'junit:junit:4.13-beta-3'androidTestImplementation 'com.android.support.test:runner:1.0.2'androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'/** X5 WebView */implementation files('libs\\tbs_sdk_thirdapp_v3.6.0.1310_43612.jar')/** UI View 綁定框架**/implementation 'com.jakewharton:butterknife:8.8.1'annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1' }

2.9 主活動中調用

import android.graphics.Bitmap; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.util.Log; import android.view.View;import com.tencent.smtt.export.external.interfaces.SslError; import com.tencent.smtt.export.external.interfaces.SslErrorHandler; import com.tencent.smtt.sdk.WebView; import com.tencent.smtt.sdk.WebViewClient; import com.xingyun.smartx5webviewsample.custom.X5WebView;import butterknife.BindView; import butterknife.ButterKnife;public class MainActivity extends AppCompatActivity {@BindView(R.id.myX5WebView)X5WebView myX5WebView;private static final String BASE_URL="http://www.baidu.com";@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);ButterKnife.bind(this);myX5WebView.clearCache(true);myX5WebView.clearHistory();myX5WebView.setWebViewClient(new WebViewClient(){@Overridepublic boolean shouldOverrideUrlLoading(WebView webView, String url) {Log.d("swallow","shouldOverrideUrlLoading------>"+url);if(url.startsWith("http://")||url.startsWith("https://")){webView.loadUrl(url);return true;}else{return false;}}@Overridepublic void onPageStarted(WebView webView, String s, Bitmap bitmap) {Log.d("swallow","onPageStarted------->"+s);super.onPageStarted(webView, s, bitmap);}@Overridepublic void onPageFinished(WebView webView, String s) {super.onPageFinished(webView, s);Log.d("swallow","onPageFinished------->"+s);webView.setLayerType(View.LAYER_TYPE_HARDWARE,null);}@Overridepublic void onReceivedSslError(WebView webView, SslErrorHandler sslErrorHandler, SslError sslError) {sslErrorHandler.proceed();}});myX5WebView.loadUrl(BASE_URL);} }

2.10 啟動程序

啟動程序如下所示:

本文源碼下載
本文主要TBS 瀏覽服務的瀏覽功能
更多其他能力,請參考官方文檔
TBS 接入文檔 https://x5.tencent.com/tbs/guide/sdkInit.html

總結

以上是生活随笔為你收集整理的TBS 腾讯浏览服务(X5WebView) 集成指南的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。