java 和 js互通框架 WebViewJavascriptBridge是移动UIView和Html交互通信的桥梁,用作者的话来说就是实现java和js的互相调用的桥梁。

替代了WebView的自带的JavascriptInterface的接口,使得我们的开发更加灵活和安全。

本博客把JSBridge库近所有Android与(HTML+JS)的交互的方式全部实现,代码详细,注释清除,希望对各位有所帮助。

效果如下图:

      

开发前的准备:(两种方式选择,选一种即可)

   方式1:直接导入JSBridge的library包即可,  AndroidStudio导library包请看博客:AndroidStudio怎样导入library项目开源库

        library包点击下载

    方式2:引入库,在bulid.gradle中添加如下代码

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

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

1:默认方式(两种(1:DefaultHandler默认的方式);2:自定类实现)

//展示第一种
bridgeWebView.setDefaultHandler(new DefaultHandler());

//data是JavaScript返回的数据
private void setHandler(){bridgeWebView.setDefaultHandler(new BridgeHandler() {@Overridepublic void handler(String data, CallBackFunction function) {Toast.makeText(MainActivity.this,"DefaultHandler默认:"+data,Toast.LENGTH_LONG).show();}});}

JS

connectWebViewJavascriptBridge(function(bridge) {bridge.init(function(message, responseCallback) {console.log('JS got a message', message);var data = {'json': 'JS返回任意数据!'};console.log('JS responding with', data);/*打印信息*/document.getElementById("init").innerHTML = "data = " + message;responseCallback(data);});

2:Html点击事件利用JS function方法调Android端并相互传值。

function testClick() {var str1 = document.getElementById("text1").value;var str2 = document.getElementById("text2").value;window.WebViewJavascriptBridge.callHandler('submitFromWeb', {'Data': 'json数据传给Android端'}  //该类型是任意类型, function(responseData) {document.getElementById("show").innerHTML = "得到Java传过来的数据 data = " + responseData});}

Android.Java

 //注册submitFromWeb方法bridgeWebView.registerHandler("submitFromWeb", new BridgeHandler() {@Overridepublic void handler(String data, CallBackFunction function) {Log.i(TAG,"得到JS传过来的数据 data ="+data);show(data);function.onCallBack("传递数据给JS");}});

3:Android点击事件调用JS方法并相互传值。

 @Overridepublic void onClick(View v) {//Java 调JS的functionJs方法并得到返回值bridgeWebView.callHandler("functionJs", "Android", new CallBackFunction() {@Overridepublic void onCallBack(String data) {// TODO Auto-generated method stub
               show(data);}});}

JS.js

 bridge.registerHandler("functionJs", function(data, responseCallback) {document.getElementById("show").innerHTML = ("Android端: = " + data);var responseData = "Javascript 数据";responseCallback(responseData);//回调返回给Android端});

send方式(包含又返回值和无返回值两种)

无返回值:

bridgeWebView.send("无返回值");

function testClick() {var str1 = document.getElementById("text1").value;var str2 = document.getElementById("text2").value;//将Android端得到的数据在网页上显示,并其他数据传给Android端,  可用于初始化和点击操作var data = {id: 1, content: "我是内容哦"};window.WebViewJavascriptBridge.send(data, function(responseData) {document.getElementById("show").innerHTML = "data = " + responseData});}

其他方式,如 文件;

代码稍微有点多,就不一一展示了,直接下载即可

 

源码点击下载

Android之利用JSBridge库实现Html,JavaScript与Android的所有交互相关推荐

  1. android studio秘钥库文件不存在,[原]Android Studio查询SHA1的方法

    前提:C:\Users\Administrator\AndroidStudioProjects文件夹中存在xxx.jks秘钥文件,比如: 进入Android Studio的Terminal: Micr ...

  2. Android 优秀的开源库

    前言 收集了一些比较常见的开源库,特此记录(已收录350+).另外,本文将持续更新,大家有关于Android 优秀的开源库,也可以在下面留言. 一 .基本控件 TextView HTextView 一 ...

  3. 基于CyberGarage库的dlna开发(android)

    关于dlna的介绍就不多说了,具体可以看这篇博文http://blog.csdn.net/geniuseoe2012/article/details/8230877 或者问百度谷歌 Dlna通讯采用u ...

  4. 深入浅出 - Android系统移植与平台开发(十)- Android编译系统与定制Android平台系统(瘋耔修改篇二)...

    第四章.Android编译系统与定制Android平台系统 4.1Android编译系统 Android的源码由几十万个文件构成,这些文件之间有的相互依赖,有的又相互独立,它们按功能或类型又被放到不同 ...

  5. 深入浅出 - Android系统移植与平台开发(十)- Android编译系统与定制Android平台系统

    第四章.Android编译系统与定制Android平台系统 4.1Android编译系统 Android的源码由几十万个文件构成,这些文件之间有的相互依赖,有的又相互独立,它们按功能或类型又被放到不同 ...

  6. Android开发:开源库集合

    开源库大全 目录 抽屉菜单 ListView WebView SwitchButton 按钮 点赞按钮 进度条 TabLayout 图标 下拉刷新 ViewPager 图表(Chart) 菜单(Men ...

  7. Android开源项目及库整理总结

    自己总结的Android开源项目及库. github排名https://github.com/trending, github搜索:https://github.com/search UI Aweso ...

  8. GitHub中Android开源项目及库汇总

    几个常用网站: github排名: https://github.com/trending , github搜索: https://github.com/search codeKK   :    ht ...

  9. Android 开源项目及库汇总(2)

    Android 开源项目及库汇总(2) ListenToCode 2.7 2018.10.10 15:43 字数 8527 阅读 1001评论 0喜欢 29 地图 百度地图– Android百度地图 ...

最新文章

  1. 嵌入式jetty的HTTP实现
  2. java从静态代理到动态代理的理解
  3. 如何启用计算机超级账户,Windows7启用超级管理员账户的方法
  4. Ubuntu apt-get 更新/查看软件
  5. addEventListener 的事件函数的传递【转载】
  6. POJ 1189 钉子和小球
  7. 读书笔记:windows程序设计
  8. 数据结构与算法 c语言6,C语言程序设计题库之6.doc
  9. 在线考试防止切屏功能
  10. python concat_python数据拼接: pd.concat
  11. 源码编译更新nginx到最新版本,并开始nginx支持http2协议模块.
  12. 转-iOS- GPUImage README.md
  13. 如何准备机器学习数据集_机器学习演练第一部分:准备数据
  14. css3实现流星划过动画效果
  15. 交房后如何在手机上办理产权证,线上办理总耗时约6天拿到证书
  16. 1.1.6 LSDB同步
  17. 用数字万用表精确测量小电阻
  18. HJ95 人民币转换
  19. PHP中国际化地数字格式处理
  20. 西澳大学诚招计算机视觉/机器学习方向博士研究生

热门文章

  1. 网站分析与SEO效果的评估,互联网营销
  2. mingw 编译 libopus 1.3.1 时 注意事项
  3. Redis 桌面管理工具 RedisDesktopManager 2019.0 发布
  4. 你说你学不动啦,看 Redux 作者怎么说?
  5. Spring 4.2.2以上版本和swagger集成方案和踩过的坑
  6. 马哥第3期运维班第二周作业
  7. 初步学习JS中的闭包
  8. mxGraph改变图形大小重置overlay位置
  9. Pentaho部署文档校验过程中遇到的一些问题和解决对策
  10. android控件之TextView(一)