为了提高客户端的开发效率以及手机对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);
}
});
}
}
}
