Android与JS通过JSBridge(BridgeWebView )相互调用详解

一.JSBridge GitHub链接

https://github.com/lzyzsd/JsBridge

二.AndroidStudio配置JsBridge

1.根目录Gradle配置

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

2.主目录Gradle配置

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

三.代码说明 Android JS 通过JSBridge交互

步骤1：将需要调用的JS代码以.html格式放到src/main/assets文件夹里

步骤2：lll.html代码

                Test

步骤3：Android代码

package com.wjn.customwebviewjs;import android.content.DialogInterface;import android.os.Bundle;import android.support.v7.app.AlertDialog;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.webkit.JsResult;import android.webkit.WebChromeClient;import android.webkit.WebView;import android.widget.TextView;import android.widget.Toast;import com.github.lzyzsd.jsbridge.BridgeHandler;import com.github.lzyzsd.jsbridge.BridgeWebView;import com.github.lzyzsd.jsbridge.CallBackFunction;import com.github.lzyzsd.jsbridge.DefaultHandler;public class JsBridgeActivity extends AppCompatActivity {    private TextView textView;    private TextView textView111;    private TextView textView2;    private BridgeWebView bridgeWebView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_jsbridge);        initView();    }    /**     * 初始化各种View     */    private void initView() {        textView=findViewById(R.id.activity_jsbridge_textview1);        textView111=findViewById(R.id.activity_jsbridge_textview111);        textView2=findViewById(R.id.activity_jsbridge_textview2);        bridgeWebView=findViewById(R.id.activity_jsbridge_bridgewebview);        bridgeWebView.setWebChromeClient(new myWebChromeClient());        bridgeWebView.loadUrl("file:///android_asset/lll.html");        //Android 通过 JSBridge 调用 JS        textView.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                /**                 * callHandler方法 Android 调用JS                 * 参数1 handlerName：JS中规定的方法 Android JS 关于该方法名要一致                 * 参数2 data：Android传递给JS的参数                 * 参数3 callBack：回调 JS返回给Android的返回值                 * */                bridgeWebView.callHandler("functionInJs", "JS你好，这是我Android传递给你的数据呀！！！", new CallBackFunction() {                    @Override                    public void onCallBack(String data) {                        Toast.makeText(JsBridgeActivity.this, data, Toast.LENGTH_LONG).show();                    }                });            }        });        //Android 通过 JSBridge 调用 JS 111        textView111.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                bridgeWebView.callHandler("functionInJs111", "JS你好，这是我Android传递给你的数据呀！！！111", new CallBackFunction() {                    @Override                    public void onCallBack(String data) {                        Toast.makeText(JsBridgeActivity.this, data, Toast.LENGTH_LONG).show();                    }                });            }        });        //JS 通过 JSBridge 调用 Android        bridgeWebView.registerHandler("submitFromWeb", new BridgeHandler() {            @Override            public void handler(String data, CallBackFunction function) {                //JS传递给Android                Toast.makeText(JsBridgeActivity.this,  data, Toast.LENGTH_LONG).show();                //Android返回给JS的消息                function.onCallBack("JS你好，这是我Android传递给你的数据呀！！！");            }        });        //Android 通过 JSBridge 调用 默认JS bridge.init (不需要配置handlerName)        textView2.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                bridgeWebView.send("Android端通过调用JS默认方法,传递给JS的参数", new CallBackFunction() {                    @Override                    public void onCallBack(String data) {                        //JS传递给Android                        Toast.makeText(JsBridgeActivity.this,  data, Toast.LENGTH_LONG).show();                    }                });            }        });        //JS 通过 JSBridge 调用 Android默认        bridgeWebView.setDefaultHandler(new DefaultHandler(){            @Override            public void handler(String data, CallBackFunction function) {                super.handler(data, function);                Toast.makeText(JsBridgeActivity.this, data, Toast.LENGTH_SHORT).show();                function.onCallBack("JS 通过 JSBridge 调用 Android默认");            }        });    }    /**     * WebChromeClient 实现类     * */    public class myWebChromeClient extends WebChromeClient{        @Override        public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {            //创建一个Builder来显示网页中的对话框            new AlertDialog.Builder(JsBridgeActivity.this)                    .setTitle("Alert对话框")                    .setMessage(message)                    .setPositiveButton("确定", new DialogInterface.OnClickListener() {                        @Override                        public void onClick(DialogInterface dialog, int which) {                            result.confirm();                        }                    }).setCancelable(false).show();            return true;        }    }}

步骤4：结果

Android 调用JS

Android 调用JS 111

Android 调用JS默认

JS调用Android

JS调用Android默认

代码下载：https://github.com/wujianning/CustomWebViewJS

一.JSBridge GitHub链接

二.AndroidStudio配置JsBridge

三.代码说明 Android JS 通过JSBridge交互

更多相关文章

随机推荐