Android与JS交互之JSBridge框架的使用

一、前言：

众所周知，app的一些功能可能会使用到H5开发，这就难免会遇到java与js 的相互调用，android 利用WebViewJavascriptBridge 实现js和java的交互，这里介绍下JsBridge第三方库的使用。

github传送门：github.com/lzyzsd/JsBr…  （本地下载）

java与js相互调用如下：

• java发送数据给js，js接收并回传给java
• 同理，js发送数据给java，java接收并回传给js
• 同时两套流程都存在「默认接收」 与 「指定接收」

二、使用：

1、项目依赖：

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

dependencies {
    compile 'com.github.lzyzsd:jsbridge:1.0.4'
}

2、XML使用：

<com.github.lzyzsd.jsbridge.BridgeWebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_constraintTop_toBottomOf="@+id/tv_title"
    app:layout_constraintBottom_toTopOf="@+id/tv_cancel"
    android:layout_marginHorizontal="@dimen/ui_dp_12"
    android:layout_marginVertical="@dimen/ui_dp_3"
    android:orientation="vertical"
    />

3、代码

var webView = findViewById<BridgeWebView>(R.id.webView)


//加载H5的方法
private fun initWebView(bridgeWebView: BridgeWebView) {
    //WebView常用配置

    var settings: WebSettings = bridgeWebView.getSettings();

    settings.setJavaScriptEnabled(true);//允许使用js

    settings.setDomStorageEnabled(true);//设置适应Html5

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {

        bridgeWebView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);

    }
    settings.setCacheMode(WebSettings.LOAD_NO_CACHE);//不使用缓存，只从网络获取数据.
    // 设置WebView属性，能够执行Javascript脚本
    settings.setDefaultTextEncodingName("utf-8");
    //允许webview对文件的操作
    settings.setAllowUniversalAccessFromFileURLs(true);
    settings.setAllowFileAccess(true);

    settings.setAllowFileAccessFromFileURLs(true);
    settings.setAllowContentAccess(true);
    settings.setDatabaseEnabled(true);
    bridgeWebView.setWebChromeClient( WebChromeClient());
    //加载url
    bridgeWebView.loadUrl(payUrl)
    bridgeWebView.setWebViewClient(object : BridgeWebViewClient(bridgeWebView) {
        override fun onPageFinished(view: WebView?, url: String?) {
            super.onPageFinished(view, url)
        }
    })

    //指定接受的消息，监听H5的方法名getUserForH5
    bridgeWebView.registerHandler("getUserForH5"){ data,function ->

        var userInfoBean = UserUtils.userInfoBean
        var token = MmkvUtils.decodeString(MmkvConstantUtils.ACCESS_TOKEN)
        var userInfo = HashMap<String,Any>()
        userInfo.put("user_id",userInfoBean?.userId?:"")
        userInfo.put("user_token",token)

        var gson = Gson()
        var json = gson.toJson(userInfo)
        //回调的内容
        function.onCallBack(json)

    }

}

4、其它参数传递

// 1、Java发送消息给js
//(默认接收)
bridgeWebView.send("发送数据给js默认接收",object :CallBackFunction{
    override fun onCallBack(data: String?) {
         //处理js回传的数据
        LogUtils.debugInfo("js返回数据：${data}")
    }

})
// 2、Java发送消息给js
//(指定参数接受接收)
bridgeWebView.callHandler("JavaJs","发送数据给js指定接收",object : CallBackFunction{
    override fun onCallBack(data: String?) {
        //处理js回传的数据
        LogUtils.debugInfo("js返回数据：${data}")
    }

})

// 3、js发送消息给Java
//(默认接收)
bridgeWebView.setDefaultHandler(object :BridgeHandler{
    override fun handler(data: String?, function: CallBackFunction?) {
        LogUtils.debugInfo("默认接收到js的数据：：${data}")
        //回传数据给js
        function?.onCallBack("java默认接收完毕，并回传数据给js")
    }

})

// 4、js发送消息给Java
//(指定参数接收)
bridgeWebView.registerHandler("submitFromWeb",object :BridgeHandler{
    override fun handler(data: String?, function: CallBackFunction?) {
        LogUtils.debugInfo("指定接收到js的数据：：${data}")
        //回传数据给js
        function?.onCallBack("java指定接收完毕，并回传数据给js")
    }

})

至此，jsBridge的使用流程完毕。

//网络权限别忘了
<uses-permission android:name="android.permission.INTERNET" />

参考：www.jb51.net/article/137…