WebViewJavascriptBridge的简单封装

最新推荐文章于 2023-08-09 15:05:18 发布

NicholasYzd

最新推荐文章于 2023-08-09 15:05:18 发布

阅读量652

点赞数 1

文章标签： javascript java+js 混合开发框架 js-java交互 android+h5

本文链接：https://blog.csdn.net/qq_27942511/article/details/71108267

版权

前言

上篇介绍了WebViewJavascriptBridge框架的使用，本片文章会对这一框架进行封装，使用起来更加的简单明了。

具体介绍

项目结构图：

对于框架这里就不多介绍了，主要说一下改动的地方，如果对原来的WebViewJavascriptBridge框架有什么不了解的可以查看http://blog.csdn.net/qq_27942511/article/details/70923176

JS→JAVA

第一种方式：

js代码，这里是封装的公共js文件,哪个html中需要进行交互，就引入这个js文件，然后直接调用就可以了
封装代码：

  $(".link_login").click(function () {
      JDSY.app.login(function (result) {
          alert(result);
      });
  });
  $(".link_gps").click(function () {
      JDSY.app.gps(function (result) {
          alert(result);
      });
  });


  $(".link_loginOut").click(function () {
      JDSY.app.loginOut(function (result) {
          alert(result);
      });
  });

  $(".link_share").click(function () {
      var share = {
          'title': '标题',
          'shareContent': '内容',
      }
      JDSY.app.share(share, function (result) {
          alert(result);
      });
  });

  $(".link_voice").click(function () {
      JDSY.app.voice(function (result) {
          alert(result);
      });
  });

  $(".link_scan").click(function () {
      JDSY.app.scan(function (result) {
          alert(result);
      });
  });

调用代码：

$(document.body).ready(function () {
    JDSY.ready(function () {
        $(".link_login").click(function () {
            JDSY.app.login(function (result) {
                alert(result);
            });
        });

        $(".link_gps").click(function () {
            JDSY.app.gps(function (result) {
                alert(result);
            });
        });

        $(".link_loginOut").click(function () {
            JDSY.app.loginOut(function (result) {
                alert(result);
            });
        });

        $(".link_share").click(function () {
            var share = {
                'title': '标题',
                'shareContent': '内容',
            }
            JDSY.app.share(share, function (result) {
                alert(result);
            });
        });

        $(".link_voice").click(function () {
            JDSY.app.voice(function (result) {
                alert(result);
            });
        });

        $(".link_scan").click(function () {
            JDSY.app.scan(function (result) {
                alert(result);
            });
        });
    });
});

java代码，

class MyWebViewClient extends WVJBWebViewClient {
    public MyWebViewClient(WebView webView) {

        // support js send
        super(webView, new WVJBWebViewClient.WVJBHandler() {

            @Override
            public void request(Object data, WVJBResponseCallback callback) {
                String str = data.toString();
                //第一种js调用java的方法
                handle(str, callback);
            }
        });
    }


    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        return super.shouldOverrideUrlLoading(view, url);
    }

}

private void handle(String data, WVJBWebViewClient.WVJBResponseCallback callback) {
    JSONObject dataJSON = null;
    try {
        dataJSON = new JSONObject(data);
        String action = dataJSON.optString("type");
        if ("gps".equals(action)) {
            handleGps(callback);
        } else if ("loginOut".equals(action)) {
            handleLoginOut(callback);
        } else if ("login".equals(action)) {
            handleLogin(callback);
        } else if ("share".equals(action)) {
            String content = dataJSON.optString("data");
            handleShare(content, callback);
        } else if ("voice".equals(action)) {
            handleVocie(callback);
        } else if ("scan".equals(action)) {
            handleScan(callback);
        }
    } catch (JSONException e) {
        e.printStackTrace();
    }

}

private void handleScan(WVJBWebViewClient.WVJBResponseCallback callback) {
    //调用扫描二维码的功能，并返回识别结果
    String code = "code from java";
    callback.callback(code);
}

private void handleVocie(WVJBWebViewClient.WVJBResponseCallback callback) {
    //调用语音识别功能,并返回识别结果
    String code = "voice result from java";
    callback.callback(code);
}

private void handleShare(String data, WVJBWebViewClient.WVJBResponseCallback callback) {
    //调用原生分享
    JSONObject jsonObject = null;
    try {
        jsonObject = new JSONObject(data);
        String title = jsonObject.optString("title");
        String content = jsonObject.optString("shareContent");
        Toast.makeText(getContext(), title + "   " + content, Toast.LENGTH_LONG).show();
    } catch (JSONException e) {
        e.printStackTrace();
    }
    callback.callback("分享成功");
}

private void handleLogin(WVJBWebViewClient.WVJBResponseCallback callback) {
    //执行登录功能，返回登录结果，tk值
    String tk = "tk from java";
    callback.callback(tk);
}

private void handleLoginOut(WVJBWebViewClient.WVJBResponseCallback callback) {
    //清除登录信息
    callback.callback("退出成功");
}

private void handleGps(WVJBWebViewClient.WVJBResponseCallback callback) {
    //获取位置并返回
    String location = "北京市朝阳区";
    callback.callback(location);
}

第二种方式：

js代码

封装代码：

 sharet: function (data, successCallback) {
    JSBridge.callHandler('share', data, function(responseData,responseCallback) {
             successCallback(responseData);
        });
  },

 gpst: function (successCallback) {
      JSBridge.callHandler('gps', null, function(responseData,responseCallback) {
          successCallback(responseData);
       });
   },

**调用代码：**

 $(".link_sharet").click(function (data) {
   var share = {
          'title': '标题2',
          'shareContent': '内容2',
      }
      JDSY.app.sharet(share, function (result) {
          alert(result);
      });
  });

  $(".link_gpst").click(function () {
      JDSY.app.gpst(function (result) {
          alert(result);
      });
  });

java代码

```
private void setBridgeEvent() {
        webViewClient.registerHandler("share", new WVJBWebViewClient.WVJBHandler() {
            @Override
            public void request(Object data, WVJBWebViewClient.WVJBResponseCallback callback) {
                String str = data.toString();
                JSONObject jsonObject = null;
                try {
                    jsonObject = new JSONObject(str);
                    String title = jsonObject.optString("title");
                    String content = jsonObject.optString("shareContent");
                    Toast.makeText(getContext(), title + "   " + content, Toast.LENGTH_LONG).show();
                } catch (JSONException e) {
                    e.printStackTrace();
                }
                callback.callback("分享成功2");
            }
        });

        webViewClient.registerHandler("gps", new WVJBWebViewClient.WVJBHandler() {
            @Override
            public void request(Object data, WVJBWebViewClient.WVJBResponseCallback callback) {
                String location = "北京市朝阳区2";
                callback.callback(location);
            }
        });
    }
```

以上是封装的js调用java代码，并回调得到数据，如果想增加修改新的action只需要在jdsy_util.js文件中增加修改相应的action，然后对应的修改Webfragment中的handle方法即可，或者是webViewClient.registerHandler（第二种方式）注册新的action。

JAVA→JS

java调用js这里就只封装了一种方式，用起来也很方便。

java代码:

view.findViewById(R.id.btn1).setOnClickListener(new View.OnClickListener() {
    @Override
     public void onClick(View v) {
         webViewClient.callHandler("alert","弹窗1");
     }
 });

 view.findViewById(R.id.btn2).setOnClickListener(new View.OnClickListener() {
     @Override
     public void onClick(View v) {
         webViewClient.callHandler("alert2","弹窗2");
     }
 });

js代码：

封装代码：

alert : function(successCallback) {
    JSBridge.registerHandler('alert', function(responseData,responseCallback) {
        successCallback(responseData);
    });
},

alert2 : function(successCallback) {
    JSBridge.registerHandler('alert2', function(responseData,responseCallback) {
        successCallback(responseData);
    });
}

初始化代码：

 JDSY.app.alert(function (result) {
    alert(result);
 });

 JDSY.app.alert2(function (result) {
    alert(result);
 });

这里需要在html加载完成的时候就要调用执行，而不是按钮点击的时候再调用，只有网页加载完时就注册成功了，java调用的时候才可能找到这个action。

代码下载：http://download.csdn.net/detail/qq_27942511/9831917

NicholasYzd

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫