Android混合開發經驗積累

概述

Android中可以通過WebView與H5進行交互。然而對於初學者而言裏面還有諸多技巧需要去務實。也是通過本文來具體的記錄 Android原生通過webView與JS進行交互的案例。

運行效果

技術說明

騰訊X5WebView集成教程

Android調用JS

mWebView.evaluateJavascript() 4.4以後
loadUrl() 刷新 4.4以前

JS調用Android

mWebView.addJavascriptInterface() 設置回調

原生處理

  // 設置方法攔截... (參數1 不清楚, 參數2 交互時相互定義的名字)
  mX5WebView.addJavascriptInterface(new JSInterface(),"latte");

    private final class JSInterface{
        @SuppressLint("JavascriptInterface")
        @JavascriptInterface
        public void event(String info){
           // todo android端對信息進行處理
           // 添加我們需要實現具體的原生邏輯處理
           // 這裏就是我們打開相冊的邏輯...
        }
   }     

   // 相冊回調之後的邏輯處理... 將圖片傳遞給js 進行顯示包括進行上傳等
   // 這裏傳遞的是文件路徑
   public void showPic(String imagePath){
        //todo json傳值  將具體的路徑傳遞給js
        mX5WebView.evaluateJavascript("javascript:nativeCall(\'"+imagePath+"\');",
                new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String s) {
               //todo
               // 接收回傳值...
            }
        });
    }

JS中實現

   // 在點擊事件中: js調用原生方法...
   latte.event(JSON.stringify(command));
   
   // 設定js方法以此來提供給原生調用
   // 注意: 該方法一定要掛在到window對象上
    function nativeCall(text) {
        img.src = text;
        // 要不然會執行回調2次呢 -- 4.2 以下回傳
        // window.latte.nativeCall2('哈哈哈哈哈哈');
        return "圖片切換成功";
    }

項目地址

Github demo地址