腾讯的x5开源库的优势：提高webView开发效率，大概要节约你百分之六十的时间成本。该案例支持处理js的交互逻辑且无耦合、同时暴露进度条加载进度、可以监听异常error状态、支持视频播放并且可以全频、支持加载word，xls，ppt，pdf，txt等文件文档、发短信、打电话、发邮件、打开文件操作上传图片、唤起原生App、x5库为最新版本，功能强大。
那么我们就来使用一下吧
导入依赖库
implementation 'cn.yc:WebViewLib:1.1.2'
最简单使用
- 项目初始化
X5WebUtils.init(this);
- 最普通使用，需要自己做手动设置setting相关属性
<BridgeWebView
android:id="@+id/web_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbarSize="3dp" />
- 也可以使用X5WebView，已经做了常见的setting属性设置
<X5WebView
android:id="@+id/web_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbarSize="3dp" />
- 如果想有带进度的，可以使用ProgressWebView可以使用ProgressWebView
<ProgressWebView
android:id="@+id/web_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbarSize="3dp" />
常用api
- 关于web的接口回调，包括常见状态页面切换，进度条变化等监听处理
mWebView.getX5WebChromeClient().setWebListener(interWebListener);
private InterWebListener interWebListener = new InterWebListener() {
@Override
public void hindProgressBar() {
pb.setVisibility(View.GONE);
}
@Override
public void showErrorView() {
//设置自定义异常错误页面
}
@Override
public void startProgress(int newProgress) {
pb.setProgress(newProgress);
}
};
具体的X5WebView的用法(带进度条)
public class Two_Activity extends AppCompatActivity {
private X5WebView mXView;
private ProgressBar mPb;
private QbSdk.PreInitCallback cb;
private static final String StringURL ="https://www.baidu.com/";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_two_);
initView();
}
private void initView() {
mXView = (X5WebView) findViewById(R.id.x_view);
mXView.getX5WebChromeClient().setWebListener(interWebListener);
mPb = (ProgressBar) findViewById(R.id.pb);
initLoad();
}
private void initLoad() {
cb = new QbSdk.PreInitCallback() {
@Override
public void onCoreInitFinished() {
}
@Override
public void onViewInitFinished(boolean b) {
//x5內核初始化完成的回调，为true表示x5内核加载成功，否则表示x5内核加载失败，会自动切换到系统内核。
Log.e("tag", " onViewInitFinished is " + b);
}
};
//x5内核初始化接口
QbSdk.initX5Environment(getApplicationContext(), cb);
mXView.loadUrl(StringURL);
}
private InterWebListener interWebListener = new InterWebListener() {
@Override
public void hindProgressBar() {
mPb.setVisibility(View.GONE);
}
@Override
public void showErrorView() {
//设置自定义异常错误页面
Toast.makeText(Two_Activity.this, "未知错误", Toast.LENGTH_SHORT).show();
}
@Override
public void startProgress(int newProgress) {
mPb.setProgress(newProgress);
}
};
}
- 关于视频播放的时候，web的接口回调，主要是视频相关回调，比如全频，取消全频，隐藏和现实webView
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
}
});
使用建议
- 优化一下相关的操作 关于设置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();
}
js调用（如何使用项目js调用）
- 代码如下所示，下面中的jsname代表的是js这边提供给客户端的方法名称
mWebView.registerHandler("jsname", new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
}
});
- 如何回调数据给web那边
function.onCallBack("回调数据");
js的调用时机分析
- onPageFinished()或者onPageStarted()方法中注入js代码
做过WebView开发，并且需要和js交互，大部分都会认为js在WebViewClient.onPageFinished()方法中注入最合适，此时dom树已经构建完成，页面已经完全展现出来。但如果做过页面加载速度的测试，会发现WebViewClient.onPageFinished()方法通常需要等待很久才会回调（首次加载通常超过3s），这是因为WebView需要加载完一个网页里主文档和所有的资源才会回调这个方法。
能不能在WebViewClient.onPageStarted()中注入呢？答案是不确定。经过测试，有些机型可以，有些机型不行。在WebViewClient.onPageStarted()中注入还有一个致命的问题——这个方法可能会回调多次，会造成js代码的多次注入。
从7.0开始，WebView加载js方式发生了一些小改变，官方建议把js注入的时机放在页面开始加载之后。
WebViewClient.onProgressChanged()方法中注入js代码
WebViewClient.onProgressChanged()这个方法在dom树渲染的过程中会回调多次，每次都会告诉我们当前加载的进度。
在这个方法中，可以给WebView自定义进度条，类似微信加载网页时的那种进度条
如果在此方法中注入js代码，则需要避免重复注入，需要增强逻辑。可以定义一个boolean值变量控制注入时机
那么有人会问，加载到多少才需要处理js注入逻辑呢？
正是因为这个原因，页面的进度加载到80%的时候，实际上dom树已经渲染得差不多了，表明WebView已经解析了标签，这时候注入一定是成功的。在WebViewClient.onProgressChanged()实现js注入有几个需要注意的地方：
1 上文提到的多次注入控制，使用了boolean值变量控制
2 重新加载一个URL之前，需要重置boolean值变量，让重新加载后的页面再次注入js
3 如果做过本地js，css等缓存，则先判断本地是否存在，若存在则加载本地，否则加载网络js
4 注入的进度阈值可以自由定制，理论上10%-100%都是合理的，不过建议使用了75%到90%之间可以。
问题反馈
视频播放宽度超过屏幕
- 视频播放宽度比webView设置的宽度大，超过屏幕：这个时候可以设置ws.setLoadWithOverviewMode(false);
x5加载office资源
- 关于加载word，pdf，xls等文档文件注意事项：Tbs不支持加载网络的文件，需要先把文件下载到本地，然后再加载出来
- 还有一点要注意，在onDestroy方法中调用此方法mTbsReaderView.onStop()，否则第二次打开无法浏览。更多可以看FileReaderView类代码！
WebView播放视频问题
1、此次的方案用到WebView，而且其中会有视频嵌套，在默认的WebView中直接播放视频会有问题， 而且不同的SDK版本情况还不一样，网上搜索了下解决方案，在此记录下.
webView.getSettings.setPluginState(PluginState.ON);webView.setWebChromeClient(new WebChromeClient());
2、然后在webView的Activity配置里面加上： android:hardwareAccelerated="true"
3、以上可以正常播放视频了，但是webview的页面都finish了居然还能听 到视频播放的声音， 于是又查了下发现webview的onResume方法可以继续播放，onPause可以暂停播放， 但是这两个方法都是在Added in API level 11添加的，所以需要用反射来完成。
4、停止播放：在页面的onPause方法中使用：webView.getClass().getMethod("onPause").invoke(webView, (Object[])null);
5、继续播放：在页面的onResume方法中使用：webView.getClass().getMethod("onResume").invoke(webView,(Object[])null);这样就可以控制视频的暂停和继续播放了。
无法获取webView的正确高度
- 偶发情况，获取不到webView的内容高度
其中htmlString是一个HTML格式的字符串。
WebView view = new WebView(context);
view.loadData(htmlString, "text/html", "utf-8");
view.setWebViewClient(new WebViewClient() {
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
Log.d("2", view.getContentheight() + "");
}
});
这是因为onPageFinished回调指的WebView已经完成从网络读取的字节数，这一点。在点onPageFinished被激发的页面可能还没有被解析。
第一种解决办法：提供onPageFinished（）一些延迟
webView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
int contentHeight = webView.getContentHeight();
int viewHeight = webView.getHeight();
}
}, 500);
}
});
- 第二种解决办法：使用js获取内容高度，具体可以看这篇文章：https://www.jianshu.com/p/ad22b2649fba
WebView硬件加速导致页面渲染闪烁
4.0以上的系统我们开启硬件加速后，WebView渲染页面更加快速，拖动也更加顺滑。但有个副作用就是，当WebView视图被整体遮住一块，然后突然恢复时（比如使用SlideMenu将WebView从侧边滑出来时），这个过渡期会出现白块同时界面闪烁。解决这个问题的方法是在过渡期前将WebView的硬件加速临时关闭，过渡期后再开启
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
网友评论