Android应用开发之Hybrid-创新互联

Android应用开发之Hybrid

创新互联是一家专注于成都网站设计、网站制作、外贸营销网站建设与策划设计,沙县网站建设哪家好?创新互联做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:沙县等地区。沙县做网站价格咨询:18982081108

什么是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代码目录结构:

Android应用开发之Hybrid

其中page1.html的代码如下:



  page1
  
  
  


This is page1.


Goto page2


最后,demo程序的运行效果如下:

Android应用开发之Hybrid

Android应用开发之Hybrid

Android应用开发之Hybrid

本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。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


文章名称:Android应用开发之Hybrid-创新互联
分享链接:http://pwwzsj.com/article/jjeeh.html