AndroidTencentX5WebView集成详解

Android X5WebView 详细集成步骤

本文意在了解掌握并快速集成腾讯X5系统内核&＃xff0c;更好的提高Android与H5在应用上的渲染交互效果&＃xff1b;X5web内核下该如何有效的管理COOKIE&＃xff1b;X5webview下的ndk基本配置说明&＃xff1b;X5webview常见问题等等。

Android-X5WebView封装&＃xff08;含COOKIE管理、进度监听、适配8.1系统等策略&＃xff09;详情请点击&＃xff01;

文章使用到的官方资料&＃xff1a;

腾讯浏览服务

腾讯浏览服务技术指南

腾讯浏览服务接入技术文档

腾讯浏览服务SDK、API、Demo下载

1&＃xff1a;什么是腾讯X5Web&＃xff1f;

移动互联网时代&＃xff0c;Web成为各超级App的通用基础技术。Web浏览不再局限于传统浏览器&＃xff0c;相反已经进入绝大部分App的各类应用场景。越来越多的App基于Hybrid模式开发和部署业务。腾讯浏览服务&＃xff08;TBS&＃xff0c;Tencent Browsing Service&＃xff09;整合腾讯底层浏览技术和腾讯平台资源及能力&＃xff0c;提供整体浏览服务解决方案。腾讯浏览服务面向应用开发商和广大开发者&＃xff0c;提供浏览增强&＃xff0c;内容框架&＃xff0c;广告体系&＃xff0c;H5游戏分发&＃xff0c;大数据等服务&＃xff0c;能够帮助应用开发商大幅改善应用体验&＃xff0c;有效提升开发&＃xff0c;运营&＃xff0c;商业化的效率。传统系统内核(Webview)存在适配成本高、不安全、不稳定、耗流量、速度慢、视频播放差、文件能力差等问题&＃xff0c;这是移动应用开发商在进行Hybrid App开发时普遍面临的难题。腾讯浏览服务基于腾讯X5内核解决方案&＃xff08;包括内核和云服务&＃xff09;&＃xff0c;能够有效解决传统移动web技术面临的普遍问题&＃xff0c;同时能极大扩展应用(Hybrid App)内浏览场景的服务能力。

2&＃xff1a;腾讯X5Web的优点&＃xff1a;

腾讯X5宣传优点

3&＃xff1a;开始集成

A&＃xff1a;集成前准备

个人建议还是首先运行腾讯下腾讯的X5Demo&＃xff0c;不仅对X5有个初步印象&＃xff0c;而且方便对项目中的功能进行筛选使用。下载demo&＃xff0c;导入AS&＃xff08;笔者的Android studio 是3.0版本&＃xff09;导入后&＃xff0c;就报了第一个错误...

官方Demo的错误

官方项目导入结构图

细心的老司机可能一眼就发现了问题&＃xff0c;这里就不多说问题直接给大家提供解决办法&＃xff1a;

解决办法

在项目的 build.gradle里面&＃xff08;绿色区域&＃xff09;按照笔者为大家截图&＃xff08;也就是红色区域&＃xff09;的位置&＃xff0c;在对应区域添加红色段落内代码即可。&＃xff08;代码内容如下&＃xff09;

buildscript {

repositories{ jcenter() }

dependencies{ classpath "com.android.tools.build:gradle:2.3.3" }

}

repositories {

maven {url &＃39;http://repo1.maven.org/maven2&＃39; }

}

按照上面步骤&＃xff0c;等待项目构建完毕以后&＃xff0c;Demo理论上就可以正常运行了。&＃xff08;如果上述方法还是不行那只能说脸黑自行解决咯&＃xff09;项目成功运行后的Demo效果如下&＃xff1a;

X5运行图

B&＃xff1a;基本配置

    I&＃xff1a;权限配置

权限配置

    II&＃xff1a;jar包配置

jar包jniLibs配置

III&＃xff1a;项目 build.gradle配置&＃xff1a;

配置ndk

由于X5暂时不提供64位so文件&＃xff0c;为保证64位手机能正常加载x5内核&＃xff0c;可以在项目依赖中去配置ndk。为什么要配置ndk以及如何配置&＃xff0c;详细请参考 X5Web配置ndk的官方详细说明

C&＃xff1a;开始使用

首先&＃xff1a;将Android系统源码和XML里的系统包和类替换为腾讯X5WebSDK里的包和类&＃xff0c;

替换资源

举个例子就是不要使用android系统的webview&＃xff0c;而是使用腾讯的webview。当然&＃xff0c;具体的替换规则可以参考文章前面的链接&＃xff0c;里面有详细的使用说明。

其次&＃xff1a;初始化设置

Application的配置

在自定义application里面进行x5内核初始化接口&＃xff0c;别忘记了在清单文件里面要配置自定义application。

接着&＃xff1a;关于COOKIE的管理和使用

官方文档告知我们&＃xff1a;com.tencent.smtt.sdk.COOKIEManager和com.tencent.smtt.sdk.COOKIESyncManager的相关接口的调用&＃xff0c;需要在接入SDK后&＃xff0c;放到创建X5的WebView之后&＃xff08;也就是X5内核加载完成&＃xff09;进行&＃xff1b;否则&＃xff0c;COOKIE的相关操作只能影响系统内核。

图下给大家提供了一种COOKIE在X5的使用策略&＃xff08;也是笔者的另一篇文章&＃xff09;需要了解的可以移步下面链接。

COOKIE的有效管理

然后&＃xff1a;X5Web兼容视频播放的使用

如果有视频播放的需求&＃xff0c;需要在享受页面视频的完整播放体验需要在页面的Activity&＃xff08;配置文件&＃xff09;需要声明android:configChanges&＃61;"orientation|screenSize|keyboardHidden"&＃xff1b;

网页中的视频进入屏幕的时候&＃xff0c;可能出现闪烁的情况&＃xff0c;需要如下设置&＃xff1a;Activity在onCreate时需要设置&＃xff1a;getWindow().setFormat(PixelFormat.TRANSLUCENT);&＃xff08;这个对宿主没什么影响&＃xff0c;建议声明&＃xff09;

值得一提的是&＃xff0c;以下接口禁止(直接或反射)调用&＃xff0c;避免视频画面无法显示&＃xff1a;

webview.setLayerType() &＃xff1b; webview.setDrawingCacheEnabled(true);

最后&＃xff1a;建议包装x5webview

如何包装&＃xff1f;也就是自定义x5webview&＃xff0c;建议&＃xff1a;可以先花一点时间看一下官方的Demo&＃xff0c;然后根据自身业务集成使用。当然&＃xff0c;笔者自己也封装了一些最基本的功能 X5WebView的封装 大家可以参考下&＃xff08;写得不好的话请见谅&＃xff09;

常见问题&＃xff1a;

问题一&＃xff1a;

如何拿到X5webview的加载进度&＃xff0c;比如在Html加载前&＃xff0c;客户端这边需要展示一张图片&＃xff0c;当加载完毕以后这张图片就隐藏&＃xff0c;然后显示需要展示的html内容&＃xff1f;

解决&＃xff1a;在WebChromeClient这个类里面&＃xff08;import com.tencent.smtt.sdk.WebChromeClient ; &＃xff09;有一个监听进度的方法&＃xff0c;如下图

监听进度

然后通过 setWebChromeClient( webChromeClient );即可完成进度的监听。

问题二&＃xff1a;如何去除滚动条&＃xff1f;

解决&＃xff1a;通过X5webview的 IX5WebViewExtension类对象&＃xff0c;可以帮我们去除滚动条&＃xff0c;参考代码如下

去除滚动条

问题三&＃xff1a;如何去除广告&＃xff1f;

使用的小伙伴反馈说H5上面有广告&＃xff0c;这里给两种思路去解决&＃xff0c;如果有更好的方法请直接在评论区提出&＃xff1a;

1&＃xff1a;可以使用Https

2&＃xff1a;对加载的url进行简单的判断&＃xff08;可以跟后台讨论设置规则&＃xff09;允许的域名进行放行 其他就拦截&＃xff0c;不允许的则拦截

点击这里了解更多的X5问题大杂烩 X5问题大汇总

腾讯X5的基本介绍和使用就到这里&＃xff0c;当然可能有很多问题还没有发现&＃xff0c;笔者在项目中如果有遇到任何问题会及时更新文章&＃xff0c;各位看官有任何问题请直接联系笔者或者评论区下提问。当然也希望各位老铁多多点赞支持&＃xff0c;如果写的不好还请大家多多包涵。

说完了基本使用&＃xff0c;我们再谈封装&＃xff0c;关于X5WebView的基本封装&＃xff0c;大家可以参考我的另一篇文章 X5WebView封装 里面含源码及使用说明&＃xff0c;望大家多多支持。

如果这篇文章对你有帮助&＃xff0c;希望各位看官留下宝贵的star&＃xff0c;谢谢。

Ps:非商业转载&＃xff0c;个人记录使用&＃xff0c;如有侵权告知即删 &＃xff1a;https://blog.csdn.net/sinat_35241409/article/details/79098724