Hybrid 开发
主讲人：吴彬
要学习某个东西之前，我们首先要了解这个东西是什么？然后我们要了解这东西有什么用,有什么好处和弊端?最后我们要知道这东西怎么用? 简单点就是 ——是什么？有什么用?怎么用? 那么进入正题
一、什么是Hybrid 开发?
Hybrid App开发（混合模式移动应用开发）是指开发介于web-app、native-app这两者之间的app，这种app兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。
二、存在即合理，Hybrid开发的意义
首先，我们看下Hybrid app和web-app、native-app之间的一些区别
可见Hybrid app开发相比于其他开发还是好处多多的，那么它相比于Native开发的好处有哪些呢?
使用Native开发的方式人员要求高，只是一个简单的功能就需要iOS程序员和Android程序员各自完成；
使用Native开发的方式版本迭代周期慢，每次完成版本升级之后都需要上传到App Store并审核，升级，重新安装等，升级成本高；
使用hybrid开发的方式简单方便，同一套代码既可以在IOS平台使用，也可以在Android平台使用，提高了开发效率与代码的可维护性；
使用hybrid开发的方式升级简单方便，只需要服务器端升级一下就好了，对用户而言完全是透明了，免去了Native升级中的种种不便；
三、如何进行Hybrid 开发?
Hybrid 开发可以使用第三方框架(此处不细讲，有兴趣的朋友可以自行了解)，也可以用Android自带的webView来加载H5 那么我们来讲讲android 自带的webView和Js之间的互调吧。
首先，别忘记加网络权限和引入webView.
Native调用JS
在4.4之前，调用的方式：
//ui线程中运行,因为mWebView是UI控件
runOnUiThread(new Runnable() {
@Override
public void run() {
//缺点:无法取得返回值
mWebView.loadUrl("javascript: 方法名('参数,需要转为字符串')");
Toast.makeText(Activity名.this, "调用方法...", Toast.LENGTH_SHORT).show();
}
});
4.4以后(包括4.4)，使用以下方式:
mWebView.evaluateJavascript("javascript: 方法名('参数,需要转为字符串')", new ValueCallback() {
@Override
public void onReceiveValue(String value) {
//这里的value即为对应JS方法的返回值
}
});
传统的Native调用JS还有个缺点就是不适合传输大量数据(大量数据建议用接口方式获取)。
JS调用Native
Native中通过addJavascriptInterface添加暴露出来的JS桥对象,然后再该对象内部声明对应的API方法。
WebSettings webSettings = mWebView.getSettings();
//Android容器允许JS脚本
webSettings.setJavaScriptEnabled(true);
//Android容器设置侨连对象,api17前有可被hacker攻击的漏洞,api17(4.4)之后调用需要在调用方法加入加入@JavascriptInterface注解，
//如果代码无此申明，那么也就无法使得js生效，也就是说这样就可以避免恶意网页利用js对安卓客户端的窃取和攻击。
mWebView.addJavascriptInterface(this, "JSBridge");
首先看下这个方法
public void addJavascriptInterface(Object object, String name)
我是在Activity里 写的这段代码，那么这里第一个参数传入this，即Activity实例,第二个参数则是给第一个参数起的别名,方便JS里调用。
然后在Activity里暴露两个方法
//在Android4.2以上(api17后),暴露的api要加上注解@JavascriptInterface，否则会找不到方法
@JavascriptInterface
public String getStudentName(){
return "张三";
}
@JavascriptInterface
public String getMyName(final String name){
return "my name is:" + param;
}
然后我们在HTML里调用Native方法
//调用方法一
window.JSBridge.getStudentName(); //返回:'张三'
//调用方法二
window.JSBridge.getMyName('韩梅梅');//返回:'my name is 韩梅梅'
OK,以上就是我们传统的调用方式，但是显而易见，传统的调用存在许多的不足，所以出现了许多好用的第三方框架，那么接下来，我们讲解一个常用框架JSBridge
四、JSBridge
OK，让我们提出我们的疑问，什么是JSBridge?JSBridge有什么好处(相比于传统的Native和JS互调)?JSBridge是怎么设计出来的呢？JSBridge怎么使用呢?
1、什么是JSBridge?
JSBridge就是js和Native之前的桥梁，是用来定义Native和JS通信的,Native只通过一个固定的桥对象调用JS,JS也只通过固定的桥对象调用Native。
2、为什么使用JSBridge？
Android4.2以下,addJavascriptInterface方式有安全漏掉 iOS7以下,JS无法调用Native JSBridge有一套现有的成熟方案,可以完美兼容各种版本，对以前老版本技术的兼容。
3、JSBridge的原理与实现
我们知道，Native要调用JS是非常简单的，只要使用WebView.loadUrl(“JavaScript:function()”)即可。那么JS怎么调Native呢？很明显，上面讲的已经行不通了，毕竟有兼容性问题和安全问题。那么怎么办呢？我们得寻找一个突破口吧，大家仔细回一下，WebView有一个方法，叫setWebChromeClient，可以设置WebChromeClient对象，而这个对象中有三个方法，分别是onJsAlert,onJsConfirm,onJsPrompt，当js调用window对象的对应的方法，即window.alert，window.confirm，window.prompt，WebChromeClient对象中的三个方法对应的就会被触发，我们是不是可以利用这个机制，自己做一些处理？答案是肯定的。
至于js这三个方法的区别，可以详见w3c JavaScript 消息框 。一般来说，我们是不会使用onJsAlert的，为什么呢？因为js中alert使用的频率还是非常高的，一旦我们占用了这个通道，alert的正常使用就会受到影响，而confirm和prompt的使用频率相对alert来说，则更低一点。那么到底是选择confirm还是prompt呢，其实confirm的使用频率也是不低的，比如你点一个链接下载一个文件，这时候如果需要弹出一个提示进行确认，点击确认就会下载，点取消便不会下载，类似这种场景还是很多的，因此不能占用confirm。而prompt则不一样，在Android中，几乎不会使用到这个方法，就是用，也会进行自定义，所以我们完全可以使用这个方法。该方法就是弹出一个输入框，然后让你输入，输入完成后返回输入框中的内容。因此，占用prompt是再完美不过了。
OK，找到突破口后，我们就开始实现通信，那么怎么实现呢？既然要通信，那么我们是不是得有通信协议呢？我们可以参考http 的样式http://host:port/path?param=value 来 规定一个属于我们自己的协议:
jsbridge://className:port/methodName?jsonObj
这样我们Native拿到这串字符串后，通过解析，就可以知道调用哪个类的哪个方法，此处jsonObj用来封装请求的参数。
细心的朋友一点发现了里面有个port，那么这个port是拿来干什么的呢? 其实js层调用native层方法后，native需要将执行结果返回给js层，不过你会觉得通过WebChromeClient对象的onJsPrompt方法将返回值返回给js不就好了吗，其实不然，如果这么做，那么这个过程就是同步的，如果native执行异步操作的话，返回值怎么返回呢？这时候port就发挥了它应有的作用，我们在js中调用native方法的时候，在js中注册一个callback，然后将该callback在指定的位置上缓存起来，然后native层执行完毕对应方法后通过WebView.loadUrl调用js中的方法，回调对应的callback。那么js怎么知道调用哪个callback呢？于是我们需要将callback的一个存储位置传递过去，那么就需要native层调用js中的方法的时候将存储位置回传给js，js再调用对应存储位置上的callback，进行回调。
上面是js向native的通信协议，那么另一方面，native向js的通信协议也需要制定，一个必不可少的元素就是返回值，这个返回值和js的参数做法一样，通过json对象进行传递，该json对象中有状态码code，提示信息msg，以及返回结果result，如果code为非0，则执行过程中发生了错误，错误信息在msg中，返回结果result为null，如果执行成功，返回的json对象在result中。下面是两个例子，一个成功调用，一个调用失败。
{
"code":500,
"msg":"method is not exist",
"result":null
}
{
"code":0,
"msg":"ok",
"result":{
"key1":"returnValue1",
"key2":"returnValue2",
"key3":{
"nestedKey":"nestedValue"
"nestedArray":["value1","value2"]
}
}
}
Ok,这样我们在native里调用
mWebView.loadUrl("javascript:JSBridge.onFinish(port,jsonObj);");
即可，在调用JS暴露的方法时顺便把port带上，为什么要带port,可以参考上面一段解释。
好了，那么我们可以根据以上的内容先来设计JS了(看注释的重点)
(function (win) {
var hasOwnProperty = Object.prototype.hasOwnProperty;
var JSBridge = win.JSBridge || (win.JSBridge = {});
var JSBRIDGE_PROTOCOL = 'JSBridge';
var Inner = {
callbacks: {},
call: function (obj, method, params, callback) {
console.log(obj+" "+method+" "+params+" "+callback);
var port = Util.getPort();
console.log(port);
//重点
this.callbacks[port] = callback;
var uri=Util.getUri(obj,method,params,port);
console.log(uri);
window.prompt(uri, "");
},
onFinish: function (port, jsonObj){
//重点
var callback = this.callbacks[port];
callback && callback(jsonObj);
delete this.callbacks[port];
},
};
var Util = {
getPort: function () {
return Math.floor(Math.random() * (1 << 30));
},
getUri:function(obj, method, params, port){
params = this.getParam(params);
var uri = JSBRIDGE_PROTOCOL + '://' + obj + ':' + port + '/' + method + '?' + params;
return uri;
},
getParam:function(obj){
if (obj && typeof obj === 'object') {
return JSON.stringify(obj);
} else {
return obj || '';
}
}
};
for (var key in Inner) {
if (!hasOwnProperty.call(JSBridge, key)) {
JSBridge[key] = Inner[key];
}
}
})(window);
我们在call()方法里随机生成领域各port后将callback存入callbacks数组中的port位置,根据之前我们定义的协议生成uri,调用window.prompt(uri,””); 我们还需要一个方法来处理js回调，所以有了onFinish方法，方法里面做的事:首先根据port从callbacks中取出callback执行，然后将callbacks的port位置元素删除。
好了，JS这边处理完了，那我们native这边是不是要暴露方法给JS调用呢? 没错，我们需要一个类似android 原生的@javascriptInterface引用，就是暴露给JS调用的方法，所以我们有了如下的方法
JSBridge.register("jsName",javaClass.class)
这个javaClass就是满足某种规范的类，该类中有满足规范的方法，我们规定这个类需要实现一个空接口，为什么呢?主要作用就混淆的时候不会发生错误，还有一个作用就是约束JSBridge.register方法第二个参数必须是该接口的实现类。那么我们定义这个接口
public interface IBridge{
}
类规定好了，类中的方法我们还需要规定，为了调用方便，我们规定类中的方法必须是static的，这样直接根据类而不必新建对象进行调用了（还要是public的），然后该方法不具有返回值，因为返回值我们在回调中返回，既然有回调，参数列表就肯定有一个callback，除了callback，当然还有前文提到的js传来的方法调用所需的参数，是一个json对象，在java层中我们定义成JSONObject对象；方法的执行结果需要通过callback传递回去，而java执行js方法需要一个WebView对象，于是，满足某种规范的方法原型就出来了。
public static void methodName(WebView web view,JSONObject jsonObj,Callback callback){
}
OK，那我们看看这个register方法究竟做了些什么事吧
public class JSBridge {
private static Map<String, HashMap<String, Method>> exposedMethods = new HashMap<>();
public static void register(String exposedName, Class<? extends IBridge> clazz) {
if (!exposedMethods.containsKey(exposedName)) {
try {
exposedMethods.put(exposedName, getAllMethod(clazz));
} catch (Exception e) {
e.printStackTrace();
}
}
}
private static HashMap<String, Method> getAllMethod(Class injectedCls) throws Exception {
HashMap<String, Method> mMethodsMap = new HashMap<>();
Method[] methods = injectedCls.getDeclaredMethods();
for (Method method : methods) {
String name;
if (method.getModifiers() != (Modifier.PUBLIC | Modifier.STATIC) || (name = method.getName()) == null) {
continue;
}
Class[] parameters = method.getParameterTypes();
if (null != parameters && parameters.length == 3) {
if (parameters[0] == WebView.class && parameters[1] == JSONObject.class && parameters[2] == Callback.class) {
mMethodsMap.put(name, method);
}
}
}
return mMethodsMap;
}
}
简单来说，我们这个方法做的事就是先判断这个类的别名(此处是jsName)是否存在，不存在的话就往里面添加该类暴露出来的方法(三个参数要满足上面的规范的方法)
好了，我们暴露出去方法了，那么这时候js调用后，从我们的突破口，没错，就是onJsPrompt方法里，我们要做的事就是调用我们的native方法,所以有了以下代码
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;
}
}
别忘了给webView设置
mWebView.setWebChromeClient(new JSBridgeWebChromeClient());
我们callJava方法里做了什么事呢?其实就是解析url，查找对应的暴露方法调用
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("/", "");
}
}
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;
}
好了，最后，我们当然是来讲Callback啦，看重点注释就可以了，其实就是回调js的onFinish方法。
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);
}
});
}
}
}
好了，最后我们来测测吧，也就是我们说的使用
public class BridgeImpl implements IBridge {
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();
}
}
}
private static JSONObject getJSONObject(int code, String msg, JSONObject result) {
JSONObject object = new JSONObject();
try {
object.put("code", code);
object.put("msg", msg);
object.putOpt("result", result);
return object;
} catch (JSONException e) {
e.printStackTrace();
}
return null;
}
}
别忘了注册
JSBridge.register("bridge", BridgeImpl.class);
JS这边我只放重点的那行代码
<button onclick="JSBridge.call('bridge','showToast',{'msg':'Hello JSBridge'},function(res){alert(JSON.stringify(res))})">
接着就是使用WebView将该index.html文件load进来测试了
mWebView.loadUrl("file:///android_asset/index.html");
点击按钮后的结果截图
好了，那我们来试试子线程回调，在在BridgeImpl中加入测试方法
public static void testThread(WebView webView, JSONObject param, final Callback callback) {
new Thread(new Runnable() {
@Override
public void run() {
try {
Thread.sleep(3000);
JSONObject object = new JSONObject();
object.put("key", "value");
callback.apply(getJSONObject(0, "ok", object));
} catch (InterruptedException e) {
e.printStackTrace();
} catch (JSONException e) {
e.printStackTrace();
}
}
}).start();
}
JS中加入
<button onclick="JSBridge.call('bridge','testThread',{},function(res){alert(JSON.stringify(res))})">
点击后，3秒弹出
有些框架里面的突破口不在onJsPrompt方法里，在shouldOverrideUrlLoading方法里，不过原理应该差不多。
好了，完结，撒花，放鞭炮，收工！