WebViewJavascriptBridge的简单封装

来源：互联网发布：毕向东java教程35天版编辑：程序博客网时间：2024/06/07 16:05

前言

上篇介绍了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

1 0