android js 框架,简化Android与JS交互，JsBridge框架全面解析-CSDN博客

原标题：简化Android与JS交互，JsBridge框架全面解析

近日，滴滴顺风车披露了一组数字，预测春运前后，跨城出行以7天为一个周期，呈“潮汐式”变化。2月13号，有将近100万人乘滴滴顺风车踏上归途；除夕当天，还有近40万在回家的顺风车上。返程巅峰集中在2月23日前后，23日预计有超过110万人乘坐滴滴顺风车返回工作岗位。

作者简介

本篇文章来自juexingzhe的投稿。主要介绍了Android与JS的交互框架JsBridge源码分析的相关知识，希望对大家有所帮助！

juexingzhe的博客地址：

https://www.jianshu.com/u/ea71bb3770b4

前言

在Android开发中，由于Native开发的成本较高，H5页面的开发更灵活，修改成本更低，因此前端网页Java(下面简称JS)与Java之间的互相调用越来越常见。

JsBridge就是一个简化Android与JS通信的框架，源码地址：

https://github.com/lzyzsd/JsBridge

正文

我们今天通过一个简单例子来分析下开源框架JsBridge的源码。例子的代码我也放在Github，有需要的可以seesee：

https://github.com/juexingzhe/Android_JS

例子很简单，随便输入信息登陆，会加载一个H5页面，在H5界面点击按钮，Java执行getUserInfo()然后将UserInfo回传给JS，H5页面再显示UserInfo。

1.png

2.png

3.png

JS调用Android基本有下面三种方式

webView.addJavaInterface()

WebViewClient.shouldOverrideUrlLoading()

WebChromeClient.onJsAlert()/onJsConfirm()/onJsPrompt() 方法分别回调拦截JS对话框alert()、confirm()、prompt()消息

Android调用JS

webView.loadUrl();

webView.evaluateJava()

常用方法的使用后面例子中会用到，更细节的介绍各位同学可以去网上搜搜看看。

JsBridge使用

我们先来看下Java层的代码，首先引入依赖和仓库

dependencies{ …… compile'com.github.lzyzsd:jsbridge:1.0.4'compile'com.google.code.gson:gson:2.7'} repositories{ jcenter() maven { url "https://jitpack.io"} }

准备工作就是这样，下面可以开始撸代码，首先就是点击按钮登陆,这个简单：

Intent intent = newIntent(LoginActivity. this, WebActivity.class); intent.putExtra( "email", mEmailView.getText().toString()); startActivity(intent);

布局文件中要使用BridgeWebView:

在跳转后的页面,获取登陆信息并存储，再通过loadUrl加载H5页面：

Intent intent = this.getIntent(); String email = intent.getStringExtra( "email"); mUserInfo = newUserInfo(email); mBridgeWebView = (BridgeWebView) findViewById(R.id.web_view); mBridgeWebView.setDefaultHandler( newDefaultHandler()); mBridgeWebView.loadUrl( "file:///android_asset/getuserinfo.html"); registerHandler();

主要是要注册Handler，供JS调用，getUserInfo就是注册供JS调用的Handler的id，data是JS传过来的参数，CallBackFunction 函数中需要把JS需要的response返回给JS

privatevoidregisterHandler(){ mBridgeWebView.registerHandler( "getUserInfo", newBridgeHandler() { @Overridepublicvoidhandler(String data, CallBackFunction function){ Log.i(TAG, "handler = getUserInfo, data from web = "+ data); function.onCallBack( newGson().toJson(mUserInfo)); } }); }

Java层的代码就这么简单，下面看下JS层工作：

首先需要一个js文件，我们写一个getuserinfo.html文件放在assets目录下，文件内容,不建议把js代码直接放在html文件中，我为了方便直接就写在这了。代码放了两个段落，一个类似于TextView用来显示用户信息，一个Button。点击按钮会调用callHandler，三个参数和Java层一一对应，在Java层返回的时候，会调用function(responseData)函数，显示用于信息。

js调用java