作者：IT魔幻師
博客：www.huyingzi.top
轉(zhuǎn)載請(qǐng)注明出處：http://www.reibang.com/p/23f74055e999

一、Android端初始配置

• 定義java類
  在需要被調(diào)用的Java函數(shù)加上@JavascriptInterface注解

  /**
   * @項(xiàng)目名： JsOrJavaDemo
   * @包名： com.hubin.jsorjavademo
   * @文件名: JavaScriptBridge
   * @創(chuàng)建者: 胡英姿
   * @創(chuàng)建時(shí)間: 2018/8/24 16:13
   * @描述： 與js交互的接口類
   */
  public class JavaScriptBridge{
      private Context mContext;
  
      public JavaScriptBridge(Context context, WebView webview) {
          mContext = context;
      }
  
      /**
       * 提供js調(diào)用彈出java  toast
       * @param msg
       */
      @JavascriptInterface //android4.2 以上换吧，js調(diào)用android方法有安全問(wèn)題
      public void showTast(String msg){
          Toast.makeText(mContext, ""+msg, Toast.LENGTH_SHORT).show();
      }
  
  }
  

• 配置webview赢赊，建立映射關(guān)系

  //創(chuàng)建JavaScriptBridge
  JavaScriptBridge jsBridge = new JavaScriptBridge(mContext);
  //設(shè)置js和android通信橋梁接口 JavaScriptBridge 對(duì)應(yīng)映射字段-->jsInterface;
  Webview.addJavascriptInterface(jsBridge, "jsInterface");
  
  
  mWebview.getSettings().setJavaScriptEnabled(true);
  //加載本地模板筝闹，需要將web相關(guān)代碼放置assets目錄下
  mWebview.loadUrl("file:///android_asset/index.html");//本地模板
  

二街图、js調(diào)用Android方法

//使用json格式
var json = {"message":"你好阻荒，我是js"};
//對(duì)象.方法名（參數(shù)）
window.jsInterface.showTast(JSON.stringify(json));

三闻丑、Android調(diào)用js方法

• js端：定義一個(gè)函數(shù)漩怎，參數(shù)約定json格式

  //接收json對(duì)象
  function showMsg(json){
     var message = json.message;
     var name = json.name;
     showLog("name="+name+",message="+message);
     alert(JSON.stringify(json));
  };
  

• Android端，調(diào)用js需在UI線程執(zhí)行

  //使用json格式封裝參數(shù)
  JSONObject json = new JSONObject();
  json.put("name", "android");
  json.put("message", "Hello Android world嗦嗡！");
  
  //切換到主線程
   mHandler.post(new Runnable() {
        @Override
        public void run() {
           //調(diào)用js方法webview.loadUrl("javascript:方法名(參數(shù))");
        mWebview.loadUrl("javascript:showMsg("+json.toString()+")");
        }
   });
  
  

四勋锤、引入CallBack實(shí)現(xiàn)Android回調(diào)并解耦

• js端定義回調(diào)回函

  function receiveAndroid(json){
      showLog("接收android回調(diào)數(shù)據(jù)="+JSON.stringify(json));
  };
  

• js調(diào)用Android函數(shù)

  //調(diào)用android獲取數(shù)據(jù)函數(shù)
  //json中約定callback字段，字段值為js中定義的接收函數(shù)名字
  var json = {"callback":"receiveAndroid"};
  window.jsInterface.getData(JSON.stringify(json));
  

• Android端定義getData函數(shù)侥祭，解析json中約定的回調(diào)函數(shù)名叁执，拿到數(shù)據(jù)后回調(diào)給js

  @JavascriptInterface
  public void getData(String jsJson){
      //從服務(wù)器獲取json數(shù)據(jù)
      try {
          //解析js callback字段中的函數(shù)名字
          JSONObject jsonObject = new JSONObject(jsJson);
          final String callback = jsonObject.optString("callback");
  
          showLog("js回調(diào)方法="+callback);
  
          final JSONObject json = new JSONObject();
          json.put("hotel_name", "8天連鎖");
          json.put("hotel_price", "28.88塊錢");
          json.put("hotel_address", "廣東省 深圳市 寶安區(qū)");
  
          mHandler.post(new Runnable() {
              @Override
              public void run() {
                  //android調(diào)用js方法必須在主線程
                  mWebview.loadUrl("javascript:"+callback+"(" + json.toString() + ")");
              }
          });
  
  
      } catch (JSONException e) {
          e.printStackTrace();
      }
  }