為了提高客戶端的開發效率以及手機對h5技術的支持好不夠完美，hybird技術被推上了歷史舞臺。它的基本原理是使用前端的技術(html/css/js)進行開發，以達到Native的體驗，其間最重要的一環就是js和Native的交互。如微信提供的jsSDk，可以實現js調用Native中定位、支付等技術。本文介紹如何實現js和Native的通信。
js調用Android
js調用Android的方法有以下四種：
- WebView的JavascriptInterface
- WebViewClient.shouldOverrideUrlLoading()
- WebChromeClient.onConsoleMessage()
- WebChromeClient.onJsPrompt()
1. JavascriptInterface
JavascriptInterface是Android官方提供的工js和Native通信方案。其實現如下：
- 實現一個java類，供js調用
public class JavascriptInterface {
@JavascriptInterface
public void showToast(String toast) {
Toast.makeText(MainActivity.this, toast, Toast.LENGTH_SHORT).show();
}
}
- 在webView中注冊這個類：
webView.addJavascriptInterface(new JavascriptInterface(), "javascriptInterface");
- 在js中直接調用這個接口：
function showToast(text){
window.javascriptInterface.showToast(text);
}
但是webView有個安全漏洞：WebView中接口隱患與手機掛馬利用。 在Android4.2后，這個漏洞被修復；但是考慮到兼容性的問題，這個方案基本不被采用。
2. WebViewClient.shouldOverrideUrlLoading()
這個方法是攔截所有webView的跳轉，頁面可以構造一個特殊格式的Url跳轉，shouldOverrideUrlLoading攔截Url后判斷其格式，然后Native就能執行自身的邏輯了。
public class CustomWebViewClient extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (isJsBridgeUrl(url)) {
// JSbridge的處理邏輯
return true;
}
return super.shouldOverrideUrlLoading(view, url);
}
}
3. WebChromeClient.onConsoleMessage()
在js中執行console.log(), 會進入Android的WebChromeClient.consoleMessage()回調。
public class CustomWebChromeClient extends WebChromeClient {
@Override
public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
super.onConsoleMessage(consoleMessage);
String msg = consoleMessage.message();//Javascript輸入的Log內容
}
}
4. WebChromeClient.onJsPrompt()
和3類似，在js中執行alert、confirm和prompt這三個方法時，會進入Android的onJsAlert、onJsConfirm和onJsPrompt回調。 由于prompt的使用頻率較低，因此通常采用prompt實現js和Native的通信。
Android調用js
Android調用js接口的方法只有一個：WebView.loadUrl():
webView.loadUrl('javascript: ' + ...);
實踐
結合android-js-bridge這個例子，來一個簡單的實現：
1. 設計schema
和網站的http協議一樣，約定一個js和Android的通信協議，如：
jsbridge://className:callbackAddress/methodName?jsonObj
// className: 表示java的類名
// callbackAddress： js回調的標識
// methodName： java中的方法名
// jsonObj： 接口數據
2. 在js中，可以采用如下方法調用java方法
var JSBridge = {
call: function(className, method, params, callback){
var uri = 'JSBridge://' + className + ':' + callback + '/' + method + '?' + params;
window.prompt(uri, "");
}
}
// 下面會調用java中的 bridge.showToast方法
JSBridge.call('bridge','showToast',{'msg':'Hello JSBridge'},function(res){alert(JSON.stringify(res))})
3. 在java中， 可以如下實現：
// 進入prompt回調
public class JSBridgeWebChromeClient extends WebChromeClient {
@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
result.confirm(JSBridge.callJava(view, message));
return true;
}
}
// 調用java邏輯
public class JSBridge {
...
public static String callJava(WebView webView, String uriString) {
String methodName = "";
String className = "";
String param = "{}";
String port = "";
if (!TextUtils.isEmpty(uriString) && uriString.startsWith("JSBridge")) {
Uri uri = Uri.parse(uriString);
className = uri.getHost();
param = uri.getQuery();
port = uri.getPort() + "";
String path = uri.getPath();
if (!TextUtils.isEmpty(path)) {
methodName = path.replace("/", "");
}
}
// 基于上面的className、methodName和port path調用對應類的方法
if (exposedMethods.containsKey(className)) {
HashMap<String, Method> methodHashMap = exposedMethods.get(className);
if (methodHashMap != null && methodHashMap.size() != 0 && methodHashMap.containsKey(methodName)) {
Method method = methodHashMap.get(methodName);
if (method != null) {
try {
method.invoke(null, webView, new JSONObject(param), new Callback(webView, port));
} catch (Exception e) {
e.printStackTrace();
}
}
}
}
return null;
}
}
// 直接進入showToast函數的實現
public static void showToast(WebView webView, JSONObject param, final Callback callback) {
String message = param.optString("msg");
Toast.makeText(webView.getContext(), message, Toast.LENGTH_SHORT).show();
if (null != callback) {
try {
JSONObject object = new JSONObject();
object.put("key", "value");
object.put("key1", "value1");
callback.apply(getJSONObject(0, "ok", object));
} catch (Exception e) {
e.printStackTrace();
}
}
}
// 上述程序的callback.apply方法實現如下： 即通過webView.loadUrl實現java調用js的方法
public class Callback {
private static Handler mHandler = new Handler(Looper.getMainLooper());
private static final String CALLBACK_JS_FORMAT = "javascript:JSBridge.onFinish('%s', %s);";
private String mPort;
private WeakReference<WebView> mWebViewRef;
public Callback(WebView view, String port) {
mWebViewRef = new WeakReference<>(view);
mPort = port;
}
public void apply(JSONObject jsonObject) {
final String execJs = String.format(CALLBACK_JS_FORMAT, mPort, String.valueOf(jsonObject));
if (mWebViewRef != null && mWebViewRef.get() != null) {
mHandler.post(new Runnable() {
@Override
public void run() {
mWebViewRef.get().loadUrl(execJs);
}
});
}
}
}
