在移動app中經(jīng)常需要將一些NA較難實現(xiàn)的但是邏輯不復(fù)雜的UI如圖表筒愚，或者只是單純的數(shù)據(jù)展示的簡單頁面交由h5來完成物咳。這樣實現(xiàn)一套h5方案父阻，而Android和iOS兩端都可做到通用杜窄。要實現(xiàn)的這樣的技術(shù)方案其實并不復(fù)雜，Android本身提供webview來展示h5蚌本，以及相應(yīng)的api來進(jìn)行NA與h5的通信。在項目中往往會基于原生API進(jìn)行封裝隘梨，豐富雙方通信能力程癌。本文從Android與h5通信的角度進(jìn)行講解。
一轴猎、Android與h5的原生交互
本章主要包含一下幾點：
- webView如何加載H5頁面
- Android如何調(diào)用H5中的方法
- H5如何調(diào)用Android中的方法
1嵌莉、webView如何加載H5頁面
webview可以從兩個地方加載h5頁面。無論以何種方式均是以loadUrl的形式進(jìn)行捻脖。
(1)從本地加載:將html頁面放在本地項目中asset文件夾下锐峭，通過讀取asset中文件的方法讀取并加載html中鼠。該方式可用于h5離線化加載方案。
//加載assets文件夾下的test.html頁面沿癞，文件截圖如圖1
mWebView.loadUrl("file:///android_asset/test.html");
(2)從網(wǎng)頁加載援雇，這也是項目中主要的h5加載方式
//加載網(wǎng)頁
mWebView.loadUrl("http://www.baidu.com");
2、Android如何調(diào)用H5中的方法
若要通過webview調(diào)用h5中的方法椎扬，首先需要對webview進(jìn)行一些設(shè)置惫搏，使之具有調(diào)起h5方法的能力。
WebSettings webSettings = mWebView.getSettings();
//設(shè)置為可調(diào)用js方法
webSettings.setJavaScriptEnabled(true);
Android調(diào)h5方法實際上有兩種方法
(1) 無返回值調(diào)用
mWebView.loadUrl("JavaScript:show()");
將與h5約定的方法以JavaScript:的開頭形式進(jìn)行拼接
(2)有返回值調(diào)用：注意改方法僅在Android4.4以上的系統(tǒng)版本才能使用
mWebView.evaluateJavascript("sum(1,2)",new ValueCallback() {
@Override
public void on ReceiveValue(String value) {
Log.e(TAG,"onReceiveValue value=" + value);
}
});
3. H5如何調(diào)用Android中的方法
h5調(diào)用Android本地方法有兩種方式蚕涤。
(1)JavascriptInterface注入
Android中將要暴露給h5調(diào)用的方法打上JavascriptInterface注解
public class JsInteration {
@JavascriptInterface
public String back() {
return "hello world";
}
}
JavascriptInterface需要注意的是在Android4.2以上才有筐赔，4.2以下存在安全漏洞。攻擊者可以通過注冊java類方法的反射調(diào)用獲得全局application揖铜，進(jìn)而增強(qiáng)其他攻擊能力茴丰。
可以使用
public boolean onJsPrompt( WebView view, String url, String message, String defaultValue, JsPromptResult result )
通過分析參數(shù)，匹配雙方約定的協(xié)議進(jìn)行調(diào)用
在webview對注解的本地方法進(jìn)行注入
//第二個參數(shù)android的命名無所謂天吓，需要客戶端跟h5雙方約定
mWebView.addJavascriptInterface(newJsInteration(),"android");
(2)url攔截
通過shouldOverrideUrlLoading攔截h5頁面的點擊事件贿肩，客戶端攔截url，通過對url的分析失仁，解析出雙方約定的協(xié)議參數(shù)尸曼，根據(jù)攔截到的URL解析協(xié)議，決定客戶端下一步動作萄焦。
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;
}
}
});
總結(jié)
二控轿、基于jsBridge的Android與h5交互
jsBridge實際上是一種基于客戶端與h5交互能力的一種封裝。Android和h5之間通過這個封裝的橋?qū)ο筮M(jìn)行通信拂封。
在NA端進(jìn)行jsBridge的封裝主要流程是：
H5->通過某種方式觸發(fā)一個url->Native捕獲到url,進(jìn)行分析->原生做處理->Native調(diào)用H5的JSBridge對象傳遞回調(diào)
通過loadUrl的方式Android對捕獲到的url攔截進(jìn)行分析茬射，得到h5想調(diào)用NA的意圖之后NA調(diào)用本地方法，如果有回調(diào)冒签，NA通過jsBridge回調(diào)h5方法在抛。
我們前面講過了原生的WebView/UIWebView控件已經(jīng)能夠和Js實現(xiàn)數(shù)據(jù)通信了，那為什么還要JSBridge呢萧恕？
其實使用JSBridge有很多方面的考慮：
- Android4.2以下,addJavascriptInterface方式有安全漏掉
- iOS7以下,JS無法調(diào)用Native
- url scheme交互方式是一套現(xiàn)有的成熟方案,可以完美兼容各種版本刚梭，對以前老版本技術(shù)的兼容。
url scheme
url scheme是一種類似于url的鏈接,是為了方便app直接互相調(diào)用設(shè)計的票唆。具體來講如果是系統(tǒng)的url scheme,則打開系統(tǒng)應(yīng)用,否則找看是否有app注冊這種scheme,打開對應(yīng)app朴读。
注：這種scheme必須原生app注冊后才會生效。
而在我們實際的開發(fā)中走趋，app不會注冊對應(yīng)的scheme,而是由前端頁面通過某種方式觸發(fā)scheme(如用iframe.src),然后Native用某種方法捕獲對應(yīng)的url觸發(fā)事件,然后拿到當(dāng)前的觸發(fā)url,根據(jù)定義好的協(xié)議,分析當(dāng)前觸發(fā)了那種方法衅金。
JSBridge技術(shù)實現(xiàn)
要實現(xiàn)JSBridge,我們需要按以下步驟分析：
第一步:設(shè)計出一個Native與JS交互的全局橋?qū)ο?/h5>
該全局橋?qū)ο鬄镹A端存儲的.js文件。在onPageFinished時機(jī)通過讀取本地文件后，使用webview.loadUrl(file)的方式將其注入到h5側(cè)氮唯。fe的同學(xué)曾經(jīng)想把這個文件放在h5側(cè)維護(hù)鉴吹，直接由他們加載，以提高加載效率惩琉。但是筆者親測NA端注入這個文件的時間一般為10到20ms之間豆励，所以，放在NA側(cè)與放在h5側(cè)注入論效率并無大差異琳水。反而放在NA側(cè)的時候肆糕，可以減少一次交互，因為NA在onPageFinished時候是同步注入.js橋文件在孝，和NA供h5調(diào)用方法的诚啃。
//注入js文件
BridgeUtil.webViewLoadLocalJs(webView, JSBridge.this.toLoadJs);
//注入NA供h5調(diào)用方法
BridgeUtil.injectInterface(webView, JSBridge.this.javascriptInterfaces);
第二步:JS如何調(diào)用Native
var url = CUSTOM_PROTOCOL_SCHEME + '://return/'+ type + '/' + encodeURIComponent(messageQueueString);
messagingIframe.src = url;
//h5側(cè)傳遞的數(shù)據(jù)格式
public class CallInterface extends Message {
//h5側(cè)回調(diào)id
private static final String CALLBACK_ID = "callbackId";
//h5傳遞的數(shù)據(jù)
private static final String DATA = "data";
//管理NA方法的類名
private static final String OBJ = "obj";
//調(diào)用NA方法名
private static final String METHOD = "method";
}
h5側(cè)最終通過iframe.src來通知端上一次h5調(diào)用。何為iframe.src,我們可以理解為是一次h5打開新鏈接私沮，這個打開新鏈接的動作會通過webview回調(diào)端上相應(yīng)的方法如shouldOverrideUrlLoading始赎。
第三步:Native如何得知api被調(diào)用
上一步中講到webview回調(diào)端上shouldOverrideUrlLoading。NA端通過在shouldOverrideUrlLoading中攔截h5url仔燕，通過分析url去調(diào)用端上的相應(yīng)方法造垛。這個有個問題，就是沒個新鏈接都會回調(diào)一次shouldOverrideUrlLoading晰搀，所以會存在多次調(diào)用的問題五辽，所以我們在iframe.src的時候應(yīng)該采用一定格式的url，shouldOverrideUrlLoading里只攔截分析相應(yīng)協(xié)議外恕，比如
url.startsWith("elemejsbridge://return/")
return true; //返回true則NA攔截處理不在傳遞
對其他格式的url則在shouldOverrideUrlLoading里return false;放行.
第四步:分析url-參數(shù)和回調(diào)的格式
第五步:Native如何調(diào)用JS
@params functionName h5測方法名
@params data 傳遞數(shù)據(jù)
@params jsResult NA所需回調(diào)
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;
//因為回調(diào)是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的形式調(diào)用h5側(cè)方法
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的數(shù)據(jù)格式
public class CallHandler extends Message {
//調(diào)用h5方法名
private static final String HANDLER_NAME = "handlerName";
//后續(xù)h5方法執(zhí)行完成回調(diào)NA通過此id找到對應(yīng)回調(diào)
private static final String CALLBACK_ID = "callbackId";
//傳遞的具體數(shù)據(jù)
private static final String DATA = "data";
}
第六步:H5中api方法的注冊以及格式
這里涉及到一些公司源碼，不方便貼出尚洽，但與github上其他開源jsBridge核心思想基本一致悔橄。再此簡單介紹一些核心數(shù)據(jù)結(jié)構(gòu)。
H5調(diào)NA方法時腺毫，傳遞如下數(shù)據(jù)結(jié)構(gòu)
參考文章：
https://blog.csdn.net/ejinxian/article/details/66971175
https://www.cnblogs.com/yutingliuyl/p/7250574.html
