Android开发之Hybrid开发

本文将介绍Android中hybrid开发相关的知识点。hybrid开发实际上是混合开发的意思，这里的混合是H5开发与Native开发混合的意思。下面的文章中我们将逐个介绍一下hybrid开发的概念、hybrid开发的优势、Android中如何实现hybrid开发、简单的hybrid开发的例子，以及在产品实践中对hybrid开发的应用，希望通过本篇文章的介绍让您能够对Android中的hybrid开发有一个基本的认识。

一：hybrid开发的概念

在具体介绍hybrid开发之前，我们先看一下什么是hybrid开发，在这里我们先引用一下百度百科中对hybrid开发的定义：

Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。 
从定义中我们可以看到hybrid开发其实就是在App开发过程中既使用到了web开发技术也使用到了native开发技术，通过这两种技术混合实现的App就是我们通常说的hybrid app，而通过这两种技术混合开发就是hybrid开发。

好吧，我们已经知道hybrid开发的具体含义，那么一个问题就产生了，既然我们已经有了native开发了为何还需要hybrid开发呢？它有什么好处么？答案是肯定的，下面我们就来看一下为何需要hybrid开发方式。

二：为何需要hybrid开发

下面我们简单看一下Native开发中存在的弊端以及使用hybrid开发方式的好处，通过对比你就能知道了hybrid开发的优势，当然了，这里不是推崇使用hybrid开发方式，native也有native开发的优势，hybrid开发也有hybrid开发的劣势，这里只是简单的看一下hybrid相对于native开发的优势。

• 使用Native开发的方式人员要求高，只是一个简单的功能就需要iOS程序员和Android程序员各自完成；
• 使用Native开发的方式版本迭代周期慢，每次完成版本升级之后都需要上传到App Store并审核，升级，重新安装等，升级成本高；
• 使用hybrid开发的方式简单方便，同一套代码既可以在IOS平台使用，也可以在Android平台使用，提高了开发效率与代码的可维护性；
• 使用hybrid开发的方式升级简单方便，只需要服务器端升级一下就好了，对用户而言完全是透明了，免去了Native升级中的种种不便；

通过对比可以发现hybrid开发方式现对于native实现主要的优势就是更新版本快，代码维护方便，当然了这两个优点也是我们推崇使用hybrid开发app的主要因素。知道了hybrid开发的好处之后，我们如何在Android中实现hybrid开发呢?下面我们就将介绍这个问题。

三：Android中如何实现Bybird开发

其实在Android开发中使用hybrid模式开发app，也是有两种方案的：

• 使用第三方hybrid框架
• 自己使用webview加载

通过这两种方案实现hybrid开发各有利弊，具体如下：

使用PhoneGap、AppCan之类的第三方框架，其实现的原理是以WebView作为用户界面层，以JavaScript作为基本逻辑，以及和中间件通讯，再由中间件访问底层API的方式，进行应用开发。相当于为我们封装了webview与相应的native组件；

使用webview控件加载H5网页的内容，其中客户端的webview只是作为一个加载H5页面的壳子，具体的实现效果是由H5实现的，这个需要Native程序员和H5程序员一起合作完成；

使用第三方框架的方式的好处是许多功能已经被集成好了，只需要简单的调用即可，但是这种方式集成度高，不容易定制化处理，而且性能上也是一个打的问题；

使用webview加载H5页面，定制化程度高，问题可控，但是相对与第三方框架集成度不够高，但是其已经可以满足我们日常的开发功能需要了，目前还是比较推荐使用这种方式实现hybrid开发；

下面我们就看一下如何在Android系统中通过webview实现对H5页面的加载操作。

四：hybrid开发简单实现

• 在AndroidManifest.xml中定义网络请求权限

<uses-permission Android:name="Android.permission.INTERNET"/>
 
 
 

  
1
 

注意这个权限是必须的，因为加载webview页面一般而言经常是网络上的H5页面，这时候的网络请求权限就是必须的了，好多时候测试webview加载网络H5页面失败，找了半天不知道是什么原因，最后才发现是网络权限没有添加…

• 在Layout布局文件中定义Webview控件

<WebView 
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:id="@+id/webView"
    />
 
 
 

  
1
  
2
  
3
  
4
  
5
 

这里的WebView控件就是Android原生的webview控件了，其和普通的Android控件的使用没有什么不同都是在布局文件中定义，然后在Activity代码中获取并执行初始化操作等等。

• 在代码中获取Webview控件加载本地或者网络H5资源

加载本地H5页面

/**
 * 加载本地H5资源文件
 */
webView = (WebView) findViewById(R.id.webView);
webView.loadUrl("file:///Android_asset/example.html");
 
 
 

  
1
  
2
  
3
  
4
  
5
 

加载网络H5页面

/**
 * 加载网络H5资源
 */
webView = (WebView) findViewById(R.id.webView);
webView.loadUrl("http://baidu.com");
 
 
 

  
1
  
2
  
3
  
4
  
5
 

可以发现在获取到webview组件之后直接执行一个loadUrl方法传入一个url地址就可以了，这样在activity页面中就可以展示出webview页面了，契合普通的网页效果没什么不同，这里需要说明的是，webview不但能够加载网页地址，同样的也可以加载html代码，本地html资源等等，相对来说功能还是很强大的。

当然了以上只是最最简单的webview使用的例子，下面我们可以为我们的webview对象设置各种参数：

• 为Webview控件设置参数

 WebSettings webSettings = h5Fragment.mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setLoadWithOverviewMode(true);
        webSettings.setAllowFileAccess(false);
        webSettings.setUseWideViewPort(false);
        webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
        webSettings.setDatabaseEnabled(false);
        webSettings.setAppCacheEnabled(false);
        webSettings.setBlockNetworkImage(true);
 
 
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
 

这里的WebSettings就是webview的设置参数对象，我们是通过它为webview设置各种参数值的，见名知意，看见名字我们就知道各个set方法的意思了。比如设置webview中的html页面js代码是否可用，是否可以访问系统文件，H5缓存是否可用，是否立即加载网页图片等等。

• 为Webview控件设置WebChromeClient

WebChromeClient对象是webview的关于页面效果回调方法的实现对象，主要用于实现webview页面上一些效果的回调，我们可以看一下其中实现的一些回调方法：

/**
 * 自定义实现WebChromeClient对象
 */
public class MWebChromeClient extends WebChromeClient{
   

    /**
     * 当webview加载进度变化时回调该方法
     */
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        super.onProgressChanged(view, newProgress);
    }

    /**
     * 当加载到H5页面title的时候回调该方法
     */
    @Override
    public void onReceivedTitle(WebView view, String title) {
        super.onReceivedTitle(view, title);
    }

    /**
     * 当接收到icon的时候回调该方法
     */
    @Override
    public void onReceivedIcon(WebView view, Bitmap icon) {
        super.onReceivedIcon(view, icon);
    }

    /**
     * 当H5页面调用js的Alert方法的时候回调该方法
     */
    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        return