- 支持处理js的交互逻辑，方便快捷，并且无耦合，操作十分简单；
- 暴露进度条加载进度，结束，以及异常状态(分多种状态：无网络，404，onReceivedError，sslError异常等)listener给开发者；
- 支持视频播放，可以切换成全频播放视频，可旋转屏幕，暴露视频操作监听listener给开发者；
- 集成了腾讯x5的WebView，最新版本，功能强大；
- 支持打开文件的操作，比如打开相册，然后选中图片上传，兼容版本(5.0)；
- 支持加载word，xls，ppt，pdf，txt等文件文档，使用方法十分简单；
- 支持设置仿微信加载H5页面进度条，完全无耦合，操作简单，极大提高用户体验；
- 支持用户按照规范自定义WebViewClient和WebChromeClient，不影响js通信；
- 汇集绝大多数问题，以及解决方案，是学习和深入理解webView的一个比较全面的案例；
1.3 相关类介绍说明
- BridgeHandler 接口，主要处理消息回调逻辑
- BridgeUtil 工具类，静态常量，以及获取js消息的一些方法，final修饰
- BridgeWebView 自定义WebView类，主要处理与js之间的消息
- CallBackFunction js回调
- DefaultHandler 默认的BridgeHandler
- InterWebListener 接口，web的接口回调，包括常见状态页面切换【状态页面切换】，进度条变化【显示和进度监听】等
- Message 自定义消息Message实体类
- ProgressWebView 自定义带进度条的webView
- WebViewJavascriptBridge js桥接接口
- X5WebChromeClient 自定义x5的WebChromeClient，处理进度监听，title变化，以及上传图片，后期添加视频处理逻辑
- X5WebUtils 工具类，初始化腾讯x5浏览器webView，及调用该类init方法
- X5WebView 可以使用这个类，方便统一初始化WebSettings的一些属性，如果不用这里的，想单独初始化setting属性，
也可以直接使用BridgeWebView - X5WebViewClient 自定义x5的WebViewClient，如果要自定义WebViewClient必须要集成此类，一定要继承该类，因为注入js监听是在该类中操作的
- WebProgress 仿微信加载H5页面的WebView进度条
1.4 WebView基础知识点
- 01.常用的基础介绍
- 02.Android调用Js
- 03.Js调用Android
- 04.WebView.loadUrl(url)流程
- 05.js的调用时机分析
- 06.清除缓存数据方式有哪些
- 07.如何使用DeepLink
- 08.为什么WebView那么难搞
- 09.如何处理加载错误
- 10.应用被作为第三方浏览器打开
- 11.理解WebView独立进程
- 12.使用外部浏览器下载
- 13.tel,sms等协议用法
- 更多内容看wiki
02.如何使用
2.1 如何引入
implementation ‘cn.yc:WebViewLib:1.2.0’
2.2 最简单使用
X5WebUtils.init(this);
<可以使用ProgressWebView
android:id="@+id/web_view"
android:layout_width=“match_parent”
android:layout_height=“match_parent”
android:scrollbarSize=“3dp” />
//主要是在X5WebViewClient和X5WebChromeClient已经做了很多常见的逻辑处理，如果不满足你使用，可以如下这样写
MyX5WebViewClient webViewClient = new MyX5WebViewClient(webView, this);
webView.setWebViewClient(webViewClient);
MyX5WebChromeClient webChromeClient = new MyX5WebChromeClient(this);
webView.setWebChromeClient(webChromeClient);
private class MyX5WebViewClient extends X5WebViewClient {
public MyX5WebViewClient(BridgeWebView webView, Context context) {
super(webView, context);
}
//重写你需要的方法即可
}
private class MyX5WebChromeClient extends X5WebChromeClient{
public MyX5WebChromeClient(Activity activity) {
super(activity);
}
//重写你需要的方法即可
}
- 针对类似购物的商品详情页面的webView
- 当WebView在最顶部或者最底部的时候，不消费事件，则可以使用VerticalWebView
2.3 常用api
mWebView.getX5WebChromeClient().setWebListener(interWebListener);
private InterWebListener interWebListener = new InterWebListener() {
@Override
public void hindProgressBar() {
pb.setVisibility(View.GONE);
}
@Override
public void showErrorView(@X5WebUtils.ErrorType int type) {
//设置自定义异常错误页面
}
@Override
public void startProgress(int newProgress) {
//该方法是是监听进度条进度变化的逻辑
pb.setProgress(newProgress);
}
@Override
public void showTitle(String title) {
//该方法是监听h5中title
}
};
x5WebChromeClient = x5WebView.getX5WebChromeClient();
x5WebChromeClient.setVideoWebListener(new VideoWebListener() {
@Override
public void showVideoFullView() {
//视频全频播放时监听
}
@Override
public void hindVideoFullView() {
//隐藏全频播放，也就是正常播放视频
}
@Override
public void showWebView() {
//显示webView
}
@Override
public void hindWebView() {
//隐藏webView
}
});
//X5WebView中
//设置是否开启密码保存功能，不建议开启，默认已经做了处理，存在盗取密码的危险
mWebView.setSavePassword(false);
//是否开启软硬件加速
mWebView.setOpenLayerType(false);
//获取x5WebChromeClient对象
x5WebChromeClient = mWebView.getX5WebChromeClient();
//获取x5WebViewClient对象
x5WebViewClient = mWebView.getX5WebViewClient();
-
关于如何使用仿微信加载H5页面进度条
-
前端页面时受到网路环境，页面内容大小的影响有时候会让用户等待很久。显示一个加载进度条可以说很大程度上提升用户的体验。
private WebProgress pb;
//显示进度条
pb.show();
//设置进度条过度颜色
pb.setColor(Color.BLUE,Color.RED);
//设置单色进度条
pb.setColor(Color.BLUE);
//为单独处理WebView进度条
pb.setWebProgress(newProgress);
//进度完成后消失
pb.hide();
//同步cookie
X5WebUtils.syncCookie(this,“url”,cookieList);
//清除cookie
X5WebUtils.removeCookie(this);
2.4 使用建议
-
优化一下相关的操作
-
关于设置js支持的属性
@Override
public void onResume() {
super.onResume();
if (mWebView != null) {
mWebView.getSettings().setJavaScriptEnabled(true);
}
}
@Override
protected void onStop() {
super.onStop();
if (mWebView != null) {
mWebView.getSettings().setJavaScriptEnabled(false);
}
}
- 关于destroy销毁逻辑
@Override
protected void onDestroy() {
try {
if (webView != null) {
webView.stopLoading();
webView.destroy();
webView = null;
}
} catch (Exception e) {
Log.e(“X5WebViewActivity”, e.getMessage());
}
super.onDestroy();
}
2.5 关于web页面异常状态区分类型
@Override
public void showErrorView(@X5WebUtils.ErrorType int type) {
switch (type){
//没有网络
case X5WebUtils.ErrorMode.NO_NET:
break;
//404，网页无法打开
case X5WebUtils.ErrorMode.STATE_404:
break;
//onReceivedError，请求网络出现error
case X5WebUtils.ErrorMode.RECEIVED_ERROR:
break;
//在加载资源时通知主机应用程序发生SSL错误
case X5WebUtils.ErrorMode.SSL_ERROR:
break;
default:
break;
}
}
2.6 该库流程图
- java调用js的流程图
- 第一步操作：mWebView.callHandler(“functionInJs”, “小杨逗比”, new CallBackFunction() {//这里面是回调});
- 第二步操作：将handlerName，data，responseCallback，封装到Message对象中，然后开始分发数据，最后webView执行_handleMessageFromNative；
- 第三步操作：去WebViewJavascriptBridge.js类中找到_handleMessageFromNative方法，js根据"functionInJs"找到对应的js方法并且执行；
- 第四步操作：js把运行结果保存到message对象中，然后添加到js消息队列中；
- 第五步操作：在_dispatchMessageFromNative方法中，可以看到，js向native发送 “消息队列中有消息” 的通知；
- 第六步操作：webView执行js的_fetchQueue（WebViewJavascriptBridge.js类）方法；
- 第七步操作：js把消息队列中的所有消息都一起回传给webView；
- 第八步操作：webView收到所有的消息，一个一个串行处理，注意其中包括 "functionInJs"方法运行的结果的消息；
- js调用Android的流程图
- 第一步操作：mWebView.registerHandler(“toPhone”, new BridgeHandler() { //回调});
- 第二步操作：调用messageHandlers.put(handlerName, handler)，将名称和BridgeHandler对象放到map集合中
- 第三步操作：在shouldOverrideUrlLoading方法中拦截url，与网页约定好一个协议，匹配则执行相应操作，也就是利用WebViewClient接口回调方法拦截url
- 第四步操作：如果是url.startsWith(BridgeUtil.YY_RETURN_DATA)则有数据返回；如果是BridgeUtil.YY_OVERRIDE_SCHEMA则刷新消息队列
- 第五步操作：通过BridgeHandler对象，将data和callBackFunction返回交给开发者
03.js交互操作
3.1 Java调用js的使用方法
-
代码如下所示，下面updateAttentionStatus代表js这边的方法名称
-
webView.callHandler(“updateAttentionStatus”, …, new CallBackFunction());这是Java层主动调用Js的”updateAttentionStatus”方法。
mWebView.callHandler(“updateAttentionStatus”, attention, new CallBackFunction() {
@Override
public void onCallBack(String data) {
}
});
3.2 js调用java的使用方法
- webView.callHandler(“updateAttentionStatus”, …, new CallBackFunction());这是Java层主动调用Js的”updateAttentionStatus”方法。
mWebView.callHandler(“updateAttentionStatus”, attention, new CallBackFunction() {
@Override
public void onCallBack(String data) {
}
});