Android中实现Native与H5的通信方案汇总
Posted imock
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Android中实现Native与H5的通信方案汇总相关的知识，希望对你有一定的参考价值。
若感觉排版不舒服，可移步【Android中实现Native与H5的通信方案汇总】
一、利用JsBridge实现Native与H5的双向通信
android中的JSBridge是H5与Native通信的桥梁，其作用是实现H5与Native间的双向通信。在Android中展现H5也就用到了Webview，之前写了一篇文章Android WebView简单使用以及实现native与h5交互,主要就是介绍一个webview的用法介绍及WebViewClient和WebChromeClient一些常用的方法。在结尾的时候简单介绍了下Native与H5的相互调用，也没怎么讲具体怎么用，今天就在这里做一下笔记。
既然这里讲述了JsBridge，所以可以移步这里看看lzyzsd/JsBridge，里面有介绍使用方法。我这下面也接着啰嗦一下：
1、引入资源文件
repositories
// ...
maven url "https://jitpack.io"
dependencies
compile 'com.github.lzyzsd:jsbridge:1.0.4'
2、布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.github.lzyzsd.jsbridge.BridgeWebView
android:id="@+id/JsBridgeWebView"
android:layout_width="match_parent"
android:layout_height="match_parent">
</com.github.lzyzsd.jsbridge.BridgeWebView>
<Button
android:id="@+id/android_call_js"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Android调用js"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>3、在项目assets目录下存放的以下文件
+ jsbridge.js文件
function connectWebViewjavascriptBridge(callback)
if (window.WebViewJavascriptBridge)
callback(WebViewJavascriptBridge)
else
document.addEventListener('WebViewJavascriptBridgeReady', function ()
callback(WebViewJavascriptBridge)
, false)
connectWebViewJavascriptBridge(function (bridge)
bridge.init(function (message, responseCallback)
var data = 'Javascript Responds': 'Wee!'
responseCallback(data)
)
)
//H5调用Native方法
function JsCallAndroid(data)
window.WebViewJavascriptBridge.callHandler(
'JsCallAndroid'
,data
, function(responseData)
alert(responseData)
);
function JsCallAndroid2()
window.WebViewJavascriptBridge.callHandler(
'JsCallAndroid2'
,''
, function(responseData)
alert(responseData)
);
//Native调用H5方法
bridge.registerHandler("functionInJs", function(data, responseCallback)
alert(data);
var responseData = "我接受到了安卓的调用";
responseCallback(responseData);
);- index.html文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>JsBridgeDemo</title>
</head>
<body>
<div class="container-fluid">
<input type="button" value="H5调用Native方法" style="margin-top: 64px" onclick="JsCallAndroid('hello，Android')"/>
</div>
<p>
<input type="button" id="enter" value="H5调用Native方法2" onclick="JsCallAndroid2();"/>
<p>
<script type="text/javascript" src='jsbridge.js'></script>
</body>
</html>4、在对应activity中调用
button = (Button) findViewById(R.id.android_call_js);
bridgeWebView = (BridgeWebView) findViewById(R.id.JsBridgeWebView);
bridgeWebView.setDefaultHandler(new DefaultHandler());
bridgeWebView.setWebChromeClient(new WebChromeClient());
bridgeWebView.setWebViewClient( new BridgeWebViewClient(bridgeWebView));
bridgeWebView.loadUrl("file:///android_asset/index.html");
/**
* js发送给按住消息 JsCallAndroid是js调用的方法名 安卓\\返回给js
*/
bridgeWebView.registerHandler("JsCallAndroid", new BridgeHandler()
@Override
public void handler(String data, CallBackFunction function)
//显示接收的消息
showToast(data);
//返回给html的消息
function.onCallBack( "返回给Toast的alert");
);
button.setOnClickListener(new View.OnClickListener()
@Override
public void onClick(View v)
/**
* 给Html发消息 js接收并返回data
*/
bridgeWebView.callHandler("functionInJs", "调用js的方法", new CallBackFunction()
@Override
public void onCallBack(String data)
showToast("===" + data);
);
);下面这里的代码段目的就是在Android端注册H5调用native方法的回调，这里的JsCallAndroid要和jsbridge.js文件中的window.WebViewJavascriptBridge.callHandler中的key保持一致也为JsCallAndroid：
/**
* js发送给按住消息 JsCallAndroid是js调用的方法名 安卓\\返回给js
*/
bridgeWebView.registerHandler("JsCallAndroid", new BridgeHandler()
@Override
public void handler(String data, CallBackFunction function)
//显示接收的消息
showToast(data);
//返回给html的消息
function.onCallBack( "返回给Toast的alert");
);5、上述的bridgeWebView.registerHandler实现的是单个回调事件的注册，下面我们实现批量注册本地java方法，以供js端调用
先写一个回调接口：
import com.github.lzyzsd.jsbridge.CallBackFunction;
public interface JsHandler
public void OnHandler(String handlerName, String responseData, CallBackFunction function);
在对应使用的activity中添加以下方法：
/**
* 批量注册本地java方法，以供js端调用
*
* @param handlerNames 方法名称数组
* @param handler 回调接口
*/
public void registerHandlers(final ArrayList<String> handlerNames, final JsHandler handler)
if (handler != null)
for (final String handlerName : handlerNames)
bridgeWebView.registerHandler(handlerName, new BridgeHandler()
@Override
public void handler(String data, CallBackFunction function)
handler.OnHandler(handlerName, data, function);
);
那么如何使用呢？将第4模块中的bridgeWebView.registerHandler方法替换如下：
ArrayList<String> mHandlers = new ArrayList<>();
mHandlers.add("JsCallAndroid");
mHandlers.add("JsCallAndroid2");
registerHandlers(mHandlers, new JsHandler()
@Override
public void OnHandler(String handlerName, String responseData, CallBackFunction function)
LogUtil.d(responseData);
if (handlerName.equals("JsCallAndroid"))
Log.d("TAG","JsCallAndroid");
else if (handlerName.equals("JsCallAndroid2"))
Log.d("TAG","JsCallAndroid2");
);二、Android系统H5调用原生的方式
- 对WebView进行初始化
WebSettings settings = webview.getSettings();
settings.setJavaScriptEnabled(true); //允许在WebView中使用js
- 创建一个类JsMethod，提供给js调用的方法工具类（注意：在Android4.2之后，为了提高代码安全性，方法必须使用注解@JavascriptInterface，否则无法调用）
@JavascriptInterface
//andorid4.2（包括android4.2）以上，如果不写该注解，js无法调用android方法
public static void showToast(String json)
Toast.makeText(context, json, Toast.LENGTH_SHORT).show();
- 在WebView初始化代码中执行如下代码
//创建上面创建类的对象
JsMethod m = new JsMethod(this, webview);
//其实就是告诉js，我提供给哪个对象给你调用，这样js就可以调用对象里面的方法
//第二个参数就是该类中的字符串常量
webview.addJavascriptInterface(m,"javaInterface");- js中调用native方法
function showToast(data)
var json = "data":data;
console.log("js调用Android Native方法："+json);
//javaInterface是上面所说的字符串映射对象
window.javaInterface.showToast(JSON.stringify(json));
- natvie中调用H5方法
- 在js中添加如下方法
//有参有返回值的方法
function sum(a,b)
return a+b;
//有参无返回值的方法
function alertMessage(message)
alert(message);
- 在Native中调用对应的js方法
findViewById(R.id.native_call_js).setOnClickListener(new View.OnClickListener()
@RequiresApi(api = Build.VERSION_CODES.KITKAT)
@Override
public void onClick(View v)
//当出入变量名时，需要用转义符隔开
String content="hello js";
mWebView.loadUrl("javascript:alertMessage(\\"" +content+ "\\")" );
//Android调用有返回值js方法，安卓4.4以上才能用这个方法
mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>()
@Override
public void onReceiveValue(String value)
Log.d(TAG, "js返回的结果为=" + value);
Toast.makeText(JsCallNativeActivity.this,"js返回的结果为=" + value,Toast.LENGTH_LONG).show();
);
);上面这种方式，但是这种方式是Android原生提供的并不适用于ios，也就是说，window.javaInterface.showToast(JSON.stringify(json))这样的js代码并不适用于ios，如果用以上的方法，就得分别为android和ios各写一套js代码。这样很显然是不太合理的，所以在实际开发中，如果涉及多终端使用，这种方式就不行了。
## 第二种H5调用Native方法
这种方法就是基于H5对应的点击事件发送一个url请求，并将所需的参数添加到该url中。android端通过webView.setWebViewClient()拦截url，解析url中携带的参数，并根据参数信息进行相应的操作。
webView.setWebViewClient(new WebViewClient()
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url)
/**
* 通过判断拦截到的url是否含有pre，来辨别是http请求还是调用android方法的请求
*/
String pre = "protocol://android";
if (!url.contains(pre))
//该url是http请求，用webview加载url
return false;
else
//该url是调用android方法的请求，解析对应需要的参数然后调用对应的Native方法
return true;
);注意：
特别说明一下shouldOverrideUrlLoading()方法的返回值问题，该方法的返回值有三种：
1. 返回true，即根据代码逻辑执行相应操作，webview不加载该url；
2. 返回false，除执行相应代码外，webview加载该url；
3. 返回super.shouldOverrideUrlLoading()，点进父类中，我们可以看到，返回的还是false。
以上是关于Android中实现Native与H5的通信方案汇总的主要内容，如果未能解决你的问题，请参考以下文章
使用 Native Sockets 在 Android 中实现 WebSockets
在 Flutter Native Android 代码中实现 MVVM 架构