引言:
在前篇教程中,開(kāi)發(fā)了一個(gè)oc與js互相調(diào)用的alert插件
但遺留下的問(wèn)題是h5開(kāi)發(fā)者在調(diào)用我們插件時(shí),并不能通過(guò)js語(yǔ)言來(lái)調(diào)用
以及該如何將插件打包給h5開(kāi)發(fā)者安裝至其項(xiàng)目中
這里我們繼續(xù)上次的插件做打包及js代碼映射,最好看一下上面鏈接的前篇
本文僅針對(duì)ios開(kāi)發(fā)者,初次涉及cordova插件開(kāi)發(fā)
</br>
教程目錄如下,請(qǐng)根據(jù)自己進(jìn)度自行選擇閱讀
1.創(chuàng)建插件打包文件夾及必要文件
2.編寫JS代碼(oc語(yǔ)法映射至js語(yǔ)法)
3.配置config.xml文件
4.添加本地插件,通過(guò)js的語(yǔ)法去調(diào)用插件.
總目錄:Cordova插件開(kāi)發(fā)及打包完全指北[ios]
</br>
一.創(chuàng)建插件打包文件夾及必要文件
在桌面處創(chuàng)建插件打包文件夾com.amCordova.amAler(遵守命名規(guī)范),并創(chuàng)建子文件夾及子文件如下圖,將之前開(kāi)發(fā)插件的代碼(AMAlertHelper.h 及.m)復(fù)制到ios文件夾下
請(qǐng)創(chuàng)建好這樣的結(jié)構(gòu)后再進(jìn)行后續(xù)動(dòng)作
</br>
二.編寫JS代碼
之前在index.html調(diào)用插件時(shí),用的是字符串形式的方法名.這里寫一個(gè)將方法映射至JS調(diào)用的代碼
其原理就是創(chuàng)建一個(gè)JS對(duì)象指向我們的OC對(duì)象 并且給JS對(duì)象創(chuàng)建一個(gè)實(shí)例方法指向我們的OC方法
打開(kāi)之前創(chuàng)建的AlertHelper.js文件,并進(jìn)行編寫代碼如下
var exec = require("cordova/exec");
//定義一個(gè)類名為AlertHelper的對(duì)象構(gòu)建函數(shù)
function AlertModel() {};
//給AlertModel添加一個(gè)js方法jsAlertShow
//映射至之前寫的方法上 ocAlertModel是我們給OC類命名的實(shí)例對(duì)象名稱
//showAlertWithTitle是我們OC的方法
//option是入?yún)?AlertModel.prototype.jsAlertShow = function (success,fail,option) {
exec(success, fail, 'ocAlertModel', 'showAlertWithTitle', option);
};
//new一個(gè)AlertModel的類對(duì)象，并賦值給module.exports
var alertModel = new AlertModel();
module.exports = alertModel;
</br>
三.配置plugin.xml文件
配置plugin.xml 就是為了告訴cordova我們的文件路徑在哪,我們的oc類名是什么,oc對(duì)象名是什么,js類名及js對(duì)象名是什么 等等.這樣cordova才能在安裝插件時(shí),正確的進(jìn)行指向.
具體哪些配置對(duì)應(yīng)了什么意思,在代碼中已寫了注釋
打開(kāi)前面創(chuàng)建的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>
<!-- 對(duì)應(yīng)js映射文件的地址及名稱-->
<js-module src="www/AlertHelper.js" name="alertModel">
<!-- js調(diào)用時(shí)的對(duì)象名稱-->
<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項(xiàng)目中測(cè)試我們的插件
至此為止,插件的開(kāi)發(fā)已經(jīng)全部完成了,所謂的打包其實(shí)就是我們那個(gè)帶配置文件的插件文件夾
新建一個(gè)cordova項(xiàng)目并且將我們的本地插件添加進(jìn)去進(jìn)行測(cè)試一下
1.新建一個(gè)cordova項(xiàng)目并且添加ios工程 (這里不詳說(shuō)了)
2.進(jìn)入到項(xiàng)目的目錄下
cd /Users/aimi/Desktop/cordova/testCordovaDoc
</br>
3.添加剛剛創(chuàng)建的本地插件包
cordova plugin add
/Users/aimi/Desktop/cordova/MyPlugin/com.amCordova.amAlert
</br>
4.進(jìn)行測(cè)試,通過(guò)js的語(yǔ)法去調(diào)用插件. 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">
//調(diào)用OC插件方法
function alertShow() {
//通過(guò)js代碼調(diào)用
alertModel.jsAlertShow(alertSuccess,alertFail,["Hey,I'm JS!"]);
}
//調(diào)用成功的回調(diào)函數(shù)
function alertSuccess(msg) {
alert(msg);
}
//調(diào)用失敗的回調(diào)函數(shù)
function alertFail(msg) {
alert('調(diào)用OC失敗: ' + msg);
}
</script>
</head>
<body style="padding-top:50px">
<button style="font-size:17px;" onclick="alertShow();">調(diào)用OC插件</button> <br>
</body>
</html>
</br>
結(jié)束:
按照教程一步步走,應(yīng)該已經(jīng)成功了.講真,研究一下cordova插件 也能夠?qū)υ膐c與Js交互有更深的一層了解貌嫡！
