在已有 Xcode 項目中 加入Cordova架構

標籤：

轉自：http://www.jianshu.com/p/656838ae92bc

 

我們知道,在UIKit中的UIWebView雖然已經提供了很多功能了，比如JavaScript和Objc之間的通訊。但是考慮到一個問題，如果在Hybrid App中，如何才能實現JavaScript調用本地的一些硬體裝置，如網路攝影機、音頻、還有本機存放區呢？首先想到的就是規定一些協議，在UIWebViewDelegate 中去接收JavaScript發來的訊息並且由Objc代碼去控制本地的資料庫訪問，控制網路攝影機和音頻等等。但是諸如如何在WebView上顯示本地網路攝影機視頻，實現起來還是比較困難的。那麼問題來了，如何?這些協議，並且有廣泛的適用性，讓廣大的開發人員去使用這一套架構？

下面主要介紹一個開源的架構: Cordova，它的前身是PhoneGap，被Apache收購之後就改成Cordova了.

關於Cordova: 官方網站

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 aWebView(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 

https://nodejs.org/en/download/

2.  開啟終端輸入如下命令 

$  sudo npm install –g cordova

安裝 cordova

3. 然後就可以開始建立cordova項目了，如下：

$  cd Desktop/

$  cordova create Demo xidx Stevin_Y

上面第一個參數是project名，第二個是App id，第三個是檔案夾名

建立完成之後我們可以加入iOS項目

$  cd Stevin_Y/

$  cordova platform add ios

4.顯示已經安裝的平台項目以及可安裝的平台

 $  cordova  platform ls   

5.build iOS項目

 $  cordova 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.加入我們已經存在名為Demo項目，目錄結構如下:

2.拷貝Cordova相關檔案到Demo目錄下，拷貝後目錄結構如下

3.將CordovaLib.xcodeproj添加到Demo工程中，右鍵選擇Add Files To Demo

4.添加www目錄到工程中，記得是勾選Create folder references

5.按步驟三添加config.xml到工程中，目錄結構如下

6.選擇工程的Build Settings->Other Links, 設定-Objc -all_load

7.選擇Build Phases->New Run Script Phase，將新增New Run Script Phase命名為copy www directory

8.Build Phases->Target Dependencies添加CordovaLib

9.Link Binary With Librarys添加libCordova.a, MobileCoreServices,AssetsLibrary

9.接下來你就可以正常使用Cordova了，注意other linkers一定要設定，否則會提示類似的錯誤

-[__NSCFConstantString JSONObject]: unrecognized selector sent to instance

10. 然後什麼都不用動，command + R 就可以看到效果了，

事實上CDVViewController 中的HTML檔案配置地址都是可以自己定義的，只是預設的就是www檔案夾，所以我們什麼都不用改就可以運行了。

我們可以在載入之前插入如下代碼，指定檔案夾和開始頁HTML檔案：

self.wwwFolderName = @"myfolder";

self.startPage = @"mypage.html"

在已有 Xcode 項目中 加入Cordova架構