腾讯官网:https://x5.tencent.com/tbs/guide/sdkInit.html
一.AndroidStudio接入X5WebView
1.添加so以及lib文件
2.Gradle配置
apply plugin: 'com.android.application'
android {
compileSdkVersion 28
defaultConfig {
ndk {
abiFilters "armeabi", "armeabi-v7a", "x86", "mips"
}
}
sourceSets {
main {
jniLibs.srcDirs = ['libs']
}
}
}
3.权限
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
4.自定义X5WebView
public class X5WebView extends WebView {
TextView title;
private WebViewClient client = new WebViewClient() {
/**
* 防止加载网页时调起系统浏览器
*/
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
};
@SuppressLint("SetJavaScriptEnabled")
public X5WebView(Context arg0, AttributeSet arg1) {
super(arg0, arg1);
this.setWebViewClient(client);
// this.setWebChromeClient(chromeClient);
// WebStorage webStorage = WebStorage.getInstance();
initWebViewSettings();
this.getView().setClickable(true);
}
private void initWebViewSettings() {
WebSettings webSetting = this.getSettings();
webSetting.setJavaScriptEnabled(true);
webSetting.setJavaScriptCanOpenWindowsAutomatically(true);
webSetting.setAllowFileAccess(true);
webSetting.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);
webSetting.setSupportZoom(true);
webSetting.setBuiltInZoomControls(true);
webSetting.setUseWideViewPort(true);
webSetting.setSupportMultipleWindows(true);
// webSetting.setLoadWithOverviewMode(true);
webSetting.setAppCacheEnabled(true);
// webSetting.setDatabaseEnabled(true);
webSetting.setDomStorageEnabled(true);
webSetting.setGeolocationEnabled(true);
webSetting.setAppCacheMaxSize(Long.MAX_VALUE);
// webSetting.setPageCacheCapacity(IX5WebSettings.DEFAULT_CACHE_CAPACITY);
webSetting.setPluginState(WebSettings.PluginState.ON_DEMAND);
// webSetting.setRenderPriority(WebSettings.RenderPriority.HIGH);
webSetting.setCacheMode(WebSettings.LOAD_NO_CACHE);
// this.getSettingsExtension().setPageCacheCapacity(IX5WebSettings.DEFAULT_CACHE_CAPACITY);//extension
// settings 的设计
}
@Override
protected boolean drawChild(Canvas canvas, View child, long drawingTime) {
boolean ret = super.drawChild(canvas, child, drawingTime);
canvas.save();
Paint paint = new Paint();
paint.setColor(0x7fff0000);
paint.setTextSize(24.f);
paint.setAntiAlias(true);
if (getX5WebViewExtension() != null) {
canvas.drawText(this.getContext().getPackageName() + "-pid:"
+ android.os.Process.myPid(), 10, 50, paint);
canvas.drawText(
"X5 Core:" + QbSdk.getTbsVersion(this.getContext()), 10,
100, paint);
} else {
canvas.drawText(this.getContext().getPackageName() + "-pid:"
+ android.os.Process.myPid(), 10, 50, paint);
canvas.drawText("Sys Core", 10, 100, paint);
}
canvas.drawText(Build.MANUFACTURER, 10, 150, paint);
canvas.drawText(Build.MODEL, 10, 200, paint);
canvas.restore();
return ret;
}
public X5WebView(Context arg0) {
super(arg0);
setBackgroundColor(85621);
}
}
5.Application代码
package com.wjn.customwebviewjs;
import android.app.Application;
import android.util.Log;
import com.tencent.smtt.sdk.QbSdk;
public class MyApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
//搜集本地tbs内核信息并上报服务器,服务器返回结果决定使用哪个内核。
QbSdk.PreInitCallback cb = new QbSdk.PreInitCallback() {
@Override
public void onViewInitFinished(boolean arg0) {
// TODO Auto-generated method stub
//x5內核初始化完成的回调,为true表示x5内核加载成功,否则表示x5内核加载失败,会自动切换到系统内核。
Log.d("app", " onViewInitFinished is " + arg0);
}
@Override
public void onCoreInitFinished() {
// TODO Auto-generated method stub
}
};
//x5内核初始化接口
QbSdk.initX5Environment(getApplicationContext(), cb);
}
}
6.Activity代码
package com.wjn.customwebviewjs;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.KeyEvent;
import android.view.View;
import android.widget.ProgressBar;
import com.tencent.smtt.sdk.WebChromeClient;
import com.tencent.smtt.sdk.WebView;
import com.tencent.smtt.sdk.WebViewClient;
public class X5WebViewActivity extends AppCompatActivity {
private ProgressBar progressBar;
private X5WebView x5WebView;
private String url = "https://blog.youkuaiyun.com/weixin_37730482";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_x5webview);
initHardwareAccelerate();
initView();
}
/**
* 启用硬件加速
*/
private void initHardwareAccelerate() {
try {
if (Integer.parseInt(android.os.Build.VERSION.SDK) >= 11) {
getWindow()
.setFlags(
android.view.WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,
android.view.WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);
}
} catch (Exception e) {
}
}
/**
* 初始化各种View
* */
private void initView() {
progressBar=findViewById(R.id.activity_x5webview_progressbar);
x5WebView = findViewById(R.id.activity_x5webview_x5webview);
x5WebView.loadUrl(url);
x5WebView.setWebViewClient(new myWebViewClient());
x5WebView.setWebChromeClient(new myWebChromeClient());
}
/**
* WebViewClient监听
* */
private class myWebViewClient extends WebViewClient{
@Override
public boolean shouldOverrideUrlLoading(WebView webView, String s) {
webView.loadUrl(s);
return true;
}
}
/**
* WebChromeClient监听
* */
private class myWebChromeClient extends WebChromeClient{
@Override
public void onProgressChanged(WebView webView, int i) {
super.onProgressChanged(webView, i);
if (i == 100) {
progressBar.setVisibility(View.GONE);//加载完网页进度条消失
} else {
progressBar.setVisibility(View.VISIBLE);//开始加载网页时显示进度条
progressBar.setProgress(i);//设置进度值
}
}
}
/**
* onKeyDown方法
*/
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK) {
if (x5WebView != null && x5WebView.canGoBack()) {
x5WebView.goBack();
return true;
} else {
return super.onKeyDown(keyCode, event);
}
}
return super.onKeyDown(keyCode, event);
}
/**
* onDestroy方法
* */
@Override
protected void onDestroy() {
super.onDestroy();
if(null!=x5WebView){
x5WebView.destroy();//释放资源
}
}
}
7.效果
二.Android与JS通过X5WebView完成交互
X5WebView是腾讯封装的WebView,增加了很多的功能。但是Android与JS通过X5WebView交互和原生的WebView是一样的。
1.Android 调用 JS (loadUrl为例)
JS代码
<script language="JavaScript" type="text/javascript">
var nowDate = new Date();
var nH=nowDate.getHours();
var nM=nowDate.getMinutes();
var nS=nowDate.getSeconds();
function MyOnclick() {
document.write("当前时间:" + nH+ ":" + nM + ":" + nS);
}
</script>
Android代码
package com.wjn.customwebviewjs;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.KeyEvent;
import android.view.View;
import android.widget.ProgressBar;
import android.widget.TextView;
import com.tencent.smtt.sdk.WebChromeClient;
import com.tencent.smtt.sdk.WebView;
import com.tencent.smtt.sdk.WebViewClient;
public class X5WebViewActivity extends AppCompatActivity {
private TextView textView;
private ProgressBar progressBar;
private X5WebView x5WebView;
private String url = "file:///android_asset/abc.html";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_x5webview);
initHardwareAccelerate();
initView();
}
/**
* 启用硬件加速
*/
private void initHardwareAccelerate() {
try {
if (Integer.parseInt(android.os.Build.VERSION.SDK) >= 11) {
getWindow()
.setFlags(
android.view.WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,
android.view.WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);
}
} catch (Exception e) {
}
}
/**
* 初始化各种View
* */
private void initView() {
textView=findViewById(R.id.activity_x5webview_textview);
progressBar=findViewById(R.id.activity_x5webview_progressbar);
x5WebView = findViewById(R.id.activity_x5webview_x5webview);
x5WebView.loadUrl(url);
x5WebView.setWebViewClient(new myWebViewClient());
x5WebView.setWebChromeClient(new myWebChromeClient());
textView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
x5WebView.loadUrl("javascript:MyOnclick()");
}
});
}
/**
* WebViewClient监听
* */
private class myWebViewClient extends WebViewClient{
@Override
public boolean shouldOverrideUrlLoading(WebView webView, String s) {
webView.loadUrl(s);
return true;
}
}
/**
* WebChromeClient监听
* */
private class myWebChromeClient extends WebChromeClient{
@Override
public void onProgressChanged(WebView webView, int i) {
super.onProgressChanged(webView, i);
if (i == 100) {
progressBar.setVisibility(View.GONE);//加载完网页进度条消失
} else {
progressBar.setVisibility(View.VISIBLE);//开始加载网页时显示进度条
progressBar.setProgress(i);//设置进度值
}
}
}
/**
* onKeyDown方法
*/
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK) {
if (x5WebView != null && x5WebView.canGoBack()) {
x5WebView.goBack();
return true;
} else {
return super.onKeyDown(keyCode, event);
}
}
return super.onKeyDown(keyCode, event);
}
/**
* onDestroy方法
* */
@Override
protected void onDestroy() {
super.onDestroy();
if(null!=x5WebView){
x5WebView.destroy();//释放资源
}
}
}
效果
点击前
点击后
2.JS 调用 Android (addJavascriptInterface为例)
JS代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="zh-cn"/>
<title>Android WebView 与 Javascript 交互</title>
<head>
<style>
body {background-color:#e6e6e6}
.rect
{
color:white;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
width:100px;
padding:6px;
background-color:#98bf21;
text-decoration:none;
text-align:center;
border:none;
cursor:pointer;
}
.inputStyle {font-size:16px;padding:6px}
</style>
</head>
<body>
<p>测试Android WebView 与 Javascript 交互</p>
<input id="name_input" class="inputStyle" type="text"/>
<a class="rect" onclick="sendInfoToJava()">JS调用Java</a>
<script>
function sendInfoToJava(){
//调用android程序中的方法,并传递参数
var name = document.getElementById("name_input").value;
window.AndroidWebView.showInfoFromJs(name);
}
</script>
</body>
</html>
Android代码
package com.wjn.customwebviewjs;
import android.annotation.SuppressLint;
import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.KeyEvent;
import android.view.View;
import android.widget.ProgressBar;
import android.widget.TextView;
import android.widget.Toast;
import com.tencent.smtt.sdk.WebChromeClient;
import com.tencent.smtt.sdk.WebView;
import com.tencent.smtt.sdk.WebViewClient;
public class X5WebViewActivity extends AppCompatActivity {
private ProgressBar progressBar;
private X5WebView x5WebView;
private String url = "file:///android_asset/hhh.html";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_x5webview);
initHardwareAccelerate();
initView();
}
/**
* 启用硬件加速
*/
private void initHardwareAccelerate() {
try {
if (Integer.parseInt(android.os.Build.VERSION.SDK) >= 11) {
getWindow()
.setFlags(
android.view.WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,
android.view.WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);
}
} catch (Exception e) {
}
}
/**
* 初始化各种View
* */
private void initView() {
progressBar=findViewById(R.id.activity_x5webview_progressbar);
x5WebView = findViewById(R.id.activity_x5webview_x5webview);
x5WebView.loadUrl(url);
x5WebView.setWebViewClient(new myWebViewClient());
x5WebView.setWebChromeClient(new myWebChromeClient());
// 添加js交互接口类,并起别名 AndroidWebView
x5WebView.addJavascriptInterface(new JavascriptInterface(this), "AndroidWebView");
}
/**
* Native JS 接口
*/
@SuppressLint("JavascriptInterface")
public class JavascriptInterface {
/**
* 构造方法
*/
private Context context;
public JavascriptInterface(Context context) {
this.context = context;
}
/**
* JS 调用 Android
*/
@android.webkit.JavascriptInterface
public void showInfoFromJs(String name) {
Toast.makeText(context, "JS页面输入内容:" + name, Toast.LENGTH_LONG).show();
}
}
/**
* WebViewClient监听
* */
private class myWebViewClient extends WebViewClient{
@Override
public boolean shouldOverrideUrlLoading(WebView webView, String s) {
webView.loadUrl(s);
return true;
}
}
/**
* WebChromeClient监听
* */
private class myWebChromeClient extends WebChromeClient{
@Override
public void onProgressChanged(WebView webView, int i) {
super.onProgressChanged(webView, i);
if (i == 100) {
progressBar.setVisibility(View.GONE);//加载完网页进度条消失
} else {
progressBar.setVisibility(View.VISIBLE);//开始加载网页时显示进度条
progressBar.setProgress(i);//设置进度值
}
}
}
/**
* onKeyDown方法
*/
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK) {
if (x5WebView != null && x5WebView.canGoBack()) {
x5WebView.goBack();
return true;
} else {
return super.onKeyDown(keyCode, event);
}
}
return super.onKeyDown(keyCode, event);
}
/**
* onDestroy方法
* */
@Override
protected void onDestroy() {
super.onDestroy();
if(null!=x5WebView){
x5WebView.destroy();//释放资源
}
}
}
效果
由于X5WebView与原生WebView在Android与JS交互方式上是一样的,所以在这里就简单举例。
Android与JS通过WebView交互详解 请看 Android与JS通过WebView相互调用详解