Android应用开发之Hybrid

什么是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框架主要有,CrosswalkCordovaPhoneGap等。

为什么使用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。这种的方式的优势是灵活性较大,开发者可以任意组织自己的h5代码和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的布局文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

<WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

然后,在activity或者fragment获取WebView实例并初始化。这里的初始化涉及到,web view的各项能力,开发者需要根据自身的需求来设置。比如对javascript的支持,对viewport的支持等。更详细的细节可以查看WebViewWeb 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、image、video、css等。下面是一个demo的web代码目录结构:

其中page1.html的代码如下:

<html>
<head>
    <title>page1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="./css/style.css"/>
    <script type="text/javascript" src="./script/eventHandler.js"></script>
</head>
<body>
<p>This is page1.</p>
<button type="button" value="Goto page2" onclick="onClick(‘file:///android_asset/page2.html‘)">Goto page2</button>
<img src="./image/red_night.png">
</body>
</html>

最后,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。

时间: 2024-10-10 03:32:15

Android应用开发之Hybrid的相关文章

Android 安全开发之 ZIP 文件目录遍历

1.ZIP文件目录遍历简介 因为ZIP压缩包文件中允许存在"../"的字符串,攻击者可以利用多个"../"在解压时改变ZIP包中某个文件的存放位置,覆盖掉应用原有的文件.如果被覆盖掉的文件是动态链接so.dex或者odex文件,轻则产生本地拒绝服务漏洞,影响应用的可用性,重则可能造成任意代码执行漏洞,危害用户的设备安全和信息安全.比如近段时间发现的"寄生兽"漏洞.海豚浏览器远程命令执行漏洞.三星默认输入法远程代码执行漏洞等都与ZIP文件目录遍历有

Android快速开发之appBase——(6).HttpReq和APICloudSDK

Android快速开发之appBase--(6).HttpReq和APICloudSDK HttpReq和APICloudSDK都是网络请求组件,都是基于xUtils的HttpUtils重新封装的.接下来讲一下使用方法. 1.HttpReq 看以看到有这么几个方法 GET:GET方式请求 POST:普通的POST表单提交 POST:将数据以流的形式传递 /** * POST请求,用InputStream的方式传递请求参数 * * @param api * 接口地址 * @param reques

Android底层开发之Audio HAL

http://blog.csdn.net/kangear/article/details/44939429 Android底层开发之Audio HAL 在Android音频底层调试-基于tinyalsa中以「抛开Android的天生复杂,回归嵌入式Linux的本质」的方式介绍如何调试Linux内核中的音频驱动. 这里向上再伸展一下进入HAL层,看是如何将tinyalsa封装给Frameworks使用的. 基于4.2.2版本源码进行讨论.Android官方教程是Audio Implementing

Android底层开发之Linux输入子系统要不要推断系统休眠状态上报键值

Android底层开发之Linux输入子系统要不要推断系统休眠状态上报键值 题外话:一个问题研究到最后,那边记录文档的前半部分基本上都是没用的,甚至是错误的. 重点在最后,前边不过一些假想猜測. http://blog.csdn.net/kangear/article/details/40072707 在调试一下红外遥控器input驱动时,直接採用的是一个半成品的驱动在上边实现的自己的设备的匹配,但同一时候遇到了一些关于input输入子系统的疑惑. 按键一般有「按下和抬起」两个状态一般使用0和1

Android驱动开发之Hello实例

Android驱动开发之Hello实例: 驱动部分 modified:   kernel/arch/arm/configs/msm8909-1gb_w100_hd720p-perf_defconfig modified:   kernel/arch/arm/configs/msm8909-1gb_w100_hd720p_defconfig modified:   kernel/drivers/input/misc/Kconfig modified:   kernel/drivers/input/

Android快速开发之appBase——(1).appBase介绍

Android快速开发之appBase--(1).appBase介绍 一直想写博客,苦于自己的文笔实在不行,在CSDN潜水了好几年,中间差不多3年没有写过博客.原因有二:1.文笔差:2.没时间. 今年开始,时间充裕了,开始计划练练自己的文笔,也让自己成长起来,希望从中能够提升自己的能力.望大家多多支持和关注!! 导读:appBase是什么? appBase是一个Android app开发的基础集合,目的是任何应用都可以在这个基础之上开发app,省去了搭建框架的时间. appBase=xutils

Android快速开发之appBase——(2).万能的Adapter

Android快速开发之appBase--(2).万能的Adapter android的Adapter是常用的一个组件,自定义的adapter基本上都是集成BaseAdapter,然后实现getView等一系列方法.时间长了,难免让人感觉到写的重复性代码过多,那么万能的Adapter讲解放你的双手. 对比 BaseAdapter package com.snicesoft.appbase.demo; import java.util.ArrayList; import java.util.Lis

android软件开发之webView.addJavascriptInterface循环渐进【二】

说明 文章列表 android软件开发之webView.addJavascriptInterface循环渐进[一]: http://www.sollyu.com/android-software-development-webview-addjavascriptinterface-cycle-of-gradual-oneandroid软件开发之webView.addJavascriptInterface循环渐进[二]: http://www.sollyu.com/586 上一篇文章发布之后,得到

【Android】Android软件开发之ListView 详解

原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://xys289187120.blog.51cto.com/3361352/657171 ListView的使用方法 ListView是Android软件开发中非常重要组件之一,基本上是个软件基本都会使用ListView ,今天我通过一个demo来教大家怎么样使用ListView组件 绘制出漂亮的列表,说道ListView就不得不说Adapter适配器,因为只有通过Adapter才可