混合開發js與Andorid互調

摘要： 作者：IT魔幻師 部落格：www.huyingzi.top 轉載請註明出處：https://www.jianshu.com/p/23f74055e999 一、Android端初始配...

作者：IT魔幻師

部落格：www.huyingzi.top

轉載請註明出處：https://www.jianshu.com/p/23f74055e999

一、Android端初始配置

• 定義java類

  在需要被呼叫的Java函式加上@JavascriptInterface註解

  /**
   * @專案名： JsOrJavaDemo
   * @包名： com.hubin.jsorjavademo
   * @檔名: JavaScriptBridge
   * @建立者: 胡英姿
   * @建立時間: 2018/8/24 16:13
   * @描述： 與js互動的介面類
   */
  public class JavaScriptBridge{
  private Context mContext;
  
  public JavaScriptBridge(Context context, WebView webview) {
  mContext = context;
  }
  
  /**
  * 提供js呼叫彈出javatoast
  * @param msg
  */
  @JavascriptInterface //android4.2 以上，js呼叫android方法有安全問題
  public void showTast(String msg){
  Toast.makeText(mContext, ""+msg, Toast.LENGTH_SHORT).show();
  }
  
  }

• 配置webview，建立對映關係

  //建立JavaScriptBridge
  JavaScriptBridge jsBridge = new JavaScriptBridge(mContext);
  //設定js和android通訊橋樑介面 JavaScriptBridge 對應對映欄位-->jsInterface;
  Webview.addJavascriptInterface(jsBridge, "jsInterface");
  
  
  mWebview.getSettings().setJavaScriptEnabled(true);
  //載入本地模板，需要將web相關程式碼放置assets目錄下
  mWebview.loadUrl("file:///android_asset/index.html");//本地模板

二、js呼叫Android方法

//使用json格式
var json = {"message":"你好，我是js"};
//物件.方法名（引數）
window.jsInterface.showTast(JSON.stringify(json));

三、Android呼叫js方法

• js端：定義一個函式，引數約定json格式

  //接收json物件
  function showMsg(json){
  var message = json.message;
  var name = json.name;
  showLog("name="+name+",message="+message);
  alert(JSON.stringify(json));
  };

• Android端，呼叫js需在UI執行緒執行

  //使用json格式封裝引數
  JSONObject json = new JSONObject();
  json.put("name", "android");
  json.put("message", "Hello Android world！");
  
  //切換到主執行緒
   mHandler.post(new Runnable() {
  @Override
  public void run() {
  //呼叫js方法webview.loadUrl("javascript:方法名(引數)");
  mWebview.loadUrl("javascript:showMsg("+json.toString()+")");
  }
   });

四、引入CallBack實現Android回撥並解耦

• js端定義回調回函

  function receiveAndroid(json){
  showLog("接收android回撥資料="+JSON.stringify(json));
  };

• js呼叫Android函式

  //呼叫android獲取資料函式
  //json中約定callback欄位，欄位值為js中定義的接收函式名字
  var json = {"callback":"receiveAndroid"};
  window.jsInterface.getData(JSON.stringify(json));

• Android端定義getData函式，解析json中約定的回撥函式名，拿到資料後回撥給js

  @JavascriptInterface
  public void getData(String jsJson){
  //從伺服器獲取json資料
  try {
  //解析js callback欄位中的函式名字
  JSONObject jsonObject = new JSONObject(jsJson);
  final String callback = jsonObject.optString("callback");
  
  showLog("js回撥方法="+callback);
  
  final JSONObject json = new JSONObject();
  json.put("hotel_name", "8天連鎖");
  json.put("hotel_price", "28.88塊錢");
  json.put("hotel_address", "廣東省 深圳市 寶安區");
  
  mHandler.post(new Runnable() {
  @Override
  public void run() {
  //android呼叫js方法必須在主執行緒
  mWebview.loadUrl("javascript:"+callback+"(" + json.toString() + ")");
  }
  });
  
  
  } catch (JSONException e) {
  e.printStackTrace();
  }
  }