WebViewJavascriptBridge的简单封装

前言

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