android 如何简单集成腾讯TBS服务优化自带WebView

前言最近项目用webView有点多有一些相关展示是第三方的H5页面他们文档上要求集成腾讯的TBS 如果为Android接入，建议内置统一的webview版本。自带webview可能会出现机型兼容问题。可以使用腾讯TBS服务 !看下效果图为什么集成TBS?X5内核相对于系统webview，具有下述明显优势：速度快：相比系统webview的网页打开速度有30+%的提升；省流量：使用云端优化技术使流

吕氏春秋i

1376人浏览 · 2020-07-17 16:36:46

吕氏春秋i · 2020-07-17 16:36:46 发布

前言

最近项目用webView有点多有一些相关展示是第三方的H5页面
他们文档上要求集成腾讯的TBS 如果为Android接入，建议内置统一的webview版本。自带webview可能会出现机型兼容问题。可以使用腾讯TBS服务 !

看下效果图

gif

为什么集成TBS?

X5内核相对于系统webview，具有下述明显优势：

速度快：相比系统webview的网页打开速度有30+%的提升；
省流量：使用云端优化技术使流量节省20+%；
更安全：安全问题可以在24小时内修复；
更稳定：经过亿级用户的使用考验，CRASH率低于0.15%；
兼容好：无系统内核的碎片化问题，更少的兼容性问题；
体验优：支持夜间模式、适屏排版、字体设置等浏览增强功能；
功能全：在Html5、ES6上有更完整支持；
更强大：集成强大的视频播放器，支持视频格式远多于系统webview；
视频和文件格式的支持x5内核多于系统内核
防劫持是x5内核的一大亮点
因此确实可以看到这个内核的优点是很多的，还有很多其它的优点，我也不一一解释了，现在我们来看看怎么做吧。笔者在做的时候也参见了很多人的博客，但是他们博客上的代码基本无法进行成功运行，因此下面这些是本人经过改进后的版本，是绝对可以进行运行的。

集成TBS流程

第一步：下载TBS SDK 腾讯浏览服务-SDK下载

第二步：将下载下来的SDK jar包复制到我们的项目工程下libs目录下

第三步：将jar包引入项目中

引入后看build.gradle 是否成功

代码实现

XML

<?xml version="1.0" encoding="utf-8"?>
   xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/view_top"
        android:layout_width="match_parent"
        android:layout_height="24dp"
        android:background="@color/colorNavigationBar"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="0dp"
        android:layout_height="@dimen/toolbar_size"
        android:background="@drawable/jianbiandi_jiayouzhan"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/view_top"
        app:navigationIcon="@drawable/login_return" />


    <com.tencent.smtt.sdk.WebView
        android:id="@+id/web_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:scrollbars="none"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/toolbar" />

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

创建Application全局唯一

//初始化TBS

  @Override
    public void onCreate() {
        super.onCreate();
        instance = this;
        SharedPreferenceUtil.init(this);
        cartMap = new HashMap<>();
        initX5();
    }

    private void initX5() {
        //x5內核初始化回调
        QbSdk.PreInitCallback cb = new QbSdk.PreInitCallback() {
            @Override
            public void onViewInitFinished(boolean arg0) {
                //x5內核初始化完成的回调，为true表示x5内核加载成功，
                否则表示x5内核加载失败，会自动切换到系统内核。
                Log.e("app", " onViewInitFinished is ======== >>> " + arg0);
            }

            @Override
            public void onCoreInitFinished() {

            }
        };
        //x5内核初始化接口
        QbSdk.initX5Environment(getApplicationContext(), cb);
    }

是否启用X5内核看Log打印是否回调

编写WebView类

com.tencent.smtt.sdk.WebView 配置和Android 自带的WebView配置一样
该类中的注释很清楚我就直接copy代码了有问题留言指明!谢谢

package com.fulloil_2.app.main;

import android.graphics.Bitmap;
import android.os.Build;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.WindowManager;
import android.widget.ProgressBar;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;

import com.fulloil_2.app.R;
import com.fulloil_2.app.utils.ActivityUtils;
import com.fulloil_2.app.utils.StatusBarUtils;
import com.fulloil_2.app.utils.ToastUtils;
import com.tencent.smtt.sdk.CookieSyncManager;
import com.tencent.smtt.sdk.QbSdk;
import com.tencent.smtt.sdk.WebSettings;
import com.tencent.smtt.sdk.WebView;
import com.tencent.smtt.sdk.WebViewClient;

import java.util.Objects;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.Unbinder;

/**
 * @author lyudony
 * @date 2020/7/17.
 * description：
 */
public class XiaoJuWebView extends AppCompatActivity {
    private static final String TAG = "WebViewMallActivity";
    private Unbinder mUnbinder;
    @BindView(R.id.toolbar)
    Toolbar mToolbar;
    @BindView(R.id.web_view)
    com.tencent.smtt.sdk.WebView mWebView;
    @BindView(R.id.progressBar)
    ProgressBar mProgressBar;

    private String xiaojuH5Url;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_xiaoju_webview);
        StatusBarUtils.transparencyBar(this);
        mUnbinder = ButterKnife.bind(this);
        setSupportActionBar(mToolbar);
        Objects.requireNonNull(getSupportActionBar()).setDisplayShowTitleEnabled(false);
        xiaojuH5Url = (String) getIntent().getSerializableExtra(HomeFragment.EXTRA_XIAOJU_H5_URL);
        ActivityUtils.addToolbarTitle(this, mToolbar, "油站详情");
        mToolbar.setNavigationOnClickListener(v -> onBackPressed());
        //初始化腾讯的TBS
        initWebView();
        QbSdk.initX5Environment(this, null);
        String url = xiaojuH5Url;
        //启用硬件加速
        initHardwareAccelerate();
        mWebView.loadUrl(url);
        //清理缓存和历史（非必须）
        mWebView.clearCache(true);
        mWebView.clearHistory();

    }

    //启用硬件加速：由于硬件加速自身并非完美无缺，
    // 所以Android提供选项来打开或者关闭硬件加速，默认是关闭。
    // 可以在4个级别上打开或者关闭硬件加速
    private void initHardwareAccelerate() {
        try {
            if (Build.VERSION.SDK_INT >= 11) {
                //Window级别硬件加速
                getWindow()
                        .setFlags(WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,
                                WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);
            }
        } catch (Exception e) {
        }

    }

    private void initWebView() {
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);//支持js
        //设置可以访问文件
        mWebView.getSettings().setAllowFileAccess(true);
        //设置支持缩放
        mWebView.getSettings().setBuiltInZoomControls(true);
        mWebView.getSettings().setUseWideViewPort(true);
        mWebView.getSettings().setLoadWithOverviewMode(true);
        mWebView.getSettings().setLoadsImagesAutomatically(true); //支持自动加载图片
        mWebView.setVerticalScrollBarEnabled(false);
        mWebView.setHorizontalScrollBarEnabled(false);
        mWebView.getSettings().setAppCacheEnabled(true);
        mWebView.getSettings().setDomStorageEnabled(true);
        mWebView.getSettings().supportMultipleWindows();
        mWebView.getSettings().setAllowContentAccess(true);
        mWebView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
        mWebView.getSettings().setSavePassword(true);
        mWebView.getSettings().setSaveFormData(true);
        mWebView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            webSettings.setMixedContentMode(android.webkit.WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
        }
//        myWebView.requestFocusFromTouch();//如果webView中需要用户手动输入用户名、密码或其他，则webview必须设置支持获取手势焦点
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //允许js弹窗
        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView webView, String s) {
                webView.loadUrl(s);
                return true;
            }
        });

        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                mProgressBar.setVisibility(View.GONE);
            }

            @Override
            public void onPageStarted(WebView webView, String s, Bitmap bitmap) {
                super.onPageStarted(webView, s, bitmap);
                ToastUtils.showLong(XiaoJuWebView.this, "正在加载，请稍后");
                mProgressBar.setVisibility(View.VISIBLE);
            }

        });

        // 注意一定要放在WebView加载后，不然只会管理内核的缓存
        CookieSyncManager.createInstance(getApplication());
        CookieSyncManager.getInstance().sync();

    }

    //点击回退按钮不是退出应用程序，而是返回上一个页面
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        //如果不做任何处理，浏览网页，点击系统“Back”键，整个Browser会调用finish()而结束自身，
        // 如果希望浏览的网 页回退而不是推出浏览器，需要在当前Activity中处理并消费掉该Back事件。
        if (keyCode == KeyEvent.KEYCODE_BACK && mWebView.canGoBack()) {
            mWebView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);

    }


    @Override
    protected void onResume() {
        super.onResume();
        mWebView.onResume();
    }

    @Override
    protected void onPause() {
        super.onPause();
        mWebView.onPause();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        mUnbinder.unbind();
        if (this.mWebView != null) {
            mWebView.destroy();
        }
    }

}