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代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Test</title>
</head>
<body>
<div class="input-field col s6"><input placeholder="请输入数据" id="text1" type="text" class="validate">
</div><button type="button" id="button1" onclick="testClick()">JS调用Android 协议好的方法</button><button type="button" id="button2" onclick="testClick2()">JS调用Android 默认</button>
</body>
<script>//JS调用Android方法：接收Android传递过来的数据，并做处理function testClick() {//参数一：调用java中的方法   submitFromWeb是方法名，必须和Android中注册时候的方法名称保持一致//参数二：返回给Android端的数据，可以为字符串，json等信息//参数三：js接收到Android传递过来的数据之后的相应处理逻辑window.WebViewJavascriptBridge.callHandler('submitFromWeb', {'param': "Android你好，这是我JS传递给你的数据呀！！！"}, function(responseData) {alert("JS接收到Android数据弹JS对话框："+responseData)});}//JS调用Android方法：接收Android传递过来的数据，并做处理 默认function testClick2() {var data2 = 'JS调用Android方法：接收Android传递过来的数据，并做处理 默认';//参数一：调用java中的方法   submitFromWeb是方法名，必须和Android中注册时候的方法名称保持一致//参数二：返回给Android端的数据，可以为字符串，json等信息//参数三：js接收到Android传递过来的数据之后的相应处理逻辑window.WebViewJavascriptBridge.send(data2,function(responseData){//java中DefaultHandler所实现的方法中callback所定义的入参alert(responseData);});}//自定义JS注册事件监听 connectWebViewJavascriptBridge 方法名可改function connectWebViewJavascriptBridge(callback) {if (window.WebViewJavascriptBridge) {callback(WebViewJavascriptBridge)} else {document.addEventListener('WebViewJavascriptBridgeReady', function() {callback(WebViewJavascriptBridge)},false);}}//注册回调函数，第一次连接时调用 初始化函数 connectWebViewJavascriptBridge和上面一致connectWebViewJavascriptBridge(function(bridge) {//初始化 必须有 Android 通过 JSBridge 调用 默认JS bridge.init bridgeWebView.send调用bridge.init(function(message, responseCallback) {var data = {'Javascript Responds': 'Android调用JS初始化方法!'};responseCallback(data);});//Android调用js方法：functionInJs方法名称需要保持一致 ，并返回给Android通知bridge.registerHandler("functionInJs", function(data, responseCallback) {alert("JS接收到Android数据弹JS对话框："+data);var data2 = document.getElementById("text1").value;var responseData =data2;responseCallback(responseData);});//Android调用js方法：functionInJs方法名称需要保持一致 ，并返回给Android通知bridge.registerHandler("functionInJs111", function(data, responseCallback) {alert("JS接收到Android数据弹JS对话框111："+data);var data2 = "dddddddddddddddddddddddddddddddddd";var responseData =data2;responseCallback(responseData);});})</script>
</html>

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;@Overrideprotected 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 调用 JStextView.setOnClickListener(new View.OnClickListener() {@Overridepublic 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() {@Overridepublic void onCallBack(String data) {Toast.makeText(JsBridgeActivity.this, data, Toast.LENGTH_LONG).show();}});}});//Android 通过 JSBridge 调用 JS 111textView111.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {bridgeWebView.callHandler("functionInJs111", "JS你好，这是我Android传递给你的数据呀！！！111", new CallBackFunction() {@Overridepublic void onCallBack(String data) {Toast.makeText(JsBridgeActivity.this, data, Toast.LENGTH_LONG).show();}});}});//JS 通过 JSBridge 调用 AndroidbridgeWebView.registerHandler("submitFromWeb", new BridgeHandler() {@Overridepublic void handler(String data, CallBackFunction function) {//JS传递给AndroidToast.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() {@Overridepublic void onClick(View v) {bridgeWebView.send("Android端通过调用JS默认方法,传递给JS的参数", new CallBackFunction() {@Overridepublic void onCallBack(String data) {//JS传递给AndroidToast.makeText(JsBridgeActivity.this,  data, Toast.LENGTH_LONG).show();}});}});//JS 通过 JSBridge 调用 Android默认bridgeWebView.setDefaultHandler(new DefaultHandler(){@Overridepublic 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{@Overridepublic 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() {@Overridepublic 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

Android JS 通过JSBridge(BridgeWebView)相互调用详解相关推荐

java调用js匿名函数参数,js匿名函数作为函数参数详解
由衷的感叹,js真是烦. 学到现在,渐渐理解了什么是:语言都是通用的,没有好不好,只有擅长不擅长. 继承,多态,甚至指针,c能实现,c++,java有,javascript(和java是雷锋和雷峰塔的 ...
vue在created调用点击方法_vue.js中created方法的使用详解
这次给大家带来vue.js中created方法的使用详解,使用vue.js中created方法的注意事项有哪些,下面就是实战案例,一起来看一下. 这是它的一个生命周期钩子函数,就是一个vue实例被生成 ...
ArcGIS 栅格函数在线调用详解
ArcGIS 栅格函数在线调用详解导读:ArcGIS从10.0版本开始引用镶嵌数据集,并且第一次在影像中加入栅格函数(raster functions),使得影像的呈现和信息提取与GIS紧密的结合起 ...
JS弹出窗口Window.Open详解
JS弹出窗口Window.Open详解一.window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二.基本语法: windo ...
Android进阶笔记：Messenger源码详解
Messenger可以理解为一个是用于发送消息的一个类用法也很多,这里主要分析一下再跨进程的情况下Messenger的实现流程与源码分析.相信结合前面两篇关于aidl解析文章能够更好的对aidl有一个 ...
android中怎么网络判断,Android中判断网络是否连接实例详解
Android中判断网络是否连接实例详解在android中,如何监测网络的状态呢,这个有的时候也是十分重要的,方法如下: public class ConnectionDetector { priv ...
Android消息传递之EventBus 3.0使用详解
前言: 前面两篇不仅学习了子线程与UI主线程之间的通信方式,也学习了如何实现组件之间通信,基于前面的知识我们今天来分析一下EventBus是如何管理事件总线的,EventBus到底是不是最佳方案?学习 ...
Android低功耗蓝牙（BLE）使用详解
代码地址如下: http://www.demodashi.com/demo/13390.html 与普通蓝牙相比,低功耗蓝牙显著降低了能量消耗,允许Android应用程序与具有更严格电源要求的BLE设 ...
Android系统（96）---Android 数据交换解析框架Gson使用详解
Android 数据交换解析框架Gson使用详解 Json 是一种文本形式的数据交换格式,比 xml 更为轻量.Json 的解析和生成的方式很多,在 Android 平台上最常用的类库有 Gson 和 ...

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

一.JSBridge GitHub链接

二.AndroidStudio配置JsBridge

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

Android JS 通过JSBridge(BridgeWebView)相互调用详解相关推荐

最新文章

热门文章