Tutorials and Points for Android to Access Tencent TBS Browser WebView in the Project

Tencent TBS Browser Service

We all know that in Android development, Webview is often used, and WebView is notorious for its pitfalls and various bugs. At this time, Tencent's brother stood up and started a TBS browser service. He said it so badly, it is actually a webView control, and then the core of parsing and parsing the web page is made by himself, called the X5 core (the system's native WebView uses the WebKit core), so when our developers use it, we mainly use this. com.tencent.smtt.sdk.WebViewcontrols

Of course, this control has many functions, of course, there are some places to pay attention to.

Official website address: http://x5.tencent.com

1. Special features:

Fast speed: Compared with the system webview, the web page opening speed is 30+% improved;
Save traffic: use cloud optimization technology to save traffic by 20+%;
Safer: Security issues can be fixed within 24 hours;
More stable: After the test of hundreds of millions of users, the CRASH rate is lower than 0.15%;
Good compatibility: no system kernel fragmentation problems, less compatibility problems;
Excellent experience: Supports browsing enhancements such as night mode, screen-fit layout, and font settings;
Full-featured: more complete support on Html5 and ES6;
More powerful: integrates a powerful video player, supports far more video formats than the system webview;
Video and file formats support more x5 kernels than system kernels
Anti-hijacking is a highlight of the x5 kernel

2. Operating environment

Phone ROM version higher than or equal to version 2.2
The RAM of the mobile phone is greater than 500M, and the RAM value is dynamically obtained through the MemTotal of the /proc/meminfo file of the mobile phone

Note: If the above conditions are not met, the SDK will automatically switch to the system WebView, and SDK users do not need to care about the switching process.

3. SDK size indicators

The JAR package provided by the SDK is about 293K

4. Class correspondence table between native and X5 WebView

system kernel	SDK kernel
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

Integrate in APP

1. Import the Jar package

去这个网址： http://x5.tencent.com/tbs/sdk.html ，看到Android SDK（完整版） 这个就是Jar包，下载回来放到你项目的lib文件夹，右键add as library即可。

2. 权限

在Manifest添加下面的权限

<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内核

在Application里面使用QbSdk.initX5Environment进行初始化X5内核,第一个参数传入context，第二个参数传入PreInitCallback，不需要callback的可以传入null。
initX5Environment内部会创建一个线程向后台查询当前可用内核版本号，这个函数内是异步执行所以不会阻塞 App 主线程，这个函数内是轻量级执行所以对App启动性能没有影响，当App后续创建webview 时就可以首次加载x5内核了:

public class BaseApplicatiom extends Application {


    @Override
    public void onCreate() {
        super.onCreate();

        //初始化X5内核
        QbSdk.initX5Environment(this, new QbSdk.PreInitCallback() {
            @Override
            public void onCoreInitFinished() {
                //x5内核初始化完成回调接口，此接口回调并表示已经加载起来了x5，有可能特殊情况下x5内核加载失败，切换到系统内核。

            }

            @Override
            public void onViewInitFinished(boolean b) {
                //x5內核初始化完成的回调，为true表示x5内核加载成功，否则表示x5内核加载失败，会自动切换到系统内核。
                Log.e("@@","加载内核是否成功:"+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"/>

其余使用方法基本和系统的WebView一样，例如js的交互是，也是一样的addJavascriptInterface，所以使用成本还不算高。但是有些是需要注意的，继续看下去:

高级一点的使用

1. 全屏播放视频

页面的Activity需要声明:

android:configChanges="orientation|screenSize|keyboardHidden"

视频为了避免闪屏和透明问题，Activity在onCreate时需要设置:

//这个对宿主没什么影响，建议声明
getWindow().setFormat(PixelFormat.TRANSLUCENT);

在非硬绘手机和声明需要controller的网页上，视频切换全屏和全屏切换回页面内会出现视频窗口透明问题，需要在activity的style进行如下设置:


<!-- 声明为不透明,这个视各app情况所需，不强制需求，如果声明了，对体验更有利 -->

<item name="android:windowIsTranslucent">false</item>。

以下接口禁止(直接或反射)调用，避免视频画面无法显示：

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

2. 输入法

避免输入法界面弹出后遮挡输入光标的问题，所在的Activity添加属性：

android:windowSoftInputMode="stateHidden|adjustResize"

或者在ActivityonCreate时候代码设置也行：

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

3. 自定义UA

UA是什么？
userAgent,用户代理。是一个特殊字符串头，使得服务器能够识别客户使用的操作系统及版本、CPU 类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。作用就是告诉网页我这个是什么系统。

如果 app 需要自定义 UA，建议采取在 SDK 默认UA 后追加 app UA 的方式。示例：

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

4. 额外的视频播放器

没错，这货还提供了一个视频播放的功能，下面官方的说明:

TBS不仅提供了强大的网页浏览功能，更提供了强大的页面H5视频播放支持，播放器同时支持页面，小窗，全屏播放体验，强大的解码能力，包括mp4，rmvb，flv，avi等26种视频格式支持。

TBS播放器的播放场景不仅局限于H5页面播放，也可以接入一般的视频流链接，比如本地文件，网络的视频流链接。开发者如果想播放一个视频链接，在不自己开发播放器的前提下，一般做法是将视频的播放链接放到一个Intent里面，抛给系统的播放器进行播放，那么当你集成了TBS后，你只需要通过简单的方式接入视频播放调用接口，这样你不需要写任何一句关于播放器的代码，就可以享受一个本地播放器体验，播放视频再不需要Intent来跨App、跨进程的调用了。

第一步，在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>

第二步，调用播放视频的调用接口，通过TbsVideo的静态方法，如下：

//判断当前Tbs播放器是否已经可以使用。
public static boolean canUseTbsPlayer(Context context)

//直接调用播放接口，传入视频流的url
public static void openVideo(Context context, String videoUrl)

//extraData对象是根据定制需要传入约定的信息，没有需要可以传如null
public static void openVideo(Context context, String videoUrl, Bundle extraData)

5. 文件选择器

官方demo中有。简单说一下流程

在WebChromeClient里面有回调openFileChooser、onShowFileChooser方法。

点击了网页的控件就可以回调上面的方法

在回调方法里面我们利用Intent打开文件选择器

然后选择完文件后在onActivityResult回调里面进行获取，然后利用ValueCallback<Uri>或者ValueCallback<Uri[]>的onReceiveValue进行返回路径给网页。

注意的地方

1. cookie的调整

com.tencent.smtt.sdk.CookieManager和com.tencent.smtt.sdk.CookieSyncManager的相关接口的调用，在接入SDK后，需要放到创建X5的WebView之后（也就是X5内核加载完成）进行；否则，cookie的相关操作只能影响系统内核。

2. WebView宽高的获取

由于SDK WebView所提供的WebView类，是对系统WebView的聚合包装，所以：获取系统内核的WebView或者 x5内核的WebView的宽高需要这样：

webView.getView().getWidth();

3. X5内核

开始说了，这个腾讯的WebView使用的是自己的X5内核。

如果你的手机有安装QQ、微信、QQ浏览器等等QQ的产品，这个内核就已经是已经安装到手机上了。

如果都没有，在Application初始化调用initX5Environment方法的时候，会进行离线安装，失败就会自动切换自用自带内核。

如果都都没有，而且手机没有链接网络，需要离线，这时候需要打包内核进app，app包增大20M左右, X5内核在哪里下载？联系这货: http://bbs.mb.qq.com/user/196302

那怎么判断他是使用X5内核还是自带内核呢？
显示网页文字时，可通过长按选择文字的标识判断，如下水滴状选择效果是x5webview的标志：

4. 64位手机的兼容

x5内核暂时不提供64位的so文件,在64位手机上需要让AP以32位模式运行。具体操作如下：

如果使用是Eclipse
需要将所有的.so文件都放置在so加载目录：lib/armeabi文件夹下(没有该目录则新建一个，AP中没有使用到.so文件则需要拷贝任意一个32位的so文件到该目录下,如果没有合适的so可以到官网http://x5.tencent.com/tbs/sdk.html下载官网“SDK接入示例“,拷贝对应目录下的liblbs.so文件)，lib文件夹下不要有其他以”armeabi“开头的文件夹。

如果使用的是Android Studio:

1、打开对应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接入示例,拷贝对应目录下的liblbs.so文件，到你的armeabi目录下，具体可以参考他的栗子。
这里写图片描述

这个链接查看64位的手机，你没有64位的手机的话，可以看看下面有什么手机是64位的，去优测里面进行测试
http://product.pconline.com.cn/mobile/qg/c6427_c14390/s5.shtml

5. 混淆

jar包本来就已经是混淆好的了，如果你打包时候没有添加规则再混淆一遍的话，就会无法使用x5内核了。所以需要添加混淆规则：

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

解压后用文本编辑器打开，复制里面的内容到你项目的proguard-rules.pro混淆文件即可。

简单包装

如果在项目中使用，一般来说最好是封装多一层。

防止和原生的WebView搞混
有什么问题，一改全改。
可以添加一些功能，例如进度条等。

这里给一个简单加进度条的封装，在项目中使用的话，你在布局文件里面使用路径+ProgressWebview即可

public class ProgressWebview extends WebView {

    private ProgressBar progressbar;  //进度条

    private int progressHeight = 10;  //进度条的高度，默认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);

        //创建进度条
        progressbar = new ProgressBar(context, null,
                android.R.attr.progressBarStyleHorizontal);
        //设置加载进度条的高度
        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);

        //添加进度到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());
    }



    //进度显示
    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) {

            //在当前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;
    }

    //进度回调接口
    public interface onWebViewListener {
        void onProgressChange(WebView view, int newProgress);

        void onPageFinish(WebView view);
    }

}