0


Android 如何传递参数给webView的h5页面

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 + "&param2=" + 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);  
    // ...其他代码...  
}
标签: android

本文转载自: https://blog.csdn.net/m0_46268254/article/details/139331892
版权归原作者 月色月石 所有, 如有侵权,请联系我们删除。

“Android 如何传递参数给webView的h5页面”的评论:

还没有评论