1.概述
时至今日,H5的跨平台性越发凸显优势,一套代码适配android、ios,既能减少开发成本,又便于更新与维护.但是native的性能体验也确实更佳,尤其体现在复杂界面和频繁变化的界面上.事实上,移动平台native+h5的开发模式不是什么新鲜事了,各种框架层出不穷,主要目的就是为了使native与h5交互更加便捷高效,而在Android中必然需要WebView作为载体来展示H5内容和进行交互.
2.交互方式
-
传统的JSInterface:使用Android原生的javascriptInterface来进行js和java的通信.
Native Invoke Js
WebSettings webSettings = webView.getSettings();
//打通js通道 WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webView.addJavascriptInterface(new JsInterface(), "android");
//然后通过WebView的addJavascriptInterface方法去注入一个自定义的interface。
public class JsInterface {
@JavascriptInterface
public void showToast(String toast) {
Toast.makeText(MainActivity.this, toast, Toast.LENGTH_SHORT).show(); log("show toast success");
}
public void log(final String msg){
webView.post(new Runnable() {
@Override
public void run() {
webView.loadUrl("javascript: log(" + "'" + msg + "'" + ")");
}
});
}
}
webView.addJavascriptInterface(new JsInterface(), "android");
webView.loadUrl("file:///android_asset/interact.html");@JavascriptInterface 是为了修复4.2版本之前的addjavascriptInterface接口引起的漏洞,这个漏洞曾导致恶意网页通过Js方法遍历刚刚通过addjavascriptInterface注入进来的类的所有方法从中获取到getClass方法,然后通过反射获取到Runtime对象,进而调用Runtime对象的exec方法执行一些操作.于是,交互如果按照这种方式的话,就得区分4.2之前与之后. Js Invoke Native
function showToast(toast){
javascript:android.showToast(toast); //这里的android是上面java代码命名的
}
function log(msg){ console.log(msg); } -
JSBridge的方式:其实就是通过重写WebView中WebChromeClient类的onJsPrompt()方法来进行js和java的通信。
对WebView熟悉的话,肯定知道Js中对应的
window.alert()
、window.confirm()
、window.prompt()
这三个方法的调用在WebChromeClient
中都有对应的回调方法,分别为:onJsAlert()
、onJsConfirm()
、onJsPrompt()
,对于它们传入的message
,都可以在相应的回调方法中接收到,所以,对于Js调Native方法, 可以借助这个信道,和前端协定好一段特定规则的message
,这个规则中应至少包含这些信息:所调用Native方法所在类的类名
所调用Native的方法名
Js调用Native方法所传入的参数基于这些信息,定义一个自己的协议。比如规定sheme,path等等。比如:
scheme://host:port/path?query对应的协定
prompt
传入message
的格式为:jsbridge://class:port/method?params
这样,前端和app端协商好后,前端需要通过Js调用Native方法来获取一些信息或功能,就只需要按照协议的格式把需要调用的类名、方法名、参数放入对应得位置即可,而 会在onJsPrompt
方法中接收到,所以根据与前端协定好的协议来进行解析, 可以用一个Uri
来包装这段协议,然后通过Uri:getHost、getPath、getQuery
方法获取对应的类名,方法名,参数数据,最后通过反射来调用指定类中指定的方法.(port的作用是为了标识Js中的回调function
,当Js调用Native方法时,会得到本次调用的port
号)
自动生成port
和绑定function回调
的Js代码如下:
generatePort: function () { |
数据的返回格式为Json字符串,基本格式为:
resultData = { |
所以符合Js调用的Native方法格式为:
public static void ***(WebView webView, JSONObject data, JsCallback callback) { |
判断Js调用的方法是否符合该格式的代码为,符合则存入一个Map*Js调用:
private void putMethod(Class<?> clazz) { |
对于有返回值的方法,并不需要设置它的返回值,因为方法的结果最后是通过JsCallback.invokeJsCallback
来进行对Js层的回调.
看图:
UrlRouter:UrlRouter是一个通过url来让前端唤起native页面的框架。不过,如果协议定义的合理,它可以让前端,Android和iOS三端有一个高度的统一,十分方便。
通过WebViewClient类的shouldOverrideUrlLoading方法去拦截前端写的url,发现如果是符合定义的UrlRouter协议的话,就跳转到相应的页面。
eg.前端一个按钮<input type="button" value="login" onclick="javascript:location.href='http://www.baidu.com/'">
java代码中这样:
@Override |
这种方式没怎么用过,也就不细说了.
3.总结
H5用Webview加载的方式,往往还涉及到WebView的各种安全性、兼容性的问题,再比如易OOM,Webview许多方法并不按正常时机加载;这些坑都是需要踩过填过之后才能积累经验的.上述3种方式,都有自己的适用场景,比如个别页面需要加载h5首推第一种,app中有大量的h5交互那么就直接用第二种吧,对于一些平台统一的特殊要求的话就用UrlRouter的方式了.