Android应用开发之Hybrid

成都创新互联成立于2013年，先为下花园等服务建站，下花园等地企业，进行企业商务咨询服务。为下花园企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

什么是Hybrid？

---

从用户的角度来看，Hybrid的app和native的app并没有明显的区别。他们从app store下载或安装apk，打开app开始使用，这一切都是一样的，而且两者都包含各种类型的应用，游戏、社交、电商等等。最重要的是，用户根本不关心你是Hybrid还是native，他们只想要安装一个自己喜欢的应用，并开始使用。

Native与Hybrid的本质区别是构建方式的不同，这些不同主要体现在应用框架和语言两方面。

Android Native所使用的语言大家都知道，主要是Java，某些情况下还有C/C++。而Hybrid除了Native所要用到的语言之外，还需要要Html、javascript、css等。至于哪种类型语言用的多，要看开发者选择混合(Hybrid)的形式和比例。既然Hybrid开发需要更多的语言方面的知识，那为什么还有那么多主流开发者和公司对之推崇呢？后面会做更详细的介绍。

对于框架，Native使用的是标准的android sdk，Hybrid其实也是处于android sdk之上的，只不过加了一层更适合web开发的中间层。现有的Hybrid框架主要有，Crosswalk, Cordova，PhoneGap等。

为什么使用Hybrid？

一般来说，如果我们开发的app要发布到各个移动平台，并且都是采用native开发的话，那么我们就需要熟悉各个平台sdk与语言的技术人员；如果采用Hybrid方式的话，那么使用web技术开发的页面代码就可以在各个平台共用。不过要注意的是，如果native向web层提供了一些自定义的插件，就需要确保各个平台接口定义的统一性，否则web代码在不同平台上无法正常工作。

另外，很多时候开发相同的页面使用web技术会比native更加节省时间。

当然，使用web技术并不总是好的。首先是性能问题，一般web技术开发的页面总是比native开发的运行要慢的，这是web的一块很大的硬伤。不过随着目前硬件和浏览器引擎性能的不断优化，在体验上两者的差距会越来越小，这也是hybrid或纯web能够发展起来的重要原因之一；另一方面，在接口的全面性和能力上，web层也是没有native层丰富的，不过这个问题可以通过打通web层和java层的接口来解决。总的来说，对于那些实时性要求较高或者过于复杂的页面还是需要采用native来写。

Hybrid有哪些方式？

---

Hybrid的开发方式大概有两种大类型，不使用框架和使用框架；而使用框架又可以分为native混合和web混合。

不使用框架是指开发者直接面对标准的android native接口自己来实现web页面，一般情况下主要是利用webview及其相关接口，某些情况下还会使用第三方框架提供的嵌入式类webview模块，比如Crosswalk框架的XWalkView。这种的方式的优势是灵活性较大，开发者可以任意组织自己的h6代码和native代码。比较适合对native比较熟悉，能够掌控上下层各种细节的开发者。

native混合是指，使用的框架让开发者主要面对native相关开发，而把web作为附属。这种方式和不适用框架有些类似，只不过其中的web采用了框架而已。适合对native比较熟悉，但又想借助web框架的高效性的开发者。

web混合是指，使用的框架让开发者主要面对web相关开发，而把native作为web的插件来提供。这种适合对web更加熟悉，并且主要页面都采用web开发的情况。通知这种方式也是未来的主流方式。

目前很多hybrid框架，比如crosswalk，cordova等都提供了native混合和web混合两种开发模式，开发者可根据自身及公司情况来选择。

不使用第三方框架

---

这种方式同时需要android native开发技术与web开发技术。本文不对native或者web作更多的深入讨论，而是将焦点集中在两者结合的部分。

首先，使用native方式定义一个activity或者fragment，其中的布局文件包含WebView。该webview就是显示我们的web页面的核心控件。下面是一个demo的布局文件：

android:orientation="vertical"     android:layout_width="match_parent"     android:layout_height="match_parent" >             android:id="@+id/webview"         android:layout_width="match_parent"         android:layout_height="match_parent"/>

然后，在activity或者fragment获取WebView实例并初始化。这里的初始化涉及到，web view的各项能力，开发者需要根据自身的需求来设置。比如对javascript的支持，对viewport的支持等。更详细的细节可以查看WebView和Web app best practice。下面是一个设置web view的例子：

mWebView = (WebView) findViewById(R.id.webview); // Init WebView mWebView.getSettings().setJavaScriptEnabled(true); mWebView.getSettings().setUseWideViewPort(true); mWebView.setWebChromeClient(new WebChromeClient() {     public void onProgressChanged(WebView view, int progress) {         // Activities and WebViews measure progress with different scales.         // The progress meter will automatically disappear when we reach 100%         mActivity.setProgress(progress * 1000);     } }); mWebView.setWebViewClient(new WebViewClient() {     public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {         Toast.makeText(mActivity, "Oh no! " + description, Toast.LENGTH_SHORT).show();     } }); mWebView.addJavascriptInterface(new Object() {     @JavascriptInterface     public void startActivity(final String url) {         runOnUiThread(new Runnable() {             @Override             public void run() {                 Intent intent = new Intent(mActivity, MainActivity.class);                 intent.putExtra("url", url);                 mActivity.startActivity(intent);             }         });     } }, "Android"); mWebView.loadUrl(mUrl);

该例子中，“mUrl”代表要加载的URL。另外，页面跳转使用native的startActivity来多次实例化MainActivity；这种方式可以让web页面之间的跳转具有类似native的体验，比如定制各种页面切换动画等，当然，开发者可以选择使用web的location.href。

第三，在assets中添加我们的web代码，可以只用javascript、p_w_picpath、video、css等。下面是一个demo的web代码目录结构：

其中page1.html的代码如下：

This is page1. Goto page2

最后，demo程序的运行效果如下：

本demo的代码可从Github上下载。

Cordova/PhoneGap

---

Cordova算是Hybrid界的一个核心，是大名鼎鼎的phoneGap的主要驱动框架。除了PhoneGap之外同时有很多其他可与其协作的工具集，比如“ionic”、“crosswalk”、“Framework 7”等，可以说是支撑起了hybrid的主要生态。

Cordova主要特性：

1. web引擎可替换。这一点保证了其运行时有极大的灵活性，比如默认情况下cordova会采用系统自带的webview，而该控件在android 4.3以前表现非常差，所以可以将运行时替换为crosswalk, crosswalk可以将最新的chromium引擎打包进apk从而为所有4.1以上的android设备提供统一的UI渲染和高效的js执行性能。

2. 丰富的native插件，拥有丰富的插件共享库，并且开发者可以定制自己的插件。

3. 轻量级，核心框架非常紧凑，可以说只提供web和native的粘合剂，但是通过与其他优秀的框架结合使用，比如Framework7, agular.js等，可以灵活地满足开发者的需求。

PhoneGap是cordova最流行的一个发行版，它的核心是cordova，除此之外还提供了一些方便的调试和build工具。如果把cordova比作linux内核的话，PhonaGap就相当于Ubuntu或者Redhat等。

PhoneGap提供测主要工具有，GUI开发工具(适合喜欢图形界面的开发者)， 浏览器端或手机端图形化调试工具(不需要build成apk即可实时查看正在编写的web页面效果)，云端build(开发者不需要在本地安装android sdk)等。

对于喜欢纯命令行或者自己定制开发工具的开发者来说，推荐直接使用cordova，cordova也具有更大的灵活性。不过一般我们开发移动端app时，都希望实时看到web页面的效果，所以对于大多数情况还是推荐从PhoneGap入手。

Cordova官方地址：http://cordova.apache.org/

PhoneGap官方地址：http://phonegap.com/

Crosswalk

---

Crosswalk是Intel Open Source Technology Center出的一个Hybrid框架。该框架以chromium引擎为核心，使用该框架app的web运行时不使用android系统自带的webview控件以及底层的渲染引擎，而是Crosswalk自己的引擎。开发者可以选择将crosswalk运行时直接打包进apk，也可以选择app在第一次运行时从远程加载。前者会导致打包的apk较大，比一般的大25MB左右；后者会导致第一次运行时加载比较慢。两者都不是很完美，不过Crosswalk也有自己的优势。

首先，使用crosswalk运行时可以保证在不同的android设备上拥有一致的UI渲染，同时chromium引擎的高性能可以保证js执行效率比其他框架高出一大截。对于android 4.1 ~ 4.3的设备而言，因为系统还是采用webkit内核，所以web的渲染和执行效率严重不足，而crosswalk则可以解决这个问题。

其次，crosswalk可以保证与chromium的同步更新，开发者可以及时的用到这个优秀引擎的许多最新特性。

结论

---

框架选择	混合模式
如果不关心4.1到4.3的界面统一性和运行性能，想要框架的轻量级，考虑到社区的活跃程度，那么推荐Cordova/PhoneGap。 如果必须要考虑4.1到4.3的用户，并且对于界面渲染和执行效率有较高要求，推荐Crosswalk。当然也可以使用cordova/PhoneGap框架结合crosswalk运行时的方式。	如果比较关心接口的灵活性，扩展性，底层性能，框架稳定性那么推荐native 混合。 如果想以web技术为主，推荐web 混合。

如果对于性能要求变态，想要精确控制内存网络等，推荐纯native开发。

Hybrid的另外一个问题是，在大部分情况下，移动端的用户已经习惯了native的风格的交互习惯，如果我们还想传统PC web那样写页面，很可能用户不会买账；而且传统的web页面风格在移动端确实体验不是很好。这就导致我们的设计人员和开发者必须用web技术来写出类似native的交互体验。

虽然，从零开始的用CSS也能写出类似native的效果。但是，要将整个应用的所有页面都实现成一整套比较协调统一的native风格还是需要花费巨大精力的。所以，hybrid开发时，我们需要适合移动端的web UI框架。目前比较出名的有Framework 7, ionic，telerik, onsenui, famo等。

关于各个框架的优劣，本文不做过多的介绍。不过，从UI的风格，成熟度，使用量来看本文推荐Framework 7。

标题名称：Android应用开发之Hybrid
网站URL：http://chengdu.cdxwcx.cn/article/ppjcgc.html