混合开发js与Andorid互调

作者: IT魔幻师 | 来源:发表于2018-09-10 11:33 被阅读22次

    作者: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();
          }
      }
      

    相关文章

      网友评论

        本文标题:混合开发js与Andorid互调

        本文链接:https://www.haomeiwen.com/subject/fexsgftx.html