JsBridge使用演示
2018-12-26 本文已影响2人
奔跑吧李博
在Android项目开发中，如果需要在Android程序中调用web中的功能，我们可以用Jsbridge来作为桥梁进行沟通调用。
演示样例：
Jsbridge相互调用演示
Jsbridge库引入：
implementation 'com.github.lzyzsd:jsbridge:1.0.4'
一端提供另一端调用的方法，需要使用registerHandler()方法进行注册，另一端调用的回调接收需要callHandler()方法获取回调。
Android部分代码：
private void initView() {
tvJs = (TextView) findViewById(R.id.tv_androidcalljs);
tvShowmsg = (TextView) findViewById(R.id.tv_showmsg);
webview = (BridgeWebView) findViewById(R.id.webview);
WebSettings webSettings = webview.getSettings();
webSettings.setBuiltInZoomControls(true);
webSettings.setSupportZoom(true);
//与js交互必须设置
webSettings.setJavaScriptEnabled(true);
webview.loadUrl("file:///android_asset/html.html");
}
private void callJs(){
tvJs.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
webview.callHandler("functionInJs", "Android传递给js的数据", new CallBackFunction() {
@Override
public void onCallBack(String data) {
tvShowmsg.setText(data);
}
});
}
});
}
private void registerInJs() {
webview.registerHandler("functionInAndroid", new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
tvShowmsg.setText("js调用了Android");
//返回给html
function.onCallBack("Android回传给js的数据");
}
});
}
html部分代码：
<body>
<h3>html模块</h3>
<p>
<input type="button" id="enter" value="调用安卓的方法" onclick="onClick();"/>
</p>
<p>
<h3 id="showmsg"></h3>
</p>
<script>
// 注册事件监听
function connectWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady'
, function() {
callback(WebViewJavascriptBridge)
},
false
);
}
}
// 发送消息给Android
function onClick() {
var data = document.getElementById("showmsg").value;
window.WebViewJavascriptBridge.callHandler(
'functionInAndroid'
, {'param': "js传给Android的数据"}
, function(responseData) {
document.getElementById("showmsg").innerHTML = responseData;
}
);
}
// 在JS中注册默认的Handler
connectWebViewJavascriptBridge(function(bridge) {
//初始化
bridge.init(function(message, responseCallback) {
var data = {
'Javascript Responds': 'HelloWorld'
};
responseCallback(data);
});
//接收安卓发来的消息 并返回给安卓通知
bridge.registerHandler("functionInJs", function(data, responseCallback) {
document.getElementById("showmsg").innerHTML = data;
var responseData = "js回传给Android的数据";
responseCallback(responseData);
});
})
</script>
</body>
xml部分代码：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.androidusejs.MainActivity"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:padding="10dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android模块"
android:textColor="#000"
android:textStyle="bold"
android:textSize="18sp"/>
<TextView
android:id="@+id/tv_androidcalljs"
android:layout_width="170dp"
android:layout_height="30dp"
android:text="Android调用Js"
android:background="@drawable/roundsmall_bggreen"
android:gravity="center"
android:layout_marginTop="10dp"
android:textColor="@color/white"/>
<TextView
android:id="@+id/tv_showmsg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000"
android:layout_marginTop="20dp"
android:textSize="20sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<com.github.lzyzsd.jsbridge.BridgeWebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>
