android和js的交互之jsbridge使用教程
前言
众所周知，app的一些功能可能会使用到H5开发，这就难免会遇到java与js 的相互调用，android 利用WebViewJavascriptBridge 实现js和java的交互，这里介绍下JsBridge第三方库的使用。
github传送门：https://github.com/lzyzsd/JsBridge （本地下载）
简单分析
java与js相互调用如下：
java发送数据给js，js接收并回传给java
同理，js发送数据给java，java接收并回传给js
同时两套流程都存在「默认接收」 与 「指定接收」
大致调用流程图如下：
依赖
项目build.gradle
repositories {
// ...
maven { url "https://jitpack.io" }
}
app build.gradle
dependencies {
compile 'com.github.lzyzsd:jsbridge:1.0.4'
}
xml里直接使用com.github.lzyzsd.jsbridge.BridgeWebView替代原生WebView
另外放置两个Button用于测试使用
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/java_to_js_default" android:layout_width="180dp" android:layout_height="wrap_content" android:layout_margin="10dp" android:text="java发送给js默认接收" app:layout_constraintTop_toBottomOf="@+id/nav_bar" /> <Button android:id="@+id/java_to_js_spec" android:layout_width="180dp" android:layout_height="wrap_content" android:layout_margin="10dp" android:text="java发送给js指定接收" app:layout_constraintTop_toBottomOf="@+id/java_to_js_default" /> <com.github.lzyzsd.jsbridge.BridgeWebView android:id="@+id/webView" android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toBottomOf="@+id/java_to_js_spec" /> </android.support.constraint.ConstraintLayout>
html文件里简单放置两按钮发送数据，同时提供打印信息
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <button onClick="jsToJavaDefault()">js发送给java默认接收</button> </div> <br/> <div> <button onClick="jsToJavaSpec()">js发送给java指定接收</button> </div> <br/> <div id="show">打印信息</div> </body> </html>
这里我本地跑的一个简单的django项目，起了个服务供使用
webView.loadUrl(http://10.0.0.142:8000/cake/jsbridge);
webview加载页面
java发送数据给js
button注册监听
javaToJsDefault.setOnClickListener(this); javaToJsSpec.setOnClickListener(this);
按钮点击事件，java传递数据给js
//java传递数据给js
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.java_to_js_default:
//默认接收
webView.send("发送数据给js默认接收", new CallBackFunction() {
@Override
public void onCallBack(String data) { //处理js回传的数据
Toast.makeText(WebTestActivity.this, data, Toast.LENGTH_LONG).show();
}
});
break;
case R.id.java_to_js_spec:
//指定接收参数 functionInJs
webView.callHandler("functionInJs", "发送数据给js指定接收", new CallBackFunction() {
@Override
public void onCallBack(String data) { //处理js回传的数据
Toast.makeText(WebTestActivity.this, data, Toast.LENGTH_LONG).show();
}
});
break;
default:
break;
}
}
js WebViewJavascriptBridge注册事件监听，接收数据
<script>
//注册事件监听，初始化
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady'
, function() {
callback(WebViewJavascriptBridge)
},
false
);
}
}
//回调函数，接收java发送来的数据
setupWebViewJavascriptBridge(function(bridge) {
//默认接收
bridge.init(function(message, responseCallback) {
document.getElementById("show").innerHTML = '默认接收到Java的数据： ' + message;
var responseData = 'js默认接收完毕，并回传数据给java';
responseCallback(responseData); //回传数据给java
});
//指定接收，参数functionInJs 与java保持一致
bridge.registerHandler("functionInJs", function(data, responseCallback) {
document.getElementById("show").innerHTML = '指定接收到Java的数据： ' + data;
var responseData = 'js指定接收完毕，并回传数据给java';
responseCallback(responseData); //回传数据给java
});
})
<script>
java发送给js默认接收
java发送给js指定接收
js发送数据给java
js按钮点击事件， 同时需要上面WebViewJavascriptBridge的注册监听回调函数
//js传递数据给java
function jsToJavaDefault() {
var data = '发送数据给java默认接收';
window.WebViewJavascriptBridge.send(
data
, function(responseData) { //处理java回传的数据
document.getElementById("show").innerHTML = responseData;
}
);
}
function jsToJavaSpec() {
var data='发送数据给java指定接收';
window.WebViewJavascriptBridge.callHandler(
'submitFromWeb' //指定接收参数 submitFromWeb与java一致
,data
, function(responseData) { //处理java回传的数据
document.getElementById("show").innerHTML = responseData;
}
);
}
java 监听接收数据
//默认接收
webView.setDefaultHandler(new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
String msg = "默认接收到js的数据：" + data;
Toast.makeText(WebTestActivity.this, msg, Toast.LENGTH_LONG).show();
function.onCallBack("java默认接收完毕，并回传数据给js"); //回传数据给js
}
});
//指定接收 submitFromWeb 与js保持一致
webView.registerHandler("submitFromWeb", new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
String msg = "指定接收到js的数据：" + data;
Toast.makeText(WebTestActivity.this, msg, Toast.LENGTH_LONG).show();
function.onCallBack("java指定接收完毕，并回传数据给js"); //回传数据给js
}
});
js发送给java默认接收
js发送给java指定接收
至此，jsBridge的使用流程完毕。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。
相关推荐
-
Android中WebView与Js交互的实现方法
获取WebView对象 调用WebView对象的getSettings()方法,获取WebSettings对象 调用WebSettings对象的setJavaScriptEnabled()方法,设置js可用,参数:布尔值 在判断是否支持js的时候,不要用alert(),默认不起作用,可以先用document.write()测试 调用WebView对象的addJavascriptInterface(obj, interfaceName)方法,添加js接口,参数:Object对象,String接口名
-
Android中js和原生交互的示例代码
本文介绍了Android中js和原生交互的示例代码,分享给大家,具体如下: 加载webview的类 public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); JavaScriptInterf
-
android中webview控件和javascript交互实例
当我们要实现丰富的图文混排效果的时候,我们一般会使用webview,这是一个功能十分强大的的控件,来看看官方的解释: 复制代码 代码如下: A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit
-
解析Android中webview和js之间的交互
1.android中利用webview调用网页上的js代码.Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true,,然后通过loadUrl就可以直接进行调用,如下所示:mWebView.getSettings().setJavaScriptEnabled(true);mWebView.loadUrl("javascript:test()"); 2. 网页上调用android中java代码的方法在网页中
-
Android中Java和JavaScript交互实例
Android提供了一个很强大的WebView控件用来处理Web网页,而在网页中,JavaScript又是一个很举足轻重的脚本.本文将介绍如何实现Java代码和Javascript代码的相互调用. 如何实现 实现Java和js交互十分便捷.通常只需要以下几步. 1.WebView开启JavaScript脚本执行 2.WebView设置供JavaScript调用的交互接口. 3.客户端和网页端编写调用对方的代码. 本例代码 为了便于讲解,先贴出全部代码 Java代码 复制代码 代码如下: pack
-
Android WebView上实现JavaScript与Java交互
其实webview加载资源的速度并不慢,但是如果资源多了,当然就很慢.图片.css .js .html这些资源每个大概需要10-200ms ,一般都是30ms就ok了.不过webview是必须等到全部资源都完成加载,才会进行渲染的,所以加载的速度很重要!从Google上我们了解到,webview加载页面的顺序是:先加载html,然后从里面解析出css.js文件和页面上的图片资源进行加载.如果webkit的缓存里面有,就不加载.加载完这些资源之后,就进行css的渲染和js的执行.Css的渲染一般不
-
Android webview与js的数据交互
项目要用到Webview和js交互,查了查以前的项目感觉还是有必要整理下的. 简单描述下项目中用到的地方,比如说在web页需要用到登录的地方点击登录跳转到APP原生登录界面去登录,点击web页的拨打电话弹出原生dialog询问是否拨打,点击web页里面的图片进行放大处理.针对于上述的需求我们通用的方式大概有两种,一是监听a标签,在shouldOverrideUrlLoading根据URL进行判断,二是js代码注入,找到我们想要处理的元素进行js代码注入.下面就这两种方式简单的进行描述 首先需要初
-
浅谈Android程序与JavaScript脚本的交互
我们都知道,手机时代的来临的主要标志是啥?能够方便的接入互联网!互联网展现给我们的方式一般都是网页,网页中又必不可少的拥有javascript,所以说,android提供对javascript的支持那是迫在眉睫了,幸好,android早就给我们提供了无缝连接.让我们可以通过android与javascript进行交互. 我们的应用很简单,如图: 我们有一个输入框,旁边有个按钮,点击按钮就会提示我们输入的内容.当然这只是html中最简单的程序了,但是你将这个程序放入android手机中访问下试试,
-
Android WebView使用方法详解 附js交互调用方法
目前很多Android app都内置了可以显示web页面的界面,会发现这个界面一般都是由一个叫做WebView的组件渲染出来的,学习该组件可以为你的app开发提升扩展性. 先说下WebView的一些优点: --可以直接显示和渲染web页面,直接显示网页 --webview可以直接用html文件(网络上或本地assets中)作布局 --和JavaScript交互调用 一.基本使用 首先layout中即为一个基本的简单控件: <WebView android:id="@+id/webView1
-
android和js的交互之jsbridge使用教程
前言 众所周知,app的一些功能可能会使用到H5开发,这就难免会遇到java与js 的相互调用,android 利用WebViewJavascriptBridge 实现js和java的交互,这里介绍下JsBridge第三方库的使用. github传送门:https://github.com/lzyzsd/JsBridge (本地下载) 简单分析 java与js相互调用如下: java发送数据给js,js接收并回传给java 同理,js发送数据给java,java接收并回传给js 同时两套流程都
-
Android与JS相互调用的方法
目录 Android调用js的方法实现是引入一个webview用webview打开一个页面调取的JS函数. 下面是JS同Android的通信,JS调用Android的函数方法. Android调用js的方法实现是引入一个webview用webview打开一个页面调取的JS函数. private void InitWebView() { mWebView = (WebView) findViewById(R.id.webview); WebSettings webSettings = mWebVi
-
Android与JS之间跨平台异步调用实例详解
Android与JS之间跨平台异步调用 为什么突然要搞这个问题呢? 在开发浏览器的时候遇到这个狗血的问题,花了将近1天的时间才想到这个解决方案,Android与JavaScirpt互调. 因为接口是抓取的别人的,所以出现了JS跨域问题,Android闪亮登场搞定了. GIF动画演示 WebView相关设置 WebSettings mWebSettings = getSettings(); mWebSettings.setDefaultTextEncodingName("UTF-8"
-
iOS开发教程之WKWebView与JS的交互
前言 iOS8以后,Apple公司推出了WKWebView,对比之前的UIWebView不论是处理速度还是内存性能,都有了大幅度的提升! 那么下面我就分享一下WKWebView与JS的交互. 首先使用WKWebView.你需要导入WebKit #import 然后初始化一个WKWebView,设置代理,并且执行代理的方法.在网页加载成功的时候,我们会调用一些JS代码对网页进行设置. WKWebView的代理一共有三个:WKUIDelegate,WKNavigationDelegate,WKScr
-
Android和PHP MYSQL交互开发实例
总述 简单的说,安卓客户端通过Http向本地服务器发出请求,访问指定的php代码,服务器端通过php代码执行数据库的操作, 返回相应的JSON数据.服务器可以理解为运行着某些服务器容器的电脑,比如你的电脑安装了Apache并保持运行,那么电脑就变成了一台服务器,只是这台服务器没有入网,只能本地访问.安卓客户端通过HttpURLConnection向服务器中指定的php文件提交POST或GET请求,服务器端相应php代码接受来自客户端的参数(如果是带参传递)进行数据库的操作,返回JSON数据给客户
-
使用Node.js搭建静态资源服务详细教程
对于Node.js新手,搭建一个静态资源服务器是个不错的锻炼,从最简单的返回文件或错误开始,渐进增强,还可以逐步加深对http的理解.那就开始吧,让我们的双手沾满网络请求! Note: 当然在项目中如果有使用express框架,用express.static一行代码就可以达到目的了: app.use(express.static('public')) 这里我们要实现的正是express.static背后所做工作的一部分,建议同步阅读该模块源码. 基本功能 不急着写下第一行代码,而是先梳理一下就基
-
vue.js项目打包上线的图文教程
最近一直坚持每个月写一个小的vue.js 开发的项目,最后开发完成后想到很久之前给别人回答的一个问题:vue的项目如何上线,当时有千奇百怪的回答,我在想,这些人都是肿了么,vue的官方都说了,这个框架只是做了view这一层,所以并不是把这些开发完的东西直接拷贝到服务器上,而且需要打包为静态文件上传服务器的.这里我简单的列出这个过程: 首先需要修改一下配置文件再打包,很多人都是遇到过打包后运行一片空白等等问题,这些问题主要就是路径的问题,所以需要修改config下面的index.js这个配置文件里
-
在Android Studio中Parcelable插件的简单使用教程
在Android Studio中,你可以很快速的使用Parcelable插件进行实体类的序列化的实现,使用该插件后,你的实体类可以快速的实现Parcelable接口而不用写额外的代码.因为该插件会帮你快速的生成必须提供的方法,可以说是很高效率的了. 首先需要下载该插件: 在File->Setting->Plugins里的搜索框内输入内容:android parcelable code generator,然后自己下载好重启studio即可使用该插件了. 下载插件界面: 重启studio: 点击
-
Android EasyPermissions官方库高效处理权限相关教程
介绍: easypermission库是一个简化基本的系统权限逻辑的库,可用于在Android M或者更高版本上. 1 相关文档 官方文档: https://github.com/googlesamples/easypermissions 运行时权限官方文档解释: https://developer.android.com/training/permissions/requesting.html 2 为什么使用Easypermissions Android M对权限系统进行了改变.Android