当前位置:首页 » 《关于电脑》 » 正文

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

16 人参与  2024年09月15日 17:21  分类 : 《关于电脑》  评论

点击全文阅读


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);      // ...其他代码...  }

点击全文阅读


本文链接:http://zhangshiyu.com/post/160471.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1