hybrid开发设计

时间 2019-11-11

标签 hybrid 开发设计栏目 Hybrid 繁體版

原文原文链接

hybrid方案背景javascript

大部分业务都是在不停改变的，咱们但愿native不发布新版本就可让线上用户使用新功能。咱们要实现这样的方式，采用h5来实现就能够知足这一要求，准确说是native里提供一个装载h5的webview容器。单独使用h5完成整个应用和单独使用native来实如今体验上相差太大，因此考虑使用混合开发的方式。强调体验的地方使用native，其余地方使用h5，这样一来体验方面能够大幅提高。java

h5与native如何交互git

h5和native的交互一般是三种：github

一、native提供方法，js调用native的方法。web

二、native在本地注入js方法而且调用。跨域

三、webview拦截请求，js发起自定义协议，native在请求里面拦截处理。缓存

下面对分别进行一些介绍。网络

方案一app

一、native注入对象（有一系列供js使用的方法）以及提供给js调用的名称。ide

webView.addJavascriptInterface(new HybridJsInterface(),"HybridJSInterface");

二、native提供能够供js调用的方法。

public class HybridJsInterface {   
   @JavascriptInterface
    final public void hello(String text) {  
       Log.i("method hello","text="+text);  
   }
}

三、js调用native的方法。

function hybrid(){     
    window.HybridJSInterface.hello("hello hybrid"); 
}

方案二

一、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);
}
 }

二、native调用注入的js方法

  String handle = "helloJs()";
   if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { 
      mWebContent.evaluateJavascript(handle, null); 
  } else { 
      mWebContent.loadUrl("javascript:" + handle);
  }

注入和调用能够合并在一块儿，我的建议注入方法和调用方法分别执行。

方案三

一、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 
        }
 }

二、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）。既然是响应命令那么首先就须要把和业务无关的命令给整理出来，比较通用的包括下面内容（不必定全）：

一、header控制。

heade的样式能够参考新闻类app的详情页（这里不截图），包括内容：左边按钮（多个），右边按钮（多个），主标题，副标题。

须要作的控制是左、右按钮是否显示、显示的文本及图标以及点击按钮的回调，主、副标题是否显示及显示内容。

二、页面刷新。

页面刷新用于内容改变以后h5主动通知native进行刷新。

三、页面跳转。

页面跳转分红两种一种是页面跳转到一个新的native页面，另外一种是在webview内部作跳转。native的跳转包括内容：跳转动画、跳转目标页、目标页须要的参数。

四、loadingview/progressbar。

一般状况建议直接使用h5的进度显示。loadingview的控制包括：loadingview是否显示，loadingview的显示样式（一般只有一种样式）。

五、传感器数据。

传感器这部分不必定每一个应用都须要。好比某些h5页面须要作活动，那么里面可能会用的摇一摇这样的功能。传感器的控制包括：地理位置、方向、震动、运动量。

六、h5离线包更新。

离线包的更新对于h5来讲是一条更新命令。不过在native实现上面须要包括：离线包更新检查（版本比较）、离线包下载、离线包解压保存。

七、离线包开关。

是否使用离线数据。native须要作的是开启离线包命令以后须要把请求的url映射到本地文件缓存。

八、数据请求。

数据请求是指h5须要请求数据不经过直接网络访问，而是经过native本身的网络服务获取数据，尤为是在跨域的状况下很方便。

读者能够根据本身的须要实现这些功能，我这边已经实现了，可是由于时间少尚未来得及整理代码，在后期会放到github上。有任何问题欢迎讨论，留下qq群19676167七、311536202。