Android 与 JS 的交互:JsBridge 的简单使用

用户头像
brave heart
关注
发布于: 2020 年 05 月 23 日
Android与JS的交互:JsBridge的简单使用

前言

因为JsBridge里的example内容很多,自己第一次看这个东西,一下子还是一头雾水的,关于AndroidJavaScript的交互,之前都是直接使用WebView来实现的,可是后来并没有深入去研究这个东西,原先项目使用到的WebView,也因为仅仅只是展示html页面,为了优化,也换成了TBS腾讯浏览服务,之后再也没接触到Android与JS交互相关的知识,就趁这个机会,把这方面的一点心得记录一下。



准备工作

1.首先,需要在根目录下的build.gradle文件中加上:

repositories {
// ...
maven { url "https://jitpack.io" }
}



2.然后,需要在app目录下的build.gradle文件中加上依赖:

implementation 'com.github.lzyzsd:jsbridge:1.0.4'

开始使用

一、实现通过JavaScript调用Android方法

1.在src/main文件夹下新建一个assets文件夹,然后在里面新建一个demo.html文件,内容如下所示:

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
</head>
<body style="background-color:antiquewhite;">
HTML
<p>
<input
type="button"
value="Call Android Method"
onclick="testClicked()"
/>
</p>
<p style="width: 100%;">
<span id="show">Show Contents:</span>
</p>
</body>
<script>
function testClicked() {
window.WebViewJavascriptBridge.callHandler(
"jsCallAndroid",
{ name: "weihao" },
function(responseData) {
document.getElementById("show").innerHTML = responseData;
}
);
}
/**
这个库将把WebViewJavascriptBridge对象注入到窗口对象。
所以在您的js中,在使用WebViewJavascriptBridge之前,
必须检测WebViewJavascriptBridge是否存在。
如果WebViewJavascriptBridge未退出,
则可以侦听WebViewJavascriptBridgeReady事件
*/
connectWebViewJavascriptBridge(function(bridge) {
bridge.init(function(message, responseCallback) {
if (responseCallback) {
responseCallback(data);
}
});
});
function connectWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge);
} else {
document.addEventListener(
"WebViewJavascriptBridgeReady",
function() {
callback(WebViewJavascriptBridge);
},
false
);
}
}
</script>
</html>

2.需要在activity_main.xml文件中,加上布局:

<com.github.lzyzsd.jsbridge.BridgeWebView
android:id="@+id/bridgeWebview"
app:layout_constraintTop_toTopOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/tv_content"
app:layout_constraintTop_toBottomOf="@+id/bt_calljs"
app:layout_constraintLeft_toLeftOf="@+id/bt_calljs"
android:layout_width="wrap_content"
android:layout_marginTop="10dp"
android:text="Content"
android:layout_height="wrap_content"/>

3.在MainActivity.java中注册一个方法jsCallAndroid,用于JS调用,并且使用loadUrl加载demo.html文件,代码如下所示:

bridgeWebview.registerHandler("jsCallAndroid", new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
tvContent.setText("params from JavaScript: " + data);
JSONObject jsonObject = new JSONObject();
try {
jsonObject.put("nickname", "braveheart");
jsonObject.put("age", "18");
jsonObject.put("address", "China");
} catch (JSONException e) {
e.printStackTrace();
}
function.onCallBack("return data from Android: "+jsonObject.toString());
}
});
bridgeWebview.loadUrl("file:///android_asset/demo.html");

上面主要是为了使AndroidJS的交互更为形象,所以就模拟成一个网络请求获取用户信息的方式来说明,其意思是,当从JS调用这个Android方法jsCallAndroid时,需要传入参数data,也就是{ "name" : "weihao" },然后会从Android返回用户信息,也就是:

{"nickname":"braveheart","age":"18","address":"China"}

4.运行效果,如下图所示:

上部分是demo.html文件页面,下部分是Android原生页面,其中可以看到,当点击Call Android Method按钮时,JS调用Android方法jsCallAndroidAndroid页面的TextView控件获取到了传过来的参数{ "name" : "weihao" },并且在demo.html页面确实从Android返回了用户信息:

{"nickname":"braveheart","age":"18","address":"China"}



二、实现在Android里调用JavaScript方法



1.在activity_main.xml文件中,加上一个Button控件,代码如下所示:

<Button
android:id="@+id/bt_call_js"
app:layout_constraintTop_toBottomOf="@+id/tv_android"
app:layout_constraintLeft_toLeftOf="@+id/tv_android"
android:layout_width="wrap_content"
android:textAllCaps="false"
android:text="Call JavaScript Method"
android:layout_height="wrap_content"/>

2.需要在demo.html文件里的connectWebViewJavascriptBridge方法里加上一个让Android调用的方法androidCallJS,代码如下所示:

bridge.registerHandler("androidCallJS", function(data, responseCallback) {
document.getElementById("show").innerHTML =
"params from Android:" + data;
if (responseCallback) {
var responseData = `{"nickname":"braveheart","age":"18","address":"China"}`;
responseCallback(responseData);
}
});

3.在MainActivity.java中加上如下代码,用于调用JS里的androidCallJS方法,代码如下所示:

btCallJS.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
bridgeWebview.callHandler("androidCallJS","{ name: \"weihao\" }", new CallBackFunction() {
@Override
public void onCallBack(String data) {
tvContent.setText("return data from JavaScript: "+data);
}
});
}
});

以上也是通过模拟网络请求获取用户信息的方式,来形象说明AndroidJS的交互,只不过改成了从Android传入用户名,从JS返回用户信息而已。 

4.运行效果,如下图所示:



 示例代码:https://github.com/BRAVE2HEART/JsBridge-example



发布于: 2020 年 05 月 23 日 阅读数: 1461
用户头像

brave heart

关注

唯一不变的是变化本身。 2018.04.17 加入

🗡 她只唱只想这首止战之殇。

评论 (2 条评论)

发布
用户头像
有些功能的实现直接调用native提供的API就行了,没有仔细了解过JsBridge,刚好借此文章了解一下,感谢分享。
2020 年 05 月 25 日 17:09
回复
哈哈哈,是的,感觉WebView其实都满足很多需求了。
2020 年 05 月 25 日 19:31
回复
没有更多了
Android与JS的交互:JsBridge的简单使用