我們知道,在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
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"