Android-X5Web详细集成步骤(原创)

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

Android-X5WebView封装(含Cookie管理、进度监听、适配8.1系统等策略)详情请点击!

文章使用到的官方资料:

腾讯浏览服务

腾讯浏览服务技术指南

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

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

1:什么是腾讯X5Web?

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

2:腾讯X5Web的优点:

腾讯X5宣传优点

3:开始集成

A:集成前准备

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


官方Demo的错误
官方项目导入结构图

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

解决办法

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

buildscript {

repositories{ jcenter() }

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

}

repositories {

maven {url 'http://repo1.maven.org/maven2' }

}

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

X5运行图

B:基本配置

    I:权限配置


权限配置

    II:jar包配置


jar包jniLibs配置

III:项目 build.gradle配置:


配置ndk

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

C:开始使用

首先:将Android系统源码和XML里的系统包和类替换为腾讯X5WebSDK里的包和类,

替换资源

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

其次:初始化设置

Application的配置

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

接着:关于cookie的管理和使用

官方文档告知我们:com.tencent.smtt.sdk.CookieManager和com.tencent.smtt.sdk.CookieSyncManager的相关接口的调用,需要在接入SDK后,放到创建X5的WebView之后(也就是X5内核加载完成)进行;否则,cookie的相关操作只能影响系统内核。

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

Cookie的有效管理

然后:X5Web兼容视频播放的使用

如果有视频播放的需求,需要在享受页面视频的完整播放体验需要在页面的Activity(配置文件)需要声明android:configChanges="orientation|screenSize|keyboardHidden";

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

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

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

最后:建议包装x5webview

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

常见问题:

问题一:

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

解决:在WebChromeClient这个类里面(import com.tencent.smtt.sdk.WebChromeClient ; )有一个监听进度的方法,如下图


监听进度

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

问题二:如何去除滚动条?

解决:通过X5webview的 IX5WebViewExtension类对象,可以帮我们去除滚动条,参考代码如下

去除滚动条

问题三:如何去除广告?

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

1:可以使用Https

2:对加载的url进行简单的判断(可以跟后台讨论设置规则)允许的域名进行放行 其他就拦截,不允许的则拦截

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

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

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

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

Ps:著作权归作者所有,转载请注明作者, 商业转载请联系作者获得授权,非商业转载请注明出处(开头或结尾请添加转载出处,添加原文url地址),文章请勿滥用,也希望大家尊重笔者的劳动成果,谢谢。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,902评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,037评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,978评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,867评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,763评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,104评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,565评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,236评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,379评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,313评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,363评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,034评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,637评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,719评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,952评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,371评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,948评论 2 341

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,275评论 25 707
  • 关于这份调研报告,不是从技术角度深入探索,重点是从产品本身分析,通俗易懂才是重点。主要是为了锻炼平时做技术调研和竞...
    石先阅读 23,218评论 13 48
  • 最基础的使用方法 最简单的布局: 在Activity中使用WebView: 但只是这样的话,在模拟器上是会直接调到...
    HolenZhou阅读 7,775评论 12 33
  • 貌似回想起来,从大学到现在研究生,有五分之一的周末是躺在床上刷剧,睡觉度过的。经常感慨自己在这浪费青春,虚度年华...
    涛涛的小钰钰阅读 278评论 0 0
  • 世界上最难的事,就是要让女人知道打折的东西也是要钱的!刚刚过去的双十一/双十二剁手节,完全成为了女人们的网络购物节...
    QBox阅读 225评论 0 0