第一篇：js调用java方法的环境搭建
开发环境
1.jdk 1.8
2.IntelliJ IDEA
在javafx中有webview控件，该控件默认内核使用的是webkit，首先我们创建一个js文件该文件需要导入html中, JSBridge.js代码如下：
var JSBridge = function () {};
var PortUtil = function () {};
JSBridge.callbacks = {};
// 通过此方法调用java方法
JSBridge.call = function (obj, method, params, callback) {
var port = PortUtil.getPort();
this.callbacks[port] = callback;
var uri = PortUtil.getUri(obj, method, params, port);
alert(uri);
}
// 通过此方法调用回调方法
JSBridge.onFinish = function (port, jsonObj){
var callback = this.callbacks[port];
callback && callback(jsonObj);
delete this.callbacks[port];
}
// 获取port
PortUtil.getPort = function () {
return Math.floor(Math.random() * (1 << 30));
}
// 获取url
PortUtil.getUri = function(obj, method, params, port){
params = this.getParam(params);
var uri = '{"className":"' + obj + '","port":"' + port + '","method":"' + method + '","params":' + params + '}';
return uri;
}
// 将对象转换成字符串
PortUtil.getParam = function(obj){
if (obj && typeof obj === 'object') {
return JSON.stringify(obj);
} else {
return obj || '';
}
}创建一个html，名称为test.html：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>JSBridge</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1, user-scalable=no"/>
<!-- 格式：className,方法,数据，回调函数 -->
<script type="text/javascript" src="JSBridge.js"/>
<script type="text/javascript">
</script>
<style>
</style>
</head>
<body>
<div>
<h3>JSBridge 测试</h3>
</div>
<ul class="list">
<li>
<div>
<h3 id="myH3">未改变</h3>
<button id="myBtn" onclick="JSBridge.call('sample.ReflectBean.Test','GetMsg',{'msg':'Hello JSBridge'}, function(data) {
document.getElementById('myH3').innerHTML = data;
})">
测试showToast
</button>
</div>
</li>
<br/>
</ul>
</body>
</html>这样最基本的框架初步搭建完成，由于javafx本身已经实现js可触发java的方法，这里我使用的alert()方法来做通讯传递，协议内容为json格式，可以看到JSBridge.call最后一个参数传递的function(data)(这里的data默认定义为string json格式)，这里的function表示回调函数,本篇到处结束。
