1.最简单的方式是通过URL参数将数据传递给H5页面
Android可以通过WebView的loadUrl()方法加载带有参数的URL,H5页面可以通过解析URL来获取参数值。
首先,在Android端构造带有参数的URL,然后加载该URL到WebView中:
WebView webView = findViewById(R.id.webView); String param1 = "value1"; String param2 = "value2"; String url = " + param1 + "¶m2=" + param2; webView.loadUrl(url);
在H5页面中,可以通过解析URL获取参数值:
function getParameterByName(name, url) { if (!url) url = window.location.href; name = name.replace(/[[\]]/g, "\\$&"); var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), results = regex.exec(url); if (!results) return null; if (!results[2]) return ''; return decodeURIComponent(results[2].replace(/\+/g, " ")); } var param1 = getParameterByName('param1'); var param2 = getParameterByName('param2');
2.使用JavascriptInterface传递参数,即H5页面调用Android的方法
通过JavascriptInterface在Android端和H5页面之间建立桥梁,实现双向通信,即通过addJavascriptInterface()方法将一个Java对象注入到WebView中,H5页面可以通过该对象调用Android端的方法获取参数值。
1.自定义一个MyJavascriptInterface类,并且在类中实现接受到消息之后的操作和要给h5传递的数据。
2.创建MyJavascriptInterface类对象,将对象传给webView.addJavascriptInterface(myJavascriptInterface, “Android”)。
public class MyJavascriptInterface { @JavascriptInterface public String sendData(string str) { //处理从h5页面参数获取到的数据 } @JavascriptInterface public String getDeviceInfo() { //h5页面调用此方法即可获取到String 类型的数据 return stationPoints; } @JavascriptInterface public String getAllDefect() { //给h5发送复杂数据用Gson return new Gson().toJson(report.getAppDefectDtos()); } } WebView webView = findViewById(R.id.webView); webView.getSettings().setJavaScriptEnabled(true); MyJavascriptInterface myJavascriptInterface = new MyJavascriptInterface(); webView.addJavascriptInterface(myJavascriptInterface, "Android"); webView.loadUrl()
在h5页面中可以调用Android给的接口:
//发简单数据 function sendData(str){ Android.sendData(str) } //h5收数据 var deviceInfo = JSON.parse(window.android.getDeviceInfo()); //给h5收复杂数据用json let JsondefectData = JSON.parse(defectData);
3.使用WebView的evaluateJavascript方法传递参数即Android调用h5的方法
在Android端直接执行JavaScript代码,并传递参数给H5页面。
Android调用了h5的callJS()方法,然后收到了一个返回值(此处的callJS方法也可携带参数进行交互)
// 假设你有一个参数叫做 paramValue String paramValue = "你的参数值"; // 确保参数值被正确转义,特别是如果它包含特殊字符或引号 // 在这个例子中,我们只是简单地将它用单引号括起来,但在实际情况中可能需要更复杂的转义 String javaScriptCode = "javascript:callJS('" + paramValue.replace("'", "\\'") + "');"; mWebView.evaluateJavascript(javaScriptCode, new ValueCallback<String>() { @Override public void onReceiveValue(String value) { // 此处为 js 返回的结果 Log.d("WebView", "Received value from JavaScript: " + value); } });
在H5页面中,可以定义一个receiveParams()函数来接收参数:
function callJS(param) { // 在这里使用 param 参数 console.log("Received parameter from Android: " + param); // ...其他代码... }