Android传递参数给webView的h5页面3种方法

目录

• 1.最简单的方式是通过URL参数将数据传递给H5页面
• 2.使用JavascriptInterface传递参数，即H5页面调用android的方法
• 3.使用WebView的evaLuatejavascript方法传递参数即Android调用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.ljsocation.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)python {
           //处理从h5页面参数获取到的数据
        }

        @JavascriptInterface
        public String getDeviceInfo() {
        	//h5页面调用此方法即可获取到String 类型的数据
           return stationPoints;
        } 

         @JavascriptInterface
         public String getAllDefect() {
              //给h5发送复杂数据用Gson
             return new Gson().tojson(rejsport.getAppDefectDtos());
         }
   }
   WebView webView = findViewById(R.id.webView);
   webView.getSettings().setJavaScriptEnabled(true);
   MyJavascriptInterface myJavascriptInterface = new MyJavascrippythontInterface();
   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传递参数给webView的h5页面的文章就介绍到这了,更多相关Android传递参数给h5页面内容请搜索编程客栈(www.devze.com)以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程客栈(www.devze.com)！