在移动app中经常需要将一些NA较难实现的但是逻辑不复杂的UI如图表，或者只是单纯的数据展示的简单页面交由h5来完成。这样实现一套h5方案，而Android和iOS两端都可做到通用。要实现的这样的技术方案其实并不复杂，Android本身提供webview来展示h5，以及相应的api来进行NA与h5的通信。在项目中往往会基于原生API进行封装，丰富双方通信能力。本文从Android与h5通信的角度进行讲解。
一、Android与h5的原生交互
本章主要包含一下几点：
- webView如何加载H5页面
- Android如何调用H5中的方法
- H5如何调用Android中的方法
1、webView如何加载H5页面
webview可以从两个地方加载h5页面。无论以何种方式均是以loadUrl的形式进行。
(1)从本地加载:将html页面放在本地项目中asset文件夹下，通过读取asset中文件的方法读取并加载html。该方式可用于h5离线化加载方案。
//加载assets文件夹下的test.html页面，文件截图如图1
mWebView.loadUrl("file:///android_asset/test.html");
(2)从网页加载，这也是项目中主要的h5加载方式
//加载网页
mWebView.loadUrl("http://www.baidu.com");
2、Android如何调用H5中的方法
若要通过webview调用h5中的方法，首先需要对webview进行一些设置，使之具有调起h5方法的能力。
WebSettings webSettings = mWebView.getSettings();
//设置为可调用js方法
webSettings.setJavaScriptEnabled(true);
Android调h5方法实际上有两种方法
(1) 无返回值调用
mWebView.loadUrl("JavaScript:show()");
将与h5约定的方法以JavaScript:的开头形式进行拼接
(2)有返回值调用：注意改方法仅在Android4.4以上的系统版本才能使用
mWebView.evaluateJavascript("sum(1,2)",new ValueCallback() {
@Override
public void on ReceiveValue(String value) {
Log.e(TAG,"onReceiveValue value=" + value);
}
});
3. H5如何调用Android中的方法
h5调用Android本地方法有两种方式。
(1)JavascriptInterface注入
Android中将要暴露给h5调用的方法打上JavascriptInterface注解
public class JsInteration {
@JavascriptInterface
public String back() {
return "hello world";
}
}
JavascriptInterface需要注意的是在Android4.2以上才有，4.2以下存在安全漏洞。攻击者可以通过注册java类方法的反射调用获得全局application，进而增强其他攻击能力。
可以使用
public boolean onJsPrompt( WebView view, String url, String message, String defaultValue, JsPromptResult result )
通过分析参数，匹配双方约定的协议进行调用
在webview对注解的本地方法进行注入
//第二个参数android的命名无所谓，需要客户端跟h5双方约定
mWebView.addJavascriptInterface(newJsInteration(),"android");
(2)url拦截
通过shouldOverrideUrlLoading拦截h5页面的点击事件，客户端拦截url，通过对url的分析，解析出双方约定的协议参数，根据拦截到的URL解析协议，决定客户端下一步动作。
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
//判断url拦截事件
if (url.equals("file:///android_asset/test2.html")) {
Log.e(TAG, "shouldOverrideUrlLoading: " + url);
startActivity(new Intent(MainActivity.this,Main2Activity.class));
return true;
} else {
mWebView.loadUrl(url);
return false;
}
}
});
总结
image
二、基于jsBridge的Android与h5交互
jsBridge实际上是一种基于客户端与h5交互能力的一种封装。Android和h5之间通过这个封装的桥对象进行通信。
在NA端进行jsBridge的封装主要流程是：
H5->通过某种方式触发一个url->Native捕获到url,进行分析->原生做处理->Native调用H5的JSBridge对象传递回调
通过loadUrl的方式Android对捕获到的url拦截进行分析，得到h5想调用NA的意图之后NA调用本地方法，如果有回调，NA通过jsBridge回调h5方法。
image
我们前面讲过了原生的WebView/UIWebView控件已经能够和Js实现数据通信了，那为什么还要JSBridge呢？
其实使用JSBridge有很多方面的考虑：
- Android4.2以下,addJavascriptInterface方式有安全漏掉
- iOS7以下,JS无法调用Native
- url scheme交互方式是一套现有的成熟方案,可以完美兼容各种版本，对以前老版本技术的兼容。
url scheme
url scheme是一种类似于url的链接,是为了方便app直接互相调用设计的。具体来讲如果是系统的url scheme,则打开系统应用,否则找看是否有app注册这种scheme,打开对应app。
注：这种scheme必须原生app注册后才会生效。
而在我们实际的开发中，app不会注册对应的scheme,而是由前端页面通过某种方式触发scheme(如用iframe.src),然后Native用某种方法捕获对应的url触发事件,然后拿到当前的触发url,根据定义好的协议,分析当前触发了那种方法。
JSBridge技术实现
要实现JSBridge,我们需要按以下步骤分析：
第一步:设计出一个Native与JS交互的全局桥对象
该全局桥对象为NA端存储的.js文件。在onPageFinished时机通过读取本地文件后，使用webview.loadUrl(file)的方式将其注入到h5侧。fe的同学曾经想把这个文件放在h5侧维护，直接由他们加载，以提高加载效率。但是笔者亲测NA端注入这个文件的时间一般为10到20ms之间，所以，放在NA侧与放在h5侧注入论效率并无大差异。反而放在NA侧的时候，可以减少一次交互，因为NA在onPageFinished时候是同步注入.js桥文件，和NA供h5调用方法的。
//注入js文件
BridgeUtil.webViewLoadLocalJs(webView, JSBridge.this.toLoadJs);
//注入NA供h5调用方法
BridgeUtil.injectInterface(webView, JSBridge.this.javascriptInterfaces);
第二步:JS如何调用Native
var url = CUSTOM_PROTOCOL_SCHEME + '://return/'+ type + '/' + encodeURIComponent(messageQueueString);
messagingIframe.src = url;
//h5侧传递的数据格式
public class CallInterface extends Message {
//h5侧回调id
private static final String CALLBACK_ID = "callbackId";
//h5传递的数据
private static final String DATA = "data";
//管理NA方法的类名
private static final String OBJ = "obj";
//调用NA方法名
private static final String METHOD = "method";
}
h5侧最终通过iframe.src来通知端上一次h5调用。何为iframe.src,我们可以理解为是一次h5打开新链接，这个打开新链接的动作会通过webview回调端上相应的方法如shouldOverrideUrlLoading。
第三步:Native如何得知api被调用
上一步中讲到webview回调端上shouldOverrideUrlLoading。NA端通过在shouldOverrideUrlLoading中拦截h5url，通过分析url去调用端上的相应方法。这个有个问题，就是没个新链接都会回调一次shouldOverrideUrlLoading，所以会存在多次调用的问题，所以我们在iframe.src的时候应该采用一定格式的url，shouldOverrideUrlLoading里只拦截分析相应协议，比如
url.startsWith("elemejsbridge://return/")
return true; //返回true则NA拦截处理不在传递
对其他格式的url则在shouldOverrideUrlLoading里return false;放行.
第四步:分析url-参数和回调的格式
第五步:Native如何调用JS
@params functionName h5测方法名
@params data 传递数据
@params jsResult NA所需回调
private void doSend(@Nullable String functionName, @Nullable Object data, @Nullable JSResult jsResult) {
CallHandler m = new CallHandler();
if (data != null) {
m.setData(GSON.toJson(data));
}
if (jsResult != null) {
++this.uniqueId;
//因为回调是java代码，传给h5也没用，故用时间戳的方式生成一个唯一id，将这个id传过去就可以，并在本地以map的形式保存id和jsResult的key-value
String callbackStr = String.format("JAVA_CB_%s", this.uniqueId + "_" + SystemClock.currentThreadTimeMillis());
this.responseResults.put(callbackStr, jsResult);
m.setId(callbackStr);
}
if (!TextUtils.isEmpty(functionName)) {
m.setHandlerName(functionName);
}
if (this.startupMessage != null) {
this.startupMessage.add(m);
} else {
this.dispatchMessage(m);
}
}
//层层封装后通过loadUrl的形式调用h5侧方法
private void dispatchMessage(@NonNull Message m) {
String messageJson = m.toJson();
messageJson = messageJson.replaceAll("(\\\\)([^utrn])", "\\\\\\\\$1$2");
messageJson = messageJson.replaceAll("(?<=[^\\\\])(\")", "\\\\\"");
String javascriptCommand = String.format("javascript:WebViewJavascriptBridge._handleMessageFromNative('%s');", messageJson);
if (Thread.currentThread() == Looper.getMainLooper().getThread()) {
this.webView.loadUrl(javascriptCommand);
}
}
//NA传递给h5的数据格式
public class CallHandler extends Message {
//调用h5方法名
private static final String HANDLER_NAME = "handlerName";
//后续h5方法执行完成回调NA通过此id找到对应回调
private static final String CALLBACK_ID = "callbackId";
//传递的具体数据
private static final String DATA = "data";
}
第六步:H5中api方法的注册以及格式
这里涉及到一些公司源码，不方便贴出，但与github上其他开源jsBridge核心思想基本一致。再此简单介绍一些核心数据结构。
H5调NA方法时，传递如下数据结构
参考文章：
https://blog.csdn.net/ejinxian/article/details/66971175
https://www.cnblogs.com/yutingliuyl/p/7250574.html
网友评论