Hybrid App Development: 二、关于造轮子以及在Xcode iOS应用开发中加入Cordova

转载请注明出处：http://www.cnblogs.com/xdxer/p/4111552.html

【ctrl+左键点击图片可以查看原图】

在上一篇关于Hybrid App Development的文章中，我讨论了一下在iOS下UIWebView的使用方法。但是光使用一个UIWebView所提供的功能还是完全不能满足我们的需求。

关于造轮子的思考：

在UIKit中的UIWebView虽然已经提供了很多功能了，比如JavaScript和Objc之间的通信。但是考虑到一个问题，如果在Hybrid App 中，如何才能实现JavaScript调用本地的一些硬件设备，如摄像头、音频、还有本地存储呢？ 首先想到的就是规定一些协议，在UIWebViewDelegate 中去接收JavaScript 发来的消息并且由Objc代码去控制本地的数据库访问，控制摄像头和音频等等。但是诸如如何在WebView上显示本地摄像头视频，实现起来还是比较困难的。那么问题来了，如何实现这些协议，并且有广泛的适用性，让广大的开发者去使用这一套框架？ 这就是属于是否要造轮子的问题了。当然自己要造起轮子来是十分的费劲的，而且可能会隐藏有很多的BUG，如果使用现有的一些非开源框架的话同样会存在很多的不安全性的问题，和一些框架遗留的bug~下面要介绍的一个开源的框架，Cordova ，它的前身是PhoneGap，被Apache收购之后就改成了Cordova了~

关于Cordova:

http://cordova.apache.org/

Apache Cordova is an open-source mobile development framework. It allows you to use standard web technologies such as HTML5, CSS3, and JavaScript for cross-platform development, avoiding each mobile platforms‘ native development language. Applications execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device‘s sensors, data, and network status.

Cordova 是一个开源的移动开发框架。它可以让你使用标准的WEB技术比如HTML5,CSS3还有JavaScript来进行跨平台的开发，避开了每个移动平台的不同的开发语言。

Use Apache Cordova if you are:

• a mobile developer interested in mixing native application components with a WebView (special browser window) that can access device-level APIs, or if you want to develop a plugin interface between native and WebView components.

如果你对把一个能访问硬件级别API的WebView集成到Native应用中，或者你想要开发一个接口插件实现navtive和WebView组件之间的交互，都可以使用Apache Cordova。

在启用Cordova的WebView中，可以为应用提供了完整的用户接口。在某些平台中也可以作为一个嵌入在本地native应用的组件。

同时，我们可以自行开发插件~！

使用Cordova的方式分2种：

1.Cross-platform(CLI) workflow : CLI是一个High-Level的工具，可以允许你在多个平台上只建立一次工程。

2.Platform-centered workflow : 以Native为中心，使用WebView的形式嵌入。

在Mac OS 下使用 Cordova:

1. 首先安装一个Node.js http://nodejs.org/download/

2.  打开终端输入如下命令 $  sudo npm install –g cordova

3. 然后就可以开始建立cordova项目了，如下：

$ cd Desktop/

$ cordova create XiaDongxiang xdx XiaDongxiang

上面第一个参数是project名，第二个是id，第三个是文件夹名

建立完成之后我们可以加入iOS项目

$cd XiaDongxiang/

$cordova platform add ios

这个命令当然也可以是andriod之类的，不过本文只讨论iOS

4. 使用 $ cordova  platform ls 可以显示已经安装的平台项目以及可安装的平台

5. $ cordova build ios        build iOS项目

6 . 使用Xcode 打开项目，并且运行：

以上的步骤描述了如何使用Cordova建立一个简单的项目，接下来我们来看看如何在已有的Native项目中加入Cordova。

如何集成Cordova组件以WebView形式集成到Native应用中去：

可以参考这个网址给的步骤，但是有些地方是不对的。

http://cordova.apache.org/docs/en/4.0.0/guide_platforms_ios_webview.md.html

我所描述的是我加入工程的顺序~

1. 首先使用终端，在桌面上建立一个工程，并且加入ios平台的项目。

$cordova create xdx xdx xdx

$cd xdx/

$cordova platform add ios

2. 在以上工程中的platform/ios 目录下找到 config.xml 拖到Native工程中去。

3. 在以上工程中找到 CordovaLib文件夹，将整个文件夹拷贝到Native工程目录下，并且把 CordovaLib.xcodeproj 文件拖动到导航视图中 。

4. 设置其Identity中的Location 为Relative to Group:

5.在Native 工程中的target 中的 Build Phases 中加入如下4个库~

AssetsLibrary.framework
CoreLocation.framework
CoreGraphics.framework
MobileCoreServices.framework

6.在Native 的Target中Build Phases 中的Target Dependencies 中加入cordovaLib:

7. 在Native 的Target中Build Phases 中的Link Binary With Libraries 加入libCordova.a :

8. 在Target中的Building Settings 中：

Other Link Flags: 加入   –ObjC 和 –all_load (此处官方文档中有误，亲测)

Header Search Paths：

"$(TARGET_BUILD_DIR)/usr/local/lib/include"        
"$(OBJROOT)/UninstalledProducts/include"
"$(BUILT_PRODUCTS_DIR)"

9.在stroryboard中加入一个新的视图，建立一个新的ViewController 继承自 CDVViewController ，然后把之前创建的项目中的ios目录下的www文件夹拖到工程中去，记得要在加入的选项中选择create folder ，以建立文件夹，而不是group。

10. 然后什么都不用动，command + r 就可以看到效果了，如图：

事实上CDVViewController 中的HTML文件配置地址都是可以自己定义的，只是默认的就是www文件夹，所以我们什么都不用改就可以运行了。

我们可以在载入之前插入如下代码，指定文件夹和开始页HTML文件：

self.wwwFolderName = @"myfolder";
self.startPage = @"mypage.html"

接下来研究的方向就是如何使用 & 自己开发并且添加Cordova插件 –> 访问数据库、文件操作、音频、视频操作等，以及其实现的原理。