混合开发js与Andorid互调

作者：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调用弹出java  toast
       * @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();
      }
  }