在移動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;
}
}
});
總結
二、基于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方法。
我們前面講過了原生的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
