如何在原生工程中引入Cordova工程

如今混合开发方兴未艾，有的项目可能一开始是原生开发的，后期需要加入混合开发，如将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工程的方法步骤全部结束。