Android JsBridge的集成

最新推荐文章于 2024-08-21 08:51:32 发布

HadesCool

最新推荐文章于 2024-08-21 08:51:32 发布

阅读量934

点赞数

分类专栏： JS android android studio Java技术文章标签： JsBridge Android JS JavaScript

本文链接：https://blog.csdn.net/SkunkLuck/article/details/82592194

版权

android 同时被 3 个专栏收录

15 篇文章

订阅专栏

android studio

14 篇文章

订阅专栏

Java技术

11 篇文章

订阅专栏

本文详细介绍了如何在Android项目中集成并使用JsBridge。首先，我们从官方GitHub仓库(https://github.com/lzyzsd/JsBridge)获取资源。接着，按照官方指导步骤，将JsBridge库集成到Android应用中。最后，通过示例代码展示了如何在Android与JavaScript之间建立通信桥梁。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：官网 https://github.com/lzyzsd/JsBridge

2：根据官网，集成JsBridge

3：代码

package com.hades.xq.jsbridge

import android.net.Uri
import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.util.Log
import android.view.View
import android.webkit.ValueCallback
import android.webkit.WebChromeClient
import com.github.lzyzsd.jsbridge.DefaultHandler
import kotlinx.android.synthetic.main.activity_main.*


class MainActivity : AppCompatActivity(), View.OnClickListener {

    private val TAG = "TAG"

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        init()
    }

    private fun init() {
        button.setOnClickListener(this)
        button2.setOnClickListener(this)

        webView.setDefaultHandler(DefaultHandler())

        webView.webChromeClient = object : WebChromeClient() {

            fun openFileChooser(uploadMsg: ValueCallback<Uri>, AcceptType: String, capture: String) {
                this.openFileChooser(uploadMsg)
            }

            fun openFileChooser(uploadMsg: ValueCallback<Uri>, AcceptType: String) {
                this.openFileChooser(uploadMsg)
            }

            fun openFileChooser(uploadMsg: ValueCallback<Uri>) {
                Log.i(TAG, "uploadMsg-->$uploadMsg")
            }
        }
        webView.loadUrl("file:///android_asset/jsbridge.html")
        webView.registerHandler("submitFromWeb") { data, function ->
            Log.i(TAG, "JS传递过来的数据data：$data")
            //回调js方法
            function.onCallBack("回调js方法啦")
        }

    }

    private fun send(){
        webView.callHandler("functionInJs", "Android 调用JS的代码") {
            Log.i(TAG,"Android 调用JS的代码 js回调")
        }
    }

    private fun send2(){
        webView.callHandler("functionInJs002", "Android 调用JS的代码2") {
            Log.i(TAG,"Android 调用JS的代码 js回调2")
        }
    }


    override fun onClick(v: View?) {
        v?.let {
            when (v?.id) {
                R.id.button -> {
                    send()
                }
                R.id.button2->{
                    send2()
                }
            }
        }
    }

}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- button 演示Java调用web -->
    <Button
    android:id="@+id/button"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:text="@string/button_name" />

    <!-- button 演示Java调用web -->
    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:text="@string/button_name2" />

    <!-- webview 演示web调用Java -->
    <com.github.lzyzsd.jsbridge.BridgeWebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></com.github.lzyzsd.jsbridge.BridgeWebView>

</LinearLayout>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSBridge</title>
    <script language="JavaScript">

    function doAndroidCall() {
      window.WebViewJavascriptBridge.callHandler(
        'submitFromWeb'
        , {'param': '中文测试'}
        , function(responseData) {
          document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
        }
      );
    }

    // android 调用js方法的环境(*****)  the start
    function connectWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) {
                callback(WebViewJavascriptBridge)
            } else {
                document.addEventListener(
                    'WebViewJavascriptBridgeReady'
                    , function() {
                        callback(WebViewJavascriptBridge)
                    },
                    false
                );
            }
        }

        connectWebViewJavascriptBridge(function(bridge) {
            bridge.init(function(message, responseCallback) {
                console.log('JS got a message', message);
                var data = {
                    'Javascript Responds': '测试中文!'
                };

                if (responseCallback) {
                    console.log('JS responding with', data);
                    responseCallback(data);
                }
            });

          //Android约定调用JS方法 the start
            bridge.registerHandler("functionInJs", function(data, responseCallback) {
                document.getElementById("show").innerHTML = ("data from Java: = " + data);
                if (responseCallback) {
                    var responseData = "Javascript Says Right back aka!";
                    responseCallback(responseData);
                }
            });
            bridge.registerHandler("functionInJs002", function(data, responseCallback) {
                document.getElementById("show").innerHTML = ("data from Java: = " + data);
                if (responseCallback) {
                    var responseData = "Javascript Says Right back aka!";
                    responseCallback(responseData);
                }
            });
            //Android约定调用JS方法 the end
        })
         // android 调用js方法的环境(*****)  the  end

    </script>
</head>
<body>
<p>
    <xmp id="show">
    </xmp>
</p>
<button type="button" onclick="doAndroidCall()">点击</button>
</body>
</html>