锐客网

  1. 首页 > 睿知 > it技术 > >

Android在项目中接入腾讯TBS浏览器WebView的教程与注意的地方

androidIT知识浏览器

金鞍玉勒寻芳客，未信我庐别有春。这篇文章主要讲述Android在项目中接入腾讯TBS浏览器WebView的教程与注意的地方相关的知识，希望能为你提供帮助。
腾讯TBS浏览器服务我们都知道，在android开发中，经常会用到Webview,而且WebView是出了名的坑的，各种bug。这时候腾讯老哥站出来了，搞了一个TBS浏览器服务这个东西。 说得这么屌，其实就是一个webView控件，然后解析解析网页的内核是他自己做的，叫X5内核(系统原生的WebView用的是WebKit内核)，所以我们开发者用的时候，主要就是用这个com.tencent.smtt.sdk.WebView控件
当然这个控件有很多功能，当然也有些要注意的地方。
官网地址:http://x5.tencent.com
1. 特殊功能:

  • 速度快：相比系统webview的网页打开速度有30+%的提升；
  • 省流量：使用云端优化技术使流量节省20+%；
  • 更安全：安全问题可以在24小时内修复；
  • 更稳定：经过亿级用户的使用考验，CRASH率低于0.15%；
  • 兼容好：无系统内核的碎片化问题，更少的兼容性问题；
  • 体验优：支持夜间模式、适屏排版、字体设置等浏览增强功能；
  • 功能全：在html5、ES6上有更完整支持；
  • 更强大：集成强大的视频播放器，支持视频格式远多于系统webview；
  • 视频和文件格式的支持x5内核多于系统内核
  • 防劫持是x5内核的一大亮点
2. 运行环境
  • 【Android在项目中接入腾讯TBS浏览器WebView的教程与注意的地方】手机ROM版本高于或等于2.2版本
  • 手机RAM大于500M，该RAM值通过手机 /proc/meminfo 文件的MemTotal动态获取
注：如果不满足上述条件，SDK会自动切换到系统WebView，SDK使用者不用关心该切换过程。
3. SDK尺寸指标
  • SDK提供的JAR包约293K
4. 原生和X5 WebView的类对应表
系统内核 SDK内核
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. 导Jar包去这个网址： 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. 自定义UAUA是什么？
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的标志：
Android在项目中接入腾讯TBS浏览器WebView的教程与注意的地方

文章图片

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目录下，具体可以参考他的栗子。
Android在项目中接入腾讯TBS浏览器WebView的教程与注意的地方

文章图片

这个链接查看64位的手机，你没有64位的手机的话，可以看看下面有什么手机是64位的，去优测里面进行测试
http://product.pconline.com.cn/mobile/qg/c6427_c14390/s5.shtml
5. 混淆jar包本来就已经是混淆好的了，如果你打包时候没有添加规则再混淆一遍的话，就会无法使用x5内核了。所以需要添加混淆规则：
下载混淆文件：http://res.imtt.qq.com/TES/proguard_20160822.zip
解压后用文本编辑器打开，复制里面的内容到你项目的proguard-rules.pro混淆文件即可。
简单包装如果在项目中使用，一般来说最好是封装多一层。
- 防止和原生的WebView搞混
- 有什么问题，一改全改。
- 可以添加一些功能，例如进度条等。
这里给一个简单加进度条的封装，在项目中使用的话，你在布局文件里面使用路径+ProgressWebview即可
public class ProgressWebview extends WebView {private ProgressBar progressbar; //进度条private int progressHeight = 10; //进度条的高度，默认10pxpublic 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); }}












    推荐阅读


    上一篇：Android 成功 使用GPS获取当前地理位置（解决getLastKnownLocation 返回 null）

    下一篇：Android 开发 Tip 6 -- Spinner