前言：本文主要是针对对webapp开发有一定基础和对Cordova有了一定的了解的人员，如果你是Cordova的初学者，建议先看看Cordova的相关介绍以及简单的一些CLI命令使用。Cordova的相关介绍以及安装推荐文章
一、使用Cordova新建一个ios项目
1.打开终端,输入
cordova create Demo com.example.HelloWorld HelloWorld
1.1新建iOS项目
参数说明
第一个参数:Demo为工程的文件夹名；
第二个参数:（可选）com.example.HelloWorld为应用程序的id名；
第三个参数:（可选）HelloWorld为项目的名称。
2.进入工程添加iOS平台
cd Demo
cordova platform add ios
1.2.1添加iOS平台
执行完上述命令后，我们的文件目录结构如下
1.2.2工程目录结构
(注：执行上面这个命令的时候会有些慢，耐心等待，如果命令执行失败，没有生成ios这个目录，就重新执行这个命令)
3.运行并测试
用Xcode打开Demo->platforms->ios->HelloWorld.xcodeproj,编译运行这个项目，出现以下结果则表示你的项目运行成功（因为是用Xcode进行编译运行，所以下面的代码编辑都是在Staging目录下，原因见Cordova的相关介绍以及安装推荐文章）
1.3运行结果
二、利用cordova自定义js插件
1.编辑/定义插件
在Staging->www下新建一个目录plugins，用来专门存放我们自定义的js插件,然后是新建插件的文件名cordova-js-plugin，最后是存放插件的源代码目录以及文件（以上命名可以根据个人习惯）。最终得到的目录结构如下
2.1 js插件目录结构
插件logger.js的源代码和格式（这里只是一个简单的例子）
cordova.define("cordova-js-plugin.logger",function(require, exports, module) {
var logger = module.exports;
logger.alterLog =function(){
alert("你好！");
};
});
2.注入插件
在Staging->www目录下找到cordova_plugins.js文件，这个文件是专门用来向cordova注入我们自定义的插件的，注入的代码参考如下（粗体部门为我们刚刚写的插件logger.js）
cordova.define('cordova/plugin_list',function(require, exports, module) {
module.exports = [
{
"file":"plugins/cordova-js-plugin/www/logger.js",
"id":"cordova-js-plugin.logger",
"clobbers": [
"logger"
]
}
];
module.exports.metadata =
// TOP OF METADATA
{
"cordova-plugin-whitelist":"1.2.2"
}
// BOTTOM OF METADATA
});
说明
file：插件的文件路径
id：和定义插件时的名称（即第一个参数）保持一致
clobbers:调用插件时使用的名称
3.调用插件
在Staging->www下找到index.html文件，如果head下有以下第一行，就将它注释掉，替换成第二行（第一行中的某些配置项会报错，这个是cordova与原生的兼容性问题，不作深入讨论）
2.2 index.html文件调整
接下来就是编写调用的入口和代码（代码比较简单，这里就直接上截图）
2.3 测试js插件入口
2.4 调用js插件方法
运行结果如图
2.5 运行结果
2.6 运行结果
三、利用cordova自定义oc插件
1.编辑/定义插件
在工程目录下找到Plugins目录，新建一个插件文件夹CDVOcPlugin，然后新建一个插件对应的类，这个类是继承CDVPlugin，最后的目录结构如下
3.1 oc插件目录结构
插件的定义和实现
//OCPlugin.h
#import <Cordova/CDVPlugin.h> //这个地方要看清，默认引用的头文件如果不一样，改成这样
@interface OCPlugin :CDVPlugin
- (void)testOcPlugin:(CDVInvokedUrlCommand*)command;
@end
//OCPlugin.m
#import "OCPlugin.h"
@implementation OCPlugin
- (void)testOcPlugin:(CDVInvokedUrlCommand*)command{
if (command.arguments.count>0) {
//获取到入参数组中的第一个元素
NSString *param = command.arguments[0];
//创建一个回调对象并附上String类型参数
CDVPluginResult *pluginResult =
[CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:
[NSString stringWithFormat:@"传入参数：%@", param]];
//通过cordova框架中的callBackID回调至JS的回调函数上
[self.commandDelegate sendPluginResult:
pluginResult callbackId:command.callbackId];
} else {
//如果没有入参,则回调JS失败函数
CDVPluginResult *pluginResult =
[CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR
messageAsString:@"没有传入参数"];
[self.commandDelegate sendPluginResult:
pluginResult callbackId:command.callbackId];
}
}
@end
2.注入插件
在Staging目录下找到config.xml配置文件,通过如下配置注入我们的oc插件（配置较简单，直接上图）
3.2 注入插件
说明
feature name：调用时插件的名称
param name：插件包名 value：插件对用的oc类
3.调用插件
同调用js插件一样，在index.html文件添加一个入口
3.3 调用插件的入口
接下来是插件调用的具体方式，在index.html文件里面加一个script标签（重点是粗体部分）
<script type="text/javascript">
//调用OC插件方法
function clickOcPlugin() {
//通过cordova将我们的插件名称,方法名,参数,成功回调的func及失败回调的func传入
cordova.exec(alertSuccess,alertFail,"ocplugin",
"testOcPlugin",["Hello,world!"]);
};
//调用成功的回调函数
functionalertSuccess(msg) {
alert(msg);
};
//调用失败的回调函数
functionalertFail(msg) {
alert("调用OC插件失败: "+ msg);
};
</script>
运行结果如图
3.4 运行结果
3.5 运行结果
注：以上内容是我学习相关资料后的分享，如果有错误，请各位指出，也欢迎大家前来拍砖，灰常感谢！
附：源代码在github上，点击此处前往下载
网友评论