hybrid开发设计
hybrid方案背景
大部分业务都是在不停改变的，我们希望native不发布新版本就可以让线上用户使用新功能。我们要实现这样的方式，采用h5来实现就可以满足这一要求，准确说是native里提供一个装载h5的webview容器。单独使用h5完成整个应用和单独使用native来实现在体验上相差太大，所以考虑使用混合开发的方式。强调体验的地方使用native，其他地方使用h5，这样一来体验方面可以大幅提升。
h5与native如何交互
h5和native的交互通常是三种：
1、native提供方法，js调用native的方法。
2、native在本地注入js方法并且调用。
3、webview拦截请求，js发起自定义协议，native在请求里面拦截处理。
下面对分别进行一些介绍。
方案一
1、native注入对象（有一系列供js使用的方法）以及提供给js调用的名称。
webView.addJavascriptInterface(new HybridJsInterface(),"HybridJSInterface");
2、native提供可以供js调用的方法。
public class HybridJsInterface {
@JavascriptInterface
final public void hello(String text) {
Log.i("method hello","text="+text);
}
}
3、js调用native的方法。
function hybrid(){
window.HybridJSInterface.hello("hello hybrid");
}
方案二
1、native注入js方法。（也可以是h5直接提供的方法）
// function helloJs(){
// alert("hello js");
// }
String script = "function helloJs(){ alert('hello js');}";
//script是js方法对应的字符串
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
mWebContent.evaluateJavascript(script, null);
} else {
mWebContent.loadUrl("javascript:" + script);
}
}
2、native调用注入的js方法
String handle = "helloJs()"; if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { mWebContent.evaluateJavascript(handle, null); } else { mWebContent.loadUrl("javascript:" + handle); }
注入和调用可以合并在一起，个人建议注入方法和调用方法分别执行。
方案三
1、native拦截h5发过来的请求协议（自定义协议）。
webview位置拦截的WebViewClient对象。
webView.setWebViewClient(new HybridWebViewClient());
HybridWebViewClient重写shouldOverrideUrlLoading方法
public boolean shouldOverrideUrlLoading(WebView view, String url) { Uri parse = Uri.parse(url); String path = parse.getPath(); switch (path) { //TODO } }
2、js那边发起请求协议。
方案分析
这三种方案单独使用都比较有局限性。
方案一的思路是native提前给h5实现好h5需要使用的方法，方法调用完全由h5控制，缺陷是h5调用的功能实现都由native实现，当h5页面中需要新功能的时候需要修改native才能支持。
方案二的思路是js提前给native提供方法，方法调用完全由native控制，缺陷是当js提供了新的方法那么需要修改native主动调用才能使用新功能。
方案三的思路是native拦截h5发过了的请求进行分发控制，js需要使用的功能是native已经提前准备好的，使用不同的url进行分发来使用，缺陷是h5使用新的功能那么需要修改native提供新功能。
单独使用这三种方案的共同缺点就是js和native都是一个单向的调用，相互太过依赖。要是三种方案都用上是不是可以解决问题呢，其实根本问题不在这里，而在于这些方案都没有办法动态扩展，也就是说native一旦完成之后那么单纯靠js是很难完成功能扩展的。我们需要一种可以适应一定程度动态扩展的方案，那就让h5作为项目主导，native提供服务。
hybrid设计
总体设计思路是h5控制整个业务流程以及交互流程。h5那边负责发命令并且回调，native负责响应命令。我是采用方案三来实现，客户端需要做的就是预先处理好这些命令（url）。既然是响应命令那么首先就需要把和业务无关的命令给整理出来，比较通用的包括下面内容（不一定全）：
1、header控制。
heade的样式可以参考新闻类app的详情页（这里不截图），包括内容：左边按钮（多个），右边按钮（多个），主标题，副标题。
需要做的控制是左、右按钮是否显示、显示的文本及图标以及点击按钮的回调，主、副标题是否显示及显示内容。
2、页面刷新。
页面刷新用于内容改变之后h5主动通知native进行刷新。
3、页面跳转。
页面跳转分成两种一种是页面跳转到一个新的native页面，另一种是在webview内部做跳转。native的跳转包括内容：跳转动画、跳转目标页、目标页需要的参数。
4、loadingview/progressbar。
通常情况建议直接使用h5的进度显示。loadingview的控制包括：loadingview是否显示，loadingview的显示样式（通常只有一种样式）。
5、传感器数据。
传感器这部分不一定每个应用都需要。比如某些h5页面需要做活动，那么里面可能会用的摇一摇这样的功能。传感器的控制包括：地理位置、方向、震动、运动量。
6、h5离线包更新。
离线包的更新对于h5来说是一条更新命令。不过在native实现上面需要包括：离线包更新检查（版本比较）、离线包下载、离线包解压保存。
7、离线包开关。
是否使用离线数据。native需要做的是开启离线包命令之后需要把请求的url映射到本地文件缓存。
8、数据请求。
数据请求是指h5需要请求数据不通过直接网络访问，而是通过native自己的网络服务获取数据，尤其是在跨域的情况下很方便。
读者可以根据自己的需要实现这些功能，我这边已经实现了，但是因为时间少还没有来得及整理代码，在后期会放到github上。有任何问题欢迎讨论，留下qq群196761677、311536202。
