快捷導(dǎo)航

Android傳遞參數(shù)給webView的h5頁(yè)面3種方法

更新時(shí)間：2024年08月14日 09:38:28 作者：月色月石

最近幾年隨著h5的強(qiáng)勢(shì)崛起,越來(lái)越多的公司運(yùn)用h5開(kāi)發(fā)或者采用h5與android的混合開(kāi)發(fā),這篇文章主要給大家介紹了關(guān)于Android傳遞參數(shù)給webView的h5頁(yè)面的3種方法,需要的朋友可以參考下

1.最簡(jiǎn)單的方式是通過(guò)URL參數(shù)將數(shù)據(jù)傳遞給H5頁(yè)面

Android可以通過(guò)WebView的loadUrl()方法加載帶有參數(shù)的URL，H5頁(yè)面可以通過(guò)解析URL來(lái)獲取參數(shù)值。
首先，在Android端構(gòu)造帶有參數(shù)的URL，然后加載該URL到WebView中：

    WebView webView = findViewById(R.id.webView); 
    String param1 = "value1";
    String param2 = "value2";
    String url = " + param1 + "&param2=" + param2;
    webView.loadUrl(url);

在H5頁(yè)面中，可以通過(guò)解析URL獲取參數(shù)值：

    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傳遞參數(shù)，即H5頁(yè)面調(diào)用Android的方法

通過(guò)JavascriptInterface在Android端和H5頁(yè)面之間建立橋梁，實(shí)現(xiàn)雙向通信，即通過(guò)addJavascriptInterface()方法將一個(gè)Java對(duì)象注入到WebView中，H5頁(yè)面可以通過(guò)該對(duì)象調(diào)用Android端的方法獲取參數(shù)值。

1.自定義一個(gè)MyJavascriptInterface類(lèi)，并且在類(lèi)中實(shí)現(xiàn)接受到消息之后的操作和要給h5傳遞的數(shù)據(jù)。
2.創(chuàng)建MyJavascriptInterface類(lèi)對(duì)象，將對(duì)象傳給webView.addJavascriptInterface(myJavascriptInterface, “Android”)。

   public class MyJavascriptInterface {
        @JavascriptInterface
        public String sendData(string str) {
           //處理從h5頁(yè)面參數(shù)獲取到的數(shù)據(jù)
        }

        @JavascriptInterface
        public String getDeviceInfo() {
        	//h5頁(yè)面調(diào)用此方法即可獲取到String 類(lèi)型的數(shù)據(jù)
           return stationPoints;
        } 

         @JavascriptInterface
         public String getAllDefect() {
              //給h5發(fā)送復(fù)雜數(shù)據(jù)用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頁(yè)面中可以調(diào)用Android給的接口：

  //發(fā)簡(jiǎn)單數(shù)據(jù)
  function sendData(str){
     Android.sendData(str)
  }

  //h5收數(shù)據(jù)
  var deviceInfo = JSON.parse(window.android.getDeviceInfo());
  
  //給h5收復(fù)雜數(shù)據(jù)用json
  let JsondefectData = JSON.parse(defectData);

3.使用WebView的evaluateJavascript方法傳遞參數(shù)即Android調(diào)用h5的方法

在Android端直接執(zhí)行JavaScript代碼，并傳遞參數(shù)給H5頁(yè)面。

Android調(diào)用了h5的callJS()方法，然后收到了一個(gè)返回值（此處的callJS方法也可攜帶參數(shù)進(jìn)行交互）

  // 假設(shè)你有一個(gè)參數(shù)叫做 paramValue  
String paramValue = "你的參數(shù)值";  
  
// 確保參數(shù)值被正確轉(zhuǎn)義，特別是如果它包含特殊字符或引號(hào)  
// 在這個(gè)例子中，我們只是簡(jiǎn)單地將它用單引號(hào)括起來(lái)，但在實(shí)際情況中可能需要更復(fù)雜的轉(zhuǎn)義  
String javaScriptCode = "javascript:callJS('" + paramValue.replace("'", "\\'") + "');";  
  
mWebView.evaluateJavascript(javaScriptCode, new ValueCallback<String>() {  
    @Override  
    public void onReceiveValue(String value) {  
        // 此處為 js 返回的結(jié)果  
        Log.d("WebView", "Received value from JavaScript: " + value);  
    }  
});

在H5頁(yè)面中，可以定義一個(gè)receiveParams()函數(shù)來(lái)接收參數(shù)：

  function callJS(param) {  
    // 在這里使用 param 參數(shù)  
    console.log("Received parameter from Android: " + param);  
    // ...其他代碼...  
}

總結(jié)

到此這篇關(guān)于Android傳遞參數(shù)給webView的h5頁(yè)面的文章就介紹到這了,更多相關(guān)Android傳遞參數(shù)給h5頁(yè)面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: