引言:
在前篇教程中,开发了一个oc与js互相调用的alert插件
但遗留下的问题是h5开发者在调用我们插件时,并不能通过js语言来调用
以及该如何将插件打包给h5开发者安装至其项目中
这里我们继续上次的插件做打包及js代码映射,最好看一下上面链接的前篇
本文仅针对ios开发者,初次涉及cordova插件开发
</br>
教程目录如下,请根据自己进度自行选择阅读
1.创建插件打包文件夹及必要文件
2.编写JS代码(oc语法映射至js语法)
3.配置config.xml文件
4.添加本地插件,通过js的语法去调用插件.
</br>
一.创建插件打包文件夹及必要文件
在桌面处创建插件打包文件夹com.amCordova.amAler(遵守命名规范),并创建子文件夹及子文件如下图,将之前开发插件的代码(AMAlertHelper.h 及.m)复制到ios文件夹下
请创建好这样的结构后再进行后续动作
ACDE5845-C2DF-4D5A-9621-9A40CC3EF6DF.png
</br>
二.编写JS代码
之前在index.html调用插件时,用的是字符串形式的方法名.这里写一个将方法映射至JS调用的代码
其原理就是创建一个JS对象指向我们的OC对象 并且给JS对象创建一个实例方法指向我们的OC方法
打开之前创建的AlertHelper.js文件,并进行编写代码如下
var exec = require("cordova/exec");
//定义一个类名为AlertHelper的对象构建函数
function AlertModel() {};
//给AlertModel添加一个js方法jsAlertShow
//映射至之前写的方法上 ocAlertModel是我们给OC类命名的实例对象名称
//showAlertWithTitle是我们OC的方法
//option是入参
AlertModel.prototype.jsAlertShow = function (success,fail,option) {
exec(success, fail, 'ocAlertModel', 'showAlertWithTitle', option);
};
//new一个AlertModel的类对象，并赋值给module.exports
var alertModel = new AlertModel();
module.exports = alertModel;
</br>
三.配置plugin.xml文件
配置plugin.xml 就是为了告诉cordova我们的文件路径在哪,我们的oc类名是什么,oc对象名是什么,js类名及js对象名是什么 等等.这样cordova才能在安装插件时,正确的进行指向.
具体哪些配置对应了什么意思,在代码中已写了注释
打开前面创建的plugin.xml文件,并添加如下代码
<?xml version="1.0" encoding="UTF-8" ?>
<!-- id需要和文件夹名称保持一致 (插件的id)-->
<plugin xmlns="http://phonegap.com/ns/plugins/1.0"
id="com.amCordova.amAlertHelper"
version="1.0.0">
<engines>
<engine name="cordova" version=">=3.3.0" />
</engines>
<name>alertHelper</name>
<description>插件的描述</description>
<!-- 对应js映射文件的地址及名称-->
<js-module src="www/AlertHelper.js" name="alertModel">
<!-- js调用时的对象名称-->
<clobbers target="alertModel" />
</js-module>
<!-- ios所有文件的存放地址-->
<!--如果有图片的话也需要在这里配置,前缀是source-file-->
<platform name="ios">
<source-file src="src/ios/AMAlertHelper.m" />
<header-file src="src/ios/AMAlertHelper.h" />
<config-file target="config.xml" parent="/widget">
<!-- 插件映射至ios的类名-->
<feature name="ocAlertModel">
<param name="ios-package" value="AMAlertHelper" />
</feature>
</config-file>
</platform>
</plugin>
</br>
四.将本地插件添加至cordova项目中测试我们的插件
至此为止,插件的开发已经全部完成了,所谓的打包其实就是我们那个带配置文件的插件文件夹
新建一个cordova项目并且将我们的本地插件添加进去进行测试一下
1.新建一个cordova项目并且添加ios工程 (这里不详说了)
2.进入到项目的目录下
cd /Users/aimi/Desktop/cordova/testCordovaDoc
</br>
3.添加刚刚创建的本地插件包
cordova plugin add
/Users/aimi/Desktop/cordova/MyPlugin/com.amCordova.amAlert
</br>
4.进行测试,通过js的语法去调用插件. alertModel.jsAlertShow(alertSuccess,alertFail,["Hey,I'm JS!"]);
替换index.html代码如下
<!DOCTYPE html>
<html>
<head>
<title>AMAlert</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
//调用OC插件方法
function alertShow() {
//通过js代码调用
alertModel.jsAlertShow(alertSuccess,alertFail,["Hey,I'm JS!"]);
}
//调用成功的回调函数
function alertSuccess(msg) {
alert(msg);
}
//调用失败的回调函数
function alertFail(msg) {
alert('调用OC失败: ' + msg);
}
</script>
</head>
<body style="padding-top:50px">
<button style="font-size:17px;" onclick="alertShow();">调用OC插件</button> <br>
</body>
</html>
</br>
结束:
按照教程一步步走,应该已经成功了.讲真,研究一下cordova插件 也能够对原生的oc与Js交互有更深的一层了解！
网友评论