Android 使用腾讯X5内核WebView和原生做交互
腾讯X5内核TBS
腾讯浏览服务是致力于优化移动端webview体验的整套解决方案。该方案由SDK、手机QQ浏览器X5内核和X5云端服务组成，解决移动端webview使用过程中出现的一切问题，优化用户的浏览体验。同时，腾讯还将持续提供后续的更新和优化，为开发者提供最新最优秀的功能和服务。
1、布局文件 activity_base_web.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/superplayer_content_bg"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<FrameLayout
android:id="@+id/webViewContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/darker_gray">
</FrameLayout>
</LinearLayout>
</LinearLayout>
在Activity/Fragment中 初始化 WebView
注意导包WebView的相关依赖都需要导com.tencent.smtt.sdk下面依赖
1、初始化WebView -> initWebView
/**
* 自定义初始化WebView设置，此处为默认 BaseWebViewActivity 初始化
* 可通过继承该 Activity Override 该方法做自己的实现
*/
protected void initWebView() {
mWebView = new WebView(mContext);
mWebView.setVerticalScrollBarEnabled(false);
//设置WebView滚动条不显示
//水平不显示
mWebView.setHorizontalScrollBarEnabled(false);
ViewGroup mContainer = findViewById(R.id.webViewContainer);
mContainer.addView(mWebView);
WebSettings webSetting = mWebView.getSettings();
webSetting.setJavaScriptEnabled(true);
webSetting.setAllowFileAccess(true);
webSetting.setSupportZoom(true);
webSetting.setDatabaseEnabled(true);
webSetting.setAllowFileAccess(true);
webSetting.setDomStorageEnabled(true);
// 设置出现缩放工具
webSetting.setBuiltInZoomControls(false);
//扩大比例的缩放
webSetting.setUseWideViewPort(true);
//自适应屏幕
webSetting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
webSetting.setLoadWithOverviewMode(true);
initWebViewClient();
initWebChromeClient();
initJavaScriptInterface();
//启用或禁用竖直滚动条
initWebViewClientExtension();
}
2、初始化WebView -> initWebViewClient WebViewClient 在影响View的事件到来时，会通过WebViewClient中的方法回调通知用户
private void initWebViewClient() {
mWebView.setWebViewClient(new WebViewClient() {
/**
* 具体接口使用细节请参考文档：
* https://x5.tencent.com/docs/webview.html
* 或 Android WebKit 官方：
* https://developer.android.com/reference/android/webkit/WebChromeClient
*/
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
Logger.e("web_url: " + url);
if (url.startsWith("http://") || url.startsWith("https://") || url.startsWith("hxclass.cn")) {
return;
}
if (url.startsWith("intent://") && url.contains("com.youku.phone")) {
return;
}
if ( url.startsWith("weixin://")
|| url.startsWith("alipays://")
|| url.startsWith("mqqapi://") ){
mWebView.goBack();
pay_loading_view.setVisibility(VISIBLE);
isWxPay = true;
//打开本地App进行支付
Intent intent = new Intent();
intent.setAction(Intent.ACTION_VIEW);
intent.setData(Uri.parse(url));
startActivity(intent);
}
//微信H5支付核心代码，此方法亦可以唤起支付
// if (url.startsWith("weixin://wap/pay?")) {
// mWebView.goBack();
// isWxPay = true;
// Intent intent = new Intent();
// intent.setAction(Intent.ACTION_VIEW);
// intent.setData(Uri.parse(url));
// startActivity(intent);
// } else {
// mWebView.goBack();
// isWxPay = true;
// Map<String, String> extraHeaders = new HashMap<>();
// extraHeaders.put("Referer", "https://alpha.mobile.hxclass.cn");
// view.loadUrl(url, extraHeaders);
// }
Logger.i("zhoujianxiong onPageStarted, view:" + view + ", url:" + url);
}
@Override
public void onPageFinished(WebView view, String url) {
if (mWebView.getUrl().endsWith("/login")) {
String js = "var newscript = document.createElement(\"script\");";
js += "newscript.onload=function(){changeLoginType(type);};"; //xxx()代表js中某方法
js += "document.body.appendChild(newscript);";
view.loadUrl("javascript:" + js);
}
networkPlay();
}
@Override
public void onReceivedError(WebView webView, int errorCode, String description, String url) {
Logger.i("zhoujianxiong onReceivedError: " + errorCode
+ ", description: " + description
+ ", url: " + url);
if (url.startsWith("weixin://") && !api.isWXAppInstalled()) {
mWebView.stopLoading();
mWebView.goBack();
pay_loading_view.setVisibility(GONE);
ToastUtils.showShort("请先安装微信");
return;
}
if ( url.startsWith("weixin://")
|| url.startsWith("alipays://")
|| url.startsWith("mqqapi://") ){
pay_loading_view.setVisibility(VISIBLE);
}
}
@Override
public WebResourceResponse shouldInterceptRequest(WebView webView, WebResourceRequest webResourceRequest) {
return super.shouldInterceptRequest(webView, webResourceRequest);
}
//其他回调接口
。。。。。。
});
}
3、初始化WebView -> initWebChromeClient 当影响浏览器的事件到来时，就会通过WebChromeClient中的方法回调通知用法。
/**
* 初始化webChromeClient
*/
private void initWebChromeClient() {
mWebView.setWebChromeClient(new WebChromeClient() {
/**
* 具体接口使用细节请参考文档：
* https://x5.tencent.com/docs/webview.html
* 或 Android WebKit 官方：
* https://developer.android.com/reference/android/webkit/WebChromeClient
*/
@Override
public void onProgressChanged(WebView view, int newProgress) {
Log.i(TAG, "onProgressChanged, newProgress:" + newProgress + ", view:" + view.getUrl());
String url = view.getUrl();
canNotGoBack = url.endsWith("/home") || url.endsWith("/selected")
|| url.endsWith("/study") || url.endsWith("/my");
if (newProgress == 100 && canNotGoBack) {
mClickBackTime = 0;
mWebView.clearHistory();
}
if (newProgress == 100 && url.contains(".alipay.com")) {
findViewById(R.id.top_bar_view).setVisibility(VISIBLE);
} else if (newProgress == 100){
networkPlay();
findViewById(R.id.top_bar_view).setVisibility(GONE);
}
}
@Override
public boolean onJsAlert(WebView webView, String url, String message, JsResult result) {
return true;
}
@Override
public boolean onJsConfirm(WebView webView, String url, String message, JsResult result) {
return true;
}
@Override
public boolean onJsBeforeUnload(WebView webView, String url, String message, JsResult result) {
return true;
}
@Override
public boolean onJsPrompt(WebView webView, String url, String message, String defaultValue, JsPromptResult result) {
return true;
}
/**
* API >= 21(Android 5.0.1)回调此方法
*/
@Override
public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> valueCallback, FileChooserParams fileChooserParams) {
Log.e("zhoujianxiong_web", "运行方法 onShowFileChooser");
Log.e("zhoujianxiong_web", "运行方法 onShowFileChooser" + fileChooserParams.toString());
// (1)该方法回调时说明版本API >= 21，此时将结果赋值给 mUploadCallbackAboveL，使之 != null
String[] acceptTypes = fileChooserParams.getAcceptTypes();
//通过acceptTypes判断前端的参数类型 图片 、文件 可以约定
if (acceptTypes.length > 0 && !acceptTypes[0].equals("")) {
isCropPic = false;
//调起原生的拍照和选择文件功能 isCaptureEnabled
//注意 mUploadCallbackAboveL 在 回传给前端之后 onReceiveValue 需要置空
takePhoto(fileChooserParams.isCaptureEnabled());
mUploadCallbackAboveL = valueCallback;
mUploadCallbackAboveL.onReceiveValue(null);
mUploadCallbackAboveL = null;
} else {
//调起原生的文件选择器
mUploadCallbackAboveL = valueCallback;
openFileChooseProcess(false);
}
Log.e("zhoujianxiong_web", "运行方法 onShowFileChooser" + Arrays.toString(acceptTypes));
return true;
}
@Override
public void onGeolocationPermissionsShowPrompt(String origin,
GeolocationPermissionsCallback geolocationPermissionsCallback) {
}
});
}
4、初始化WebView -> addJavascriptInterface 添加提供给前端调用的接口方法
重点：webSetting.setJavaScriptEnabled(true); 必须为 true
// 第二个参数Android是提供给前端调用的tag ,可自定义
mWebView.addJavascriptInterface(new WebViewJavaScriptFunction() {}, "Android");
private void initJavaScriptInterface() {
mWebView.addJavascriptInterface(new WebViewJavaScriptFunction() {
@Override
public void onJsFunctionCalled(String tag) {
}
@JavascriptInterface
public void clearCache(){
//清除cookie
clearCacheQbSdk();
}
}, "Android");
}
5、初始化WebView -> initWebViewClientExtension X5内核滚动条设置
private void initWebViewClientExtension() {
if (mWebView == null || mWebView.getX5WebViewExtension() == null) {
return;
}
// textZoom:100表示正常，120表示文字放大1.2倍
mWebView.getSettings().setTextZoom(100);
//竖直快速滑块，设置null可去除
mWebView.getX5WebViewExtension().setVerticalTrackDrawable(null);
mWebView.getX5WebViewExtension().setVerticalScrollBarEnabled(false);
mWebView.getX5WebViewExtension().setHorizontalScrollBarEnabled(false);
}
Android原生调用前端的方法举例
/**
* 全局错误提示
* @param msg 消息提示
*/
protected void errToast(String msg){
mHandler.post(new Runnable() {
public void run() {
String insertJavaScript ="javascript:(function() {" +
"javascript:window.errToast('"+ msg +"');\n" +
" })();";
mWebView.loadUrl(insertJavaScript);
}
});
}
