android5.1.1 和 android7都测试过,都是正常使用的
android原生与html交互可以实现APP混合开发
WebView 底层还是调用的WebKit
AndroidManifest.xml 记得要配置 上网权限
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
主要代码文件:
WebViewAction.java
package com.example.a20200712;
import android.content.DialogInterface;
import android.os.Bundle;
import android.text.TextUtils;
import android.text.format.DateUtils;
import android.util.Log;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.JsResult;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.EditText;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;
import java.text.SimpleDateFormat;
import java.util.Date;
public class WebViewAction extends AppCompatActivity {
private WebView layout_webview_content;
private EditText layout_webview_url;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.web_view_layout);
layout_webview_url = findViewById(R.id.layout_webview_url);
layout_webview_content = findViewById(R.id.layout_webview_content);
WebSettings webSettings = layout_webview_content.getSettings();
// 设置与Js交互的权限
webSettings.setJavaScriptEnabled(true);
// 设置允许JS弹窗
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
// 由于设置了弹窗检验调用结果,所以需要支持js对话框
// webview只是载体,内容的渲染需要使用webviewChromClient类去实现
// 通过设置WebChromeClient对象处理JavaScript的对话框
//设置响应js 的Alert()函数
layout_webview_content.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
AlertDialog.Builder b = new AlertDialog.Builder(WebViewAction.this);
b.setTitle("Alert");
b.setMessage(message);
b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.confirm();
}
});
b.setCancelable(false);
b.create().show();
return true;
}
});
// 通过addJavascriptInterface()将Java对象映射到JS对象
//参数1:Javascript对象名 this === new WebViewAction();
//参数2:Java对象名
layout_webview_content.addJavascriptInterface(this, "webViewAction");//AndroidtoJS类对象映射到js的test对象
}
@JavascriptInterface
public String calc(String a, String b) {
Integer ret = (Integer.valueOf(a) + Integer.valueOf(b));
Log.i("mw", "android方法被调用了,a:" + a + ",b:" + b + ",请算结果:" + ret);
return a == null || b == null ? "-1" : String.valueOf(ret);
}
public void toUrl(View view) {
//设置URL 资源路径
layout_webview_content.loadUrl(layout_webview_url.getText().toString());
//在APP应用内打开WebView
layout_webview_content.setWebViewClient(new WebViewClient());
}
public void closeJSInvokeAndroid(View view) {
layout_webview_content.removeJavascriptInterface("webViewAction");
}
public void invokeJS(View view) {
// 通过Handler发送消息
layout_webview_content.post(new Runnable() {
@Override
public void run() {
Date currentTime = new Date();
SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String dateString = formatter.format(currentTime);
String jsParam = "当前时间:" + dateString;
// 注意调用的JS方法名要对应上
// 调用javascript的callJS()方法
//1、这种调用方式无返回值可用 ,看起来简洁 支持Android 4.4以下版本
//layout_webview_content.loadUrl("javascript:callJS('"+jsParam+"')");
//2、这种调用方式可接收返回值,效率还高于1 只支持Android 4.4以上方法
layout_webview_content.evaluateJavascript("javascript:callJS('" + jsParam + "')", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//此处为 js 返回的结果
Log.i("mw", "js返回值:" + value);
}
});
}
});
}
@Override
public void onBackPressed() {
//如果webView可以返回上一级
if (layout_webview_content.canGoBack()) {
layout_webview_content.goBack();
} else {
super.onBackPressed();
}
}
}
web_view_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="请输入地址"
android:id="@+id/layout_webview_url"
></EditText>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="进入"
android:onClick="toUrl"
android:layout_weight="1"></Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android调用js"
android:onClick="invokeJS"
android:layout_weight="1"></Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="关闭调用Android"
android:onClick="closeJSInvokeAndroid"
android:layout_weight="1"></Button>
</LinearLayout>
<WebView
android:id="@+id/layout_webview_content"
android:layout_width="match_parent"
android:layout_height="match_parent"></WebView>
</LinearLayout>
webView.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Android与js互调案例</title>
</head>
<body>
<h3 id="testTxt">你好</h3>
</body>
<script type="text/javascript">
function callJS(jsParam){
//弹出alert
alert("android调用JS进来了");
//js调用android方法
var ret = webViewAction.calc(3,2);
document.getElementById("testTxt").innerHTML = jsParam +"=====调用android返回值:"+ret;
return "JS把值处理后又返回到Android==="+jsParam;
}
</script>
</html>
http://www.mwview.com/v/c/r/html/demo_android_webView