一、配置cordova开发环境并添加ios平台支持
下面建立一个连接安卓系统电视棒和手机端，实现屏幕拷贝，文件共享等功能的demo。
1.通过终端命令创建一个项目
cordova create TestPlugin com.testPlugin.zzj TestPlugin
//create 后面的参数分别对应是"项目的文件夹名称"、"ios工程的bundleID"、"ios工程名"
创建目录
2.为项目添加ios平台支持
//首先cd 进入到工程目录下，然后运行
cordova platform add ios
创建平台支持
3.使用xcode打开目录进行正常流程ios开发
ios工程目录
4.在plugin目录下建立文件夹，命名方式类似bundleID格式，建立.h .m文件，继承自CDVPlugin类，插件的主要逻辑都在这里实现。如果插件需要静态库依赖也把对应的framework或.a文件也加入到新建的文件夹下。
在.m文件中写native方法供js调用，需要注意的是入参必须是CDVInvokedUrlCommond类，js调用失败时根据callbackId传送对应的失败信息
5.在staging目录下的config.xml文件下添加下面代码，让js能识别原生中调用的类及调用类的方法
//eshareModel是model名称，value后面的"linkmeEshare"是.h文件中实现逻辑所属的类，就是一开始继承CDVPlugin那个
<feature name="eshareModel">
<param name="ios-package" value="linkmeEshare" />
</feature>
6.在Staging下的index.html文件写一个按钮测试js能不能正常调用原生方法。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" charset="utf8">
//调用OC插件方法
function alertShow() {
//通过cordova将成功调用执行的fun、失败执行的fun 模型名称，方法名，参数传入cordova.exec
cordova.exec(alertSuccess,alertFail,"eshareModel","showEshareDevices",["设备名称："]);
}
function alertSuccess(msg) {
alert('调用oc成功：' + msg);
}
function alertFail(msg) {
alert('调用oc失败：' + msg);
}
</script>
<button style="font-size:17px;" onclick="alertShow();">调用OC插件 </button> <br>
</body>
</html>
运行工程，可以看到效果如图：
到这里代表插件功能开发完成并通过测试，下一步是把cordova插件加入到ionic框架中，提供给js、ts调用。
二、在ionic中添加cordova插件并调用。
把cordova工程中的插件导入到ionic中有两种方法，一种是利用plugman命令创建一个新插件工程，替换资源文件及配置文件。
另一种是创建打包文件夹，把资源文件和配置文件放到特定的位置。
首先保证终端中已经安装好plugman，然后执行下面命令新建一个插件工程，并添加ios平台
plugman create --name esharePlugin --plugin_id esharePlugin --plugin_version 1.0.0
plugman platform add --platform_name ios
复制上面cordova工程中的framework文件、.h、.m文件到插件的ios文件夹下，并且修改plugin.xml配置文件以及www文件夹下的js文件。
配置文件中包含插件所引用的资源以及其他设置，js文件里面负责对原生方法的调用。
关于xml文件中各项的意义可以查看：
cordova Plugin.xml 详解
最后修改js文件
var exec = require('cordova/exec');
exports.coolMethod = function (arg0, success, error) {
exec(success, error, 'esharePlugin', 'showEshareDevices', [arg0]);
};
把插件导入到ionic中，添加支持平台并且运行。
ionic cordova plugin add /Users/jeffrey.z/esharePlugin
如果出现needs a valid package.json，则要先进入到插件目录运行
npm init
在ionic中需要调用的ts页面下，添加下面代码
declare let cordova: any;
//调用成功的回调函数
alertSuccess(msg) {
alert(msg);
}
//调用失败的回调函数
alertFail(msg) {
alert('调用OC失败: ' + msg);
}
//调用OC插件方法
alertShow() {
//通过js代码调用
let avgArr:string[] = ["Hey,获取设备!"];
cordova.plugins.esharePlugin.coolMethod(this.alertSuccess,this.alertFail,avgArr);
}
eshareTest() {
this.alertShow();
}
在html页面下添加一个测试按钮
<button ion-button block (click)="eshareTest()">
showEshare
</button>
执行
ionic build iOS
运行结果如图
IMG_0ECE4FCE95B0-1.jpeg
以上，cordova自定义插件开发完成！
网友评论