Categories
程式開發

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


前言

因为JsBridge“里的example内容很多,自己第一次看这个东西,一下子还是一头雾水的,关于Android与JavaScript的交互,之前都是直接使用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

Show Contents:

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


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");

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

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

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

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

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

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

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

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