一.JSBridge GitHub链接
https://github.com/lzyzsd/JsBridge
二.AndroidStudio配置JsBridge
1.根目录Gradle配置
maven { url "https://jitpack.io" }
2.主目录Gradle配置
implementation 'com.github.lzyzsd:jsbridge:1.0.4'
三.代码说明 Android JS 通过JSBridge交互
1.将需要调用的JS代码以.html格式放到src/main/assets文件夹里
2.lll.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
</head>
<body>
<div class="input-field col s6">
<input placeholder="请输入数据" id="text1" type="text" class="validate">
</div>
<button type="button" id="button1" onclick="testClick()">JS调用Android 协议好的方法</button>
<button type="button" id="button2" onclick="testClick2()">JS调用Android 默认</button>
</body>
<script>
//JS调用Android方法：接收Android传递过来的数据，并做处理
function testClick() {
//参数一：调用java中的方法 submitFromWeb是方法名，必须和Android中注册时候的方法名称保持一致
//参数二：返回给Android端的数据，可以为字符串，json等信息
//参数三：js接收到Android传递过来的数据之后的相应处理逻辑
window.WebViewJavascriptBridge.callHandler(
'submitFromWeb'
, {'param': "Android你好，这是我JS传递给你的数据呀！！！"}
, function(responseData) {
alert("JS接收到Android数据弹JS对话框："+responseData)
}
);
}
//JS调用Android方法：接收Android传递过来的数据，并做处理 默认
function testClick2() {
var data2 = 'JS调用Android方法：接收Android传递过来的数据，并做处理 默认';
//参数一：调用java中的方法 submitFromWeb是方法名，必须和Android中注册时候的方法名称保持一致
//参数二：返回给Android端的数据，可以为字符串，json等信息
//参数三：js接收到Android传递过来的数据之后的相应处理逻辑
window.WebViewJavascriptBridge.send(
data2,
function(responseData){
//java中DefaultHandler所实现的方法中callback所定义的入参
alert(responseData);
});
}
//自定义JS注册事件监听 connectWebViewJavascriptBridge 方法名可改
function connectWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady'
, function() {
callback(WebViewJavascriptBridge)
},
false
);
}
}
//注册回调函数，第一次连接时调用 初始化函数 connectWebViewJavascriptBridge和上面一致
connectWebViewJavascriptBridge(function(bridge) {
//初始化 必须有 Android 通过 JSBridge 调用 默认JS bridge.init bridgeWebView.send调用
bridge.init(function(message, responseCallback) {
var data = {
'Javascript Responds': 'Android调用JS初始化方法!'
};
responseCallback(data);
});
//Android调用js方法：functionInJs方法名称需要保持一致 ，并返回给Android通知
bridge.registerHandler("functionInJs", function(data, responseCallback) {
alert("JS接收到Android数据弹JS对话框："+data);
var data2 = document.getElementById("text1").value;
var responseData =data2;
responseCallback(responseData);
});
//Android调用js方法：functionInJs方法名称需要保持一致 ，并返回给Android通知
bridge.registerHandler("functionInJs111", function(data, responseCallback) {
alert("JS接收到Android数据弹JS对话框111："+data);
var data2 = "dddddddddddddddddddddddddddddddddd";
var responseData =data2;
responseCallback(responseData);
});
})
</script>
</html>
3.Android代码
package com.wjn.customwebviewjs;
import android.content.DialogInterface;
import android.os.Bundle;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.widget.TextView;
import android.widget.Toast;
import com.github.lzyzsd.jsbridge.BridgeHandler;
import com.github.lzyzsd.jsbridge.BridgeWebView;
import com.github.lzyzsd.jsbridge.CallBackFunction;
import com.github.lzyzsd.jsbridge.DefaultHandler;
public class JsBridgeActivity extends AppCompatActivity {
private TextView textView;
private TextView textView111;
private TextView textView2;
private BridgeWebView bridgeWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_jsbridge);
initView();
}
/**
* 初始化各种View
*/
private void initView() {
textView=findViewById(R.id.activity_jsbridge_textview1);
textView111=findViewById(R.id.activity_jsbridge_textview111);
textView2=findViewById(R.id.activity_jsbridge_textview2);
bridgeWebView=findViewById(R.id.activity_jsbridge_bridgewebview);
bridgeWebView.setWebChromeClient(new myWebChromeClient());
bridgeWebView.loadUrl("file:///android_asset/lll.html");
//Android 通过 JSBridge 调用 JS
textView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
/**
* callHandler方法 Android 调用JS
* 参数1 handlerName：JS中规定的方法 Android JS 关于该方法名要一致
* 参数2 data：Android传递给JS的参数
* 参数3 callBack：回调 JS返回给Android的返回值
* */
bridgeWebView.callHandler("functionInJs", "JS你好，这是我Android传递给你的数据呀！！！", new CallBackFunction() {
@Override
public void onCallBack(String data) {
Toast.makeText(JsBridgeActivity.this, data, Toast.LENGTH_LONG).show();
}
});
}
});
//Android 通过 JSBridge 调用 JS 111
textView111.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
bridgeWebView.callHandler("functionInJs111", "JS你好，这是我Android传递给你的数据呀！！！111", new CallBackFunction() {
@Override
public void onCallBack(String data) {
Toast.makeText(JsBridgeActivity.this, data, Toast.LENGTH_LONG).show();
}
});
}
});
//JS 通过 JSBridge 调用 Android
bridgeWebView.registerHandler("submitFromWeb", new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
//JS传递给Android
Toast.makeText(JsBridgeActivity.this, data, Toast.LENGTH_LONG).show();
//Android返回给JS的消息
function.onCallBack("JS你好，这是我Android传递给你的数据呀！！！");
}
});
//Android 通过 JSBridge 调用 默认JS bridge.init (不需要配置handlerName)
textView2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
bridgeWebView.send("Android端通过调用JS默认方法,传递给JS的参数", new CallBackFunction() {
@Override
public void onCallBack(String data) {
//JS传递给Android
Toast.makeText(JsBridgeActivity.this, data, Toast.LENGTH_LONG).show();
}
});
}
});
//JS 通过 JSBridge 调用 Android默认
bridgeWebView.setDefaultHandler(new DefaultHandler(){
@Override
public void handler(String data, CallBackFunction function) {
super.handler(data, function);
Toast.makeText(JsBridgeActivity.this, data, Toast.LENGTH_SHORT).show();
function.onCallBack("JS 通过 JSBridge 调用 Android默认");
}
});
}
/**
* WebChromeClient 实现类
* */
public class myWebChromeClient extends WebChromeClient{
@Override
public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
//创建一个Builder来显示网页中的对话框
new AlertDialog.Builder(JsBridgeActivity.this)
.setTitle("Alert对话框")
.setMessage(message)
.setPositiveButton("确定", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.confirm();
}
}).setCancelable(false).show();
return true;
}
}
}
4.结果
Android 调用JS
Android 调用JS 111
Android 调用JS默认
JS调用Android
JS调用Android默认
552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
