Hybrid App Development: 二、關於造輪子以及在Xcode iOS應用開發中加入Cordova

標籤：des   style   blog   http   io   ar   color   os   使用   

轉載請註明出處：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外掛程式 –> 訪問資料庫、檔案操作、音頻、視頻操作等，以及其實現的原理。

Hybrid App Development: 二、關於造輪子以及在Xcode iOS應用開發中加入Cordova