H5頁面與Android原生頁面交互

Android頁面內嵌套h5頁面已經是隨處可見瞭。在Android原生頁面和h5頁面的取舍上那些不是本文的重點。重點是，如此多的頁面用網頁來寫，那麼必定涉及到網頁與原生的交互，俗稱js交互。

目標：h5頁面點擊按鈕Android端接收到網頁傳給的json數據。

實現

網頁端
網頁端添加如下內容

<script type="text/javascript">

 var hasBridge = false


    function connectWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) {
                callback(WebViewJavascriptBridge)
            } else {
                document.addEventListener('WebViewJavascriptBridgeReady', function () {
                    callback(WebViewJavascriptBridge)
                }, false)
            }
        }

        connectWebViewJavascriptBridge(function (bridge) {
            bridge.init(function (message, responseCallback) {
                hasBridge = true
                var data = {'Javascript Responds': 'Wee!'}
                $("#document .disabled").removeClass("disabled")
                responseCallback(data)

            })

            $("#mzy").click(function(){
                var sendObj = {"type":"user"}；
                sendObj["phone"] = "18067976937";
                sendObj["nick"] = "maoamao";
                bridge.send(JSON.stringify(sendObj), function (responseData) {
                });
            })
        })
</script>

• 123456789101112131415161718192021222324252627282930313233

• 123456789101112131415161718192021222324252627282930313233

  其中 mzy 是定義的一個id = “mzy”的按鈕。傳遞的json數據為

  {
      "type":"user",
      "phone":"18067976937",
      "nick":"maoamao",
  }

  Android端
  Android端這裡使用的github上開元項目BridgeWebView來顯示h5頁面。使用如下：

   webview.setWebViewClient(new BridgeWebViewClient(webview) {
  
              @Override
              public void onPageStarted(WebView view, String url, Bitmap favicon) {
                  super.onPageStarted(view, url, favicon);
              }
  
              @Override
              public void onPageFinished(WebView view, String url) {
                  super.onPageFinished(view, url);
              }
  
              @Override
              public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                  super.onReceivedError(view, errorCode, description, failingUrl);
                  view.loadData(errorHtml, "text/html; charset=UTF-8", null);
  
              }
          });
          //JS交互
          webview.setDefaultHandler(new DefaultHandler() {
              @Override
              public void handler(String data, CallBackFunction function) {
                  super.handler(data, function);
                  Log.e("data", "data = " + data);
                  try {
                      Gson gson = new GsonBuilder()
                              .setFieldNamingPolicy(FieldNamingPolicy.LOWER_CASE_WITH_UNDERSCORES)
                              .setDateFormat("yyyy-MM-dd'T'HH:mm:ss").create();
                      JSONObject jsonObject = new JSONObject(data);
                      String type = jsonObject.getString("type");
                      if (null != type && type.equals("user")) {
                          String nick = jsonObject.getString("nick");
                          Log.i("nick","nick = "+nick);
                      } else if (null != type && type.equals("XXXXXX")) {
                          xxxxxxxx;
                      }
  
                  } catch (JSONException e) {
                      e.printStackTrace();
                  }
              }
          });
  
          webview.loadUrl("XXXXXXXXXX");
  
          webview.send("hello-javascript");

  這裡根據因為同一個頁面可能會有多種不同的交互需求，所以這裡用type來區分不同的交互類型。這裡可以根據jsonObject.getString(“nick”)獲取到nick字段。 webview.loadUrl(“XXXXXXXXXX”);設置成你自己的h5頁面地址即可。

  目標二：Android端傳遞參數給web頁

  上面代碼塊裡面最後一句webview.send(“hello-JavaScript”);就是Android端發送瞭一個”hello-javascript”字符串給web頁。

  web頁接收Android發來的參數

  <script>
      function connectWebViewJavascriptBridge(callback) {
          if (window.WebViewJavascriptBridge) {
              callback(WebViewJavascriptBridge)
          } else {      
          document.addEventListener('WebViewJavascriptBridgeReady', function(){
                  callback(WebViewJavascriptBridge)
              }, false)
          }
      }
      connectWebViewJavascriptBridge(function (bridge) {
          bridge.init(function (message, responseCallback) {
              alert("message"+message)
              var data = {'Javascript Responds': 'Wee!'}
              new Vue({
                  el: "#vue-app",
                  template: "#app-template",
                  data:{
                      tab: 1,
                  },
  
                  events: {
                      'bridgeEvt': function(obj) {
                          bridge.send(JSON.stringify(obj),function(responseData){
                              console.log(responseData);
                          })
                      }
                  },
                  ready: function(){
                      if(/notice_type=2/.test(location.href)) {
                          this.tab = 2
                      }
                  },
  
              });
              responseCallback(data)
          })
  
      })
  </script>

  其中alert(“message”+message)message就是從Android傳過來的參數。我們可以進行處理。