Android在项目中接入腾讯TBS浏览器WebView的教程及注意事项

简介: 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. 运行环境

  • 手机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包

去这个网址: 腾讯浏览服务-SDK下载 ,看到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或者ValueCallbackonReceiveValue进行返回路径给网页。


注意的地方

1. cookie的调整

com.tencent.smtt.sdk.CookieManagercom.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内核在哪里下载? 联系这货: 404

那怎么判断他是使用X5内核还是自带内核呢?

显示网页文字时,可通过长按选择文字的标识判断,如下水滴状选择效果是x5webview的标志:

image.png

4. 64位手机的兼容

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

如果使用是Eclipse

需要将所有的.so文件都放置在so加载目录:lib/armeabi文件夹下(没有该目录则新建一个,AP中没有使用到.so文件则需要拷贝任意一个32位的so文件到该目录下,如果没有合适的so可以到官网腾讯浏览服务-SDK下载下载官网“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、打开腾讯浏览服务-SDK下载,下载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);
    }
}


相关文章
|
27天前
|
Android开发 数据安全/隐私保护 虚拟化
安卓手机远程连接登录Windows服务器教程
安卓手机远程连接登录Windows服务器教程
55 4
|
1月前
|
Android开发
布谷语音软件开发:android端语音软件搭建开发教程
语音软件搭建android端语音软件开发教程!
|
2月前
|
程序员 开发工具 Android开发
Android|WebView 禁止长按,限制非白名单域名的跳转层级
如何限制 WebView 仅域名白名单网址能随意跳转,并禁用长按选择文字。
43 2
|
29天前
|
Web App开发 API Windows
取接口访问者信息[IP,浏览器,操作系统]免费API接口教程
此API用于获取访问者的IP地址、浏览器和操作系统信息,支持70多种浏览器和操作系统。通过POST或GET请求至`https://cn.apihz.cn/api/ip/getapi.php`,需提供用户ID和KEY。返回结果包括状态码、消息、IP、浏览器和操作系统信息。示例:{&quot;code&quot;:200,&quot;ip&quot;:&quot;175.154.88.178&quot;,&quot;browser&quot;:&quot;Chrome&quot;,&quot;os&quot;:&quot;Windows 10&quot;}。详情见官网文档。
|
5月前
|
数据安全/隐私保护
Dolphin指纹浏览器隐私保护升级:IPXProxy代理IP配置实战教程
Dolphin指纹浏览器采用先进的技术,让用户在一台电脑上就可以处理数百个配置文件。每一个配置文件都有着独特的浏览器指纹,极大的保障了用户上网的安全性。并且搭配代理IP一起,还能给每个文件配置不同的IP地址,让网络活动可以畅通无阻。下面给大家带来Dolphin指纹浏览器和IPXProxy代理IP配置详细教程
|
5月前
|
Web App开发 XML Java
《手把手教你》系列基础篇(九十六)-java+ selenium自动化测试-框架之设计篇-跨浏览器(详解教程)
【7月更文挑战第14天】这篇教程介绍了如何使用Java和Selenium构建一个支持跨浏览器测试的自动化测试框架。设计的核心是通过读取配置文件来切换不同浏览器执行测试用例。配置文件中定义了浏览器类型(如Firefox、Chrome)和测试服务器的URL。代码包括一个`BrowserEngine`类,它初始化配置数据,根据配置启动指定的浏览器,并提供关闭浏览器的方法。测试脚本`TestLaunchBrowser`使用`BrowserEngine`来启动浏览器并执行测试。整个框架允许在不同浏览器上运行相同的测试,以确保兼容性和一致性。
106 3
|
6月前
|
JavaScript 前端开发
WebView2 控件(基于 Microsoft Edge (Chromium) 的嵌入式浏览器控件),获取网页加载后的标题
在使用 WebView2 控件(基于 Microsoft Edge (Chromium) 的嵌入式浏览器控件)时,要获取网页加载后的标题,可以监听 WebView2 的 NavigationCompleted 事件。这个事件被触发时,表示导航已完成,此时执行JavaScript代码可以安全地获取网页的标题。
WebView2 控件(基于 Microsoft Edge (Chromium) 的嵌入式浏览器控件),获取网页加载后的标题
|
6月前
|
安全 JavaScript 前端开发
kotlin开发安卓app,JetPack Compose框架,给webview新增一个按钮,点击刷新网页
在Kotlin中开发Android应用,使用Jetpack Compose框架时,可以通过添加一个按钮到TopAppBar来实现WebView页面的刷新功能。按钮位于右上角,点击后调用`webViewState?.reload()`来刷新网页内容。以下是代码摘要:
|
6月前
|
JavaScript 前端开发 Android开发
kotlin安卓在Jetpack Compose 框架下使用webview , 网页中的JavaScript代码如何与native交互
在Jetpack Compose中使用Kotlin创建Webview组件,设置JavaScript交互:`@Composable`函数`ComposableWebView`加载网页并启用JavaScript。通过`addJavascriptInterface`添加`WebAppInterface`类,允许JavaScript调用Android方法如播放音频。当页面加载完成时,执行`onWebViewReady`回调。
|
5月前
|
Web App开发 JavaScript 前端开发
Android端使用WebView注入一段js代码实现js调用android
Android端使用WebView注入一段js代码实现js调用android
132 0