如何在原生工程中引入Cordova工程-for iOS 【转】

时间:2022-08-11 04:59:57

http://blog.csdn.net/e20914053/article/details/50170487

如今混合开发方兴未艾,有的项目可能一开始是原生开发的,后期需要加入混合开发,如将Cordova工程引进到原生工程中。那么该如何操作呢?下面就来描述一下步骤。

1、首先我们来创建一个Cordova工程,取名MyCordova。在创建Cordova工程之前,需要先安装Cordova,具体安装方法网上很多,在此不累述。

  1. cordova create MyCordova

进入MyCordova工程目录,其结构如下:

如何在原生工程中引入Cordova工程-for iOS 【转】

2、接下来添加iOS平台,添加命令如下:

  1. cordova platform add ios

该命令需要在MyCordova工程根目录下执行。执行成功后,我们进入MyCordova工程下的platforms目录下,我们发现它增加了一个名为ios的文件目录。

如何在原生工程中引入Cordova工程-for iOS 【转】

3、回到MyCordova工程根目录,运行刚才添加的ios工程。

  1. cordova run ios

运行效果如下:

如何在原生工程中引入Cordova工程-for iOS 【转】

4、通过xcode创建一个原生工程MyApp。如果原生工程已经存在,可以忽略此步骤。

如何在原生工程中引入Cordova工程-for iOS 【转】

5、将MyCordova工程中iOS下的CordovaLib文件夹和www文件夹拷贝到MyApp工程目录下。

MyCordova目录:

如何在原生工程中引入Cordova工程-for iOS 【转】

MyApp目录:

如何在原生工程中引入Cordova工程-for iOS 【转】

6、参看上图。删除CordovaLib下面的build文件夹,此文件夹是在执行cordova run
ios命令过程中产生的,如果你没有执行过该命令就不会产生这个文件夹。然后通过xcode的Add files to “MyApp”
...将CordovaLib.xcodeproj文件和www文件夹添加到MyApp工程中。注意,在添加www文件夹时要勾选Create
folder references。如下:

如何在原生工程中引入Cordova工程-for iOS 【转】

7、将MyCordova工程根目录下的config.xml也添加到MyApp工程中。至此,所需的文件拷贝添加工作已经完成,其文件结构如下:

如何在原生工程中引入Cordova工程-for iOS 【转】

下面开始对对MyApp工程进行配置工作。

8、选择MyApp工程的Build Settings->Other Linker Flags, 设置-Objc -all_load

如何在原生工程中引入Cordova工程-for iOS 【转】

9、选择MyApp工程的Build Phases->Target Dependencies添加CordovaLib

如何在原生工程中引入Cordova工程-for iOS 【转】

10、选择MyApp工程的Build Phases->Link Binary With Librarys添加libCordova.a、 MobileCoreServices.framework、AssetsLibrary.framework相关框架。

如何在原生工程中引入Cordova工程-for iOS 【转】

到此MyApp工程已经顺利导入MyCordova工程了,点击Product->Build编译通过。下面再来创建并弹出Cordova页面。

11、创建一个视图控制器CordovaViewController。

如何在原生工程中引入Cordova工程-for iOS 【转】

其中CordovaViewController.h文件内容如下:

  1. #import <Cordova/CDVViewController.h>
  2. #import <Cordova/CDVCommandDelegateImpl.h>
  3. #import <Cordova/CDVCommandQueue.h>
  4. @interface CordovaViewController : CDVViewController
  5. @end
  6. @interface CordovaCommandDelegate : CDVCommandDelegateImpl
  7. @end
  8. @interface CordovaCommandQueue : CDVCommandQueue
  9. @end

CordovaViewController.m文件内容如下:

  1. #import "CordovaViewController.h"
  2. @implementation CordovaViewController
  3. - (id)initWithNibName:(NSString*)nibNameOrNil bundle:(NSBundle*)nibBundleOrNil
  4. {
  5. self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
  6. if (self) {
  7. // Uncomment to override the CDVCommandDelegateImpl used
  8. // _commandDelegate = [[MainCommandDelegate alloc] initWithViewController:self];
  9. // Uncomment to override the CDVCommandQueue used
  10. // _commandQueue = [[MainCommandQueue alloc] initWithViewController:self];
  11. }
  12. return self;
  13. }
  14. - (id)init
  15. {
  16. self = [super init];
  17. if (self) {
  18. // Uncomment to override the CDVCommandDelegateImpl used
  19. // _commandDelegate = [[MainCommandDelegate alloc] initWithViewController:self];
  20. // Uncomment to override the CDVCommandQueue used
  21. // _commandQueue = [[MainCommandQueue alloc] initWithViewController:self];
  22. }
  23. return self;
  24. }
  25. - (void)didReceiveMemoryWarning
  26. {
  27. [super didReceiveMemoryWarning];
  28. }
  29. #pragma mark View lifecycle
  30. - (void)viewWillAppear:(BOOL)animated
  31. {
  32. [super viewWillAppear:animated];
  33. }
  34. - (void)viewDidLoad
  35. {
  36. [super viewDidLoad];
  37. }
  38. - (void)viewDidUnload
  39. {
  40. [super viewDidUnload];
  41. }
  42. #pragma mark UIWebDelegate implementation
  43. - (void)webViewDidFinishLoad:(UIWebView*)theWebView
  44. {
  45. theWebView.backgroundColor = [UIColor blackColor];
  46. return [super webViewDidFinishLoad:theWebView];
  47. }
  48. @end
  49. @implementation CordovaCommandDelegate
  50. #pragma mark CDVCommandDelegate implementation
  51. - (id)getCommandInstance:(NSString*)className
  52. {
  53. return [super getCommandInstance:className];
  54. }
  55. - (NSString*)pathForResource:(NSString*)resourcepath
  56. {
  57. return [super pathForResource:resourcepath];
  58. }
  59. @end
  60. @implementation CordovaCommandQueue
  61. - (BOOL)execute:(CDVInvokedUrlCommand*)command
  62. {
  63. return [super execute:command];
  64. }
  65. @end

12、为MyApp工程中的“进入Cordova”UIButton绑定事件方法,来弹出CordovaViewController视图控制器。运行效果如下:(左边为原生视图控制器,右边为弹出的CordovaViewController视图控制器)

如何在原生工程中引入Cordova工程-for iOS 【转】                        如何在原生工程中引入Cordova工程-for iOS 【转】

是不是跟在MyCordova工程中通过cordova run ios命令运行出来的效果一样呢!

ok,至此原生工程导入Cordova工程的方法步骤全部结束。