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。