使用Cordova进行iOS开发 (已存的项目中添加Cordova及自定义插件)

1.将cordova本地相关的文件copy到已存在的项目中

1.1 打印当前的路径

 $ pwd
>>>:"/Users/Mac/Desktop"

1.2 创建一个Cordova目录

$ mkdir Cordova

1.3 进入到Cordova目录

$ cd Cordova

1.4 创建一个cordova项目

$ cordova create hello com.example.hello HelloWorld
>>>:"cordova create hello com.example.hello HelloWorld"
 >>>:"Creating a new cordova project."

1.5 进入到hello目录

$ cd hello

1.6 指定生成iOS平台的代码项目

$ cordova platform add ios
>>>:"Adding ios project..."
>>>:"iOS project created with [email protected]"
>>>:"Discovered plugin "cordova-plugin-whitelist" in config.xml. Installing to the project"
>>>:"Fetching plugin "cordova-plugin-whitelist@1" via npm"
>>>:"Installing "cordova-plugin-whitelist" for ios"

1.7 进入到"./platforms/ios" 路径

$ cd /Users/Mac/Desktop/Cordova/hello/platforms/ios

1.8 "/Users/Mac/Desktop/Cordova/hello/platforms/ios" 路径下面需要copy的4个文件夹copy到新建项目的根路径中

CordovaLib  cordova  www  platform_www
使用Cordova进行iOS开发 (已存的项目中添加Cordova及自定义插件)_第1张图片
将cordova中的文件夹copy到新建项目的根路径中

1.9 需要将下面的两个"config.xml" -> 各自copy到已存在的iOS项目的文件夹内

使用Cordova进行iOS开发 (已存的项目中添加Cordova及自定义插件)_第2张图片
config.xml (一)

使用Cordova进行iOS开发 (已存的项目中添加Cordova及自定义插件)_第3张图片
config.xml (二)

2.配置相关参数

2.1 下图"Run Script.png" 中点击①中的按钮创建"New Run Script Phase" ,②为创建的"Run Script"

使用Cordova进行iOS开发 (已存的项目中添加Cordova及自定义插件)_第4张图片
Run Script.png

2.2 将下图"Copy www directory.png" 中①原名称"Run Script"修改为"Copy www directory";将②中的选项去掉;将下面的代码复制到③中.

NODEJS_PATH=/usr/local/bin; NVM_NODE_PATH=~/.nvm/versions/node/`nvm version 2>/dev/null`/bin; N_NODE_PATH=`find /usr/local/n/versions/node/* -maxdepth 0 -type d 2>/dev/null | tail -1`/bin; XCODE_NODE_PATH=`xcode-select --print-path`/usr/share/xcs/Node/bin; PATH=$NODEJS_PATH:$NVM_NODE_PATH:$N_NODE_PATH:$XCODE_NODE_PATH:$PATH && node cordova/lib/copy-www-build-step.js
使用Cordova进行iOS开发 (已存的项目中添加Cordova及自定义插件)_第5张图片
Copy www directory.png

2.3 Build Settings -> Other Linker Flags 中添加"-ObjC -all_load"

使用Cordova进行iOS开发 (已存的项目中添加Cordova及自定义插件)_第6张图片

2.4 Add Files to ... -> CordovaLib.xcodeproj


使用Cordova进行iOS开发 (已存的项目中添加Cordova及自定义插件)_第7张图片
CordovaLib.xcodeproj

2.5 Add Files to ... -> config.xml


使用Cordova进行iOS开发 (已存的项目中添加Cordova及自定义插件)_第8张图片
上面的 "config.xml (二)"

2.6 Add Files to ... -> www文件夹


使用Cordova进行iOS开发 (已存的项目中添加Cordova及自定义插件)_第9张图片
www.png

2.7 Schemes按照下图配置,然后编译一次程序,最后导入下面两项
Build Phases -> Target Dependencies -> CordovaLib
Build Phases -> Link Binary With Libraries -> libCordova.a

使用Cordova进行iOS开发 (已存的项目中添加Cordova及自定义插件)_第10张图片
注意选对Schemes编译

2.8 Schemes按照下图配置,将"ViewController.h" 文件改为

#import 
#import 
#import 
@interface ViewController : CDVViewController
@end
使用Cordova进行iOS开发 (已存的项目中添加Cordova及自定义插件)_第11张图片
ViewController.h

3. 自定义插件

3.1 在config.xml文件中加入

 
     
     

3.2 创建一个"EOPlugin" 类,实现下面的的方法

  • EOPlugin.h 实现

import

@interface EOPlugin : CDVPlugin

  • (void)myMethod:(CDVInvokedUrlCommand*)command;
    @end

> - EOPlugin.m 实现

> ```
#import "EOPlugin.h"
@implementation EOPlugin
- (void)myMethod:(CDVInvokedUrlCommand*)command
{
    CDVPluginResult* pluginResult = nil;
    NSString* myarg = [command.arguments objectAtIndex:0];
    if (myarg != nil) {
        pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK];
    } else {
        pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString:@"Arg was null"];
    }
    [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
}
@end

3.3 编写index.html文件如下



 
  
  
  
  
  
 
 
  

ExampleObject

使用Cordova进行iOS开发 (已存的项目中添加Cordova及自定义插件)_第12张图片
index.html

运行效果:


使用Cordova进行iOS开发 (已存的项目中添加Cordova及自定义插件)_第13张图片
运行效果.png

Cordova入门也没有那么难,多看看官方的文档Documentation。自己也练习了下文章在上的编写,体验还不错,给个好评。

你可能感兴趣的:(使用Cordova进行iOS开发 (已存的项目中添加Cordova及自定义插件))