http://blog.csdn.net/e20914053/article/details/50170487
如今混合開發方興未艾,有的專案可能一開始是原生開發的,後期需要加入混合開發,如將Cordova工程引進到原生工程中。那麼該如何操作呢?下面就來描述一下步驟。
1、首先我們來建立一個Cordova工程,取名MyCordova。在建立Cordova工程之前,需要先安裝Cordova,具體安裝方法網上很多,在此不累述。
- cordova create MyCordova
進入MyCordova工程目錄,其結構如下:
2、接下來新增iOS平臺,新增命令如下:
- cordova platform add ios
該命令需要在MyCordova工程根目錄下執行。執行成功後,我們進入MyCordova工程下的platforms目錄下,我們發現它增加了一個名為ios的檔案目錄。
3、回到MyCordova工程根目錄,執行剛才新增的ios工程。
- cordova run ios
執行效果如下:
4、通過xcode建立一個原生工程MyApp。如果原生工程已經存在,可以忽略此步驟。
5、將MyCordova工程中iOS下的CordovaLib資料夾和www資料夾拷貝到MyApp工程目錄下。
MyCordova目錄:
MyApp目錄:
6、參看上圖。刪除CordovaLib下面的build資料夾,此資料夾是在執行cordova run ios命令過程中產生的,如果你沒有執行過該命令就不會產生這個資料夾。然後通過xcode的Add files to “MyApp” ...將CordovaLib.xcodeproj檔案和www資料夾新增到MyApp工程中。注意,在新增www資料夾時要勾選Create folder references。如下:
7、將MyCordova工程根目錄下的config.xml也新增到MyApp工程中。至此,所需的檔案拷貝新增工作已經完成,其檔案結構如下:
下面開始對對MyApp工程進行配置工作。
8、選擇MyApp工程的Build Settings->Other Linker Flags, 設定-Objc -all_load
9、選擇MyApp工程的Build Phases->Target Dependencies新增CordovaLib
10、選擇MyApp工程的Build Phases->Link Binary With Librarys新增libCordova.a、 MobileCoreServices.framework、AssetsLibrary.framework相關框架。
到此MyApp工程已經順利匯入MyCordova工程了,點選Product->Build編譯通過。下面再來建立並彈出Cordova頁面。
11、建立一個檢視控制器CordovaViewController。
其中CordovaViewController.h檔案內容如下:
- #import <Cordova/CDVViewController.h>
- #import <Cordova/CDVCommandDelegateImpl.h>
- #import <Cordova/CDVCommandQueue.h>
- @interface CordovaViewController : CDVViewController
- @end
- @interface CordovaCommandDelegate : CDVCommandDelegateImpl
- @end
- @interface CordovaCommandQueue : CDVCommandQueue
- @end
CordovaViewController.m檔案內容如下:
- #import "CordovaViewController.h"
- @implementation CordovaViewController
- - (id)initWithNibName:(NSString*)nibNameOrNil bundle:(NSBundle*)nibBundleOrNil
- {
- self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
- if (self) {
- // Uncomment to override the CDVCommandDelegateImpl used
- // _commandDelegate = [[MainCommandDelegate alloc] initWithViewController:self];
- // Uncomment to override the CDVCommandQueue used
- // _commandQueue = [[MainCommandQueue alloc] initWithViewController:self];
- }
- return self;
- }
- - (id)init
- {
- self = [super init];
- if (self) {
- // Uncomment to override the CDVCommandDelegateImpl used
- // _commandDelegate = [[MainCommandDelegate alloc] initWithViewController:self];
- // Uncomment to override the CDVCommandQueue used
- // _commandQueue = [[MainCommandQueue alloc] initWithViewController:self];
- }
- return self;
- }
- - (void)didReceiveMemoryWarning
- {
- [super didReceiveMemoryWarning];
- }
- #pragma mark View lifecycle
- - (void)viewWillAppear:(BOOL)animated
- {
- [super viewWillAppear:animated];
- }
- - (void)viewDidLoad
- {
- [super viewDidLoad];
- }
- - (void)viewDidUnload
- {
- [super viewDidUnload];
- }
- #pragma mark UIWebDelegate implementation
- - (void)webViewDidFinishLoad:(UIWebView*)theWebView
- {
- theWebView.backgroundColor = [UIColor blackColor];
- return [super webViewDidFinishLoad:theWebView];
- }
- @end
- @implementation CordovaCommandDelegate
- #pragma mark CDVCommandDelegate implementation
- - (id)getCommandInstance:(NSString*)className
- {
- return [super getCommandInstance:className];
- }
- - (NSString*)pathForResource:(NSString*)resourcepath
- {
- return [super pathForResource:resourcepath];
- }
- @end
- @implementation CordovaCommandQueue
- - (BOOL)execute:(CDVInvokedUrlCommand*)command
- {
- return [super execute:command];
- }
- @end
12、為MyApp工程中的“進入Cordova”UIButton繫結事件方法,來彈出CordovaViewController檢視控制器。執行效果如下:(左邊為原生檢視控制器,右邊為彈出的CordovaViewController檢視控制器)
是不是跟在MyCordova工程中通過cordova run ios命令執行出來的效果一樣呢!
ok,至此原生工程匯入Cordova工程的方法步驟全部結束。