[ios开发Cordova插件] - 插件打包及映射js代码

引言:

在前篇教程中,开发了一个oc与js互相调用的alert插件
但遗留下的问题是h5开发者在调用我们插件时,并不能通过js语言来调用
以及该如何将插件打包给h5开发者安装至其项目中
这里我们继续上次的插件做打包及js代码映射,最好看一下上面链接的前篇
本文仅针对ios开发者,初次涉及cordova插件开发

教程目录如下,请根据自己进度自行选择阅读
1.创建插件打包文件夹及必要文件
2.编写JS代码(oc语法映射至js语法)
3.配置config.xml文件
4.添加本地插件,通过js的语法去调用插件.

总目录:Cordova插件开发及打包完全指北[ios]

一.创建插件打包文件夹及必要文件

在桌面处创建插件打包文件夹com.amCordova.amAler(遵守命名规范),并创建子文件夹及子文件如下图,将之前开发插件的代码(AMAlertHelper.h 及.m)复制到ios文件夹下
请创建好这样的结构后再进行后续动作

ACDE5845-C2DF-4D5A-9621-9A40CC3EF6DF.png

二.编写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;

三.配置plugin.xml文件

配置plugin.xml 就是为了告诉cordova我们的文件路径在哪,我们的oc类名是什么,oc对象名是什么,js类名及js对象名是什么 等等.这样cordova才能在安装插件时,正确的进行指向.
具体哪些配置对应了什么意思,在代码中已写了注释

打开前面创建的plugin.xml文件,并添加如下代码

    
        
    
    
    alertHelper
    插件的描述
    

    
    

        
    
    


    
        
        

        
            

        
            
        
        
    

四.将本地插件添加至cordova项目中测试我们的插件

至此为止,插件的开发已经全部完成了,所谓的打包其实就是我们那个带配置文件的插件文件夹
新建一个cordova项目并且将我们的本地插件添加进去进行测试一下
1.新建一个cordova项目并且添加ios工程 (这里不详说了)
2.进入到项目的目录下

cd /Users/aimi/Desktop/cordova/testCordovaDoc

3.添加刚刚创建的本地插件包

cordova plugin add
/Users/aimi/Desktop/cordova/MyPlugin/com.amCordova.amAlert

4.进行测试,通过js的语法去调用插件. alertModel.jsAlertShow(alertSuccess,alertFail,["Hey,I'm JS!"]);

替换index.html代码如下

    
        
        
            
            
    
    
    
        调用OC插件 

    

结束:

按照教程一步步走,应该已经成功了.讲真,研究一下cordova插件 也能够对原生的oc与Js交互有更深的一层了解！