编写自定义cordova插件(JS)

在ionic项目中需要调用第三方应用时，需要自己编写自定义cordova插件来满足，本篇文章就介绍cordova插件的编写方法，以及在ionic应用的调用的方式。

一、编写JS插件

仅提供Javascript接口可供调用，不与native code相交互。

1、创建如下结构的项目，将其push到github方便后续安装



2、编写配置文件

创建项目之后，修改plugin.xml对该插件进行配置，因为该插件为单纯的js插件，与平台无关，所以plugin.xml配置很简单。

<?xml version="1.0" encoding="utf-8"?>
<plugin xmlns="http://www.phonegap.com/ns/plugins/1.0"
id="cordova.plugin.demo"
version="0.1.0">
<name>CordovaPluginJsDemo</name>

<js-module src="www/jsplugin.js" name="jsplugin">
<clobbers target="JsPlugin" />
</js-module>

</plugin>

3、编写javascript接口

修改jsplugin.js，加入接口内容

var JsPlugin = function() {};

JsPlugin.prototype.alert = function() {
alert("I am a js plugin");
};

var jsPlugin = new JsPlugin();
module.exports = jsPlugin;

完成之后将整个插件内容push到github准备后续安装。

二、创建ionic项目

创建空白ionic项目进行插件测试。

1、创建空白项目，使用ios模拟机测试

ionic start testPlugin blank
cd testPlugin
ionic platform add ios
ionic build ios
ionic emulate ios

2、安装插件

cordova plugin add https://github.com/lissdy/CordovaPluginJSDemo.git

安装结果：



3、插件调用

<ion-content ng-controller="PluginCtrl">
<button class="button" ng-click="invokeJsPlugin()">Test Plugin</button>
</ion-content>

方法的定义：

.controller('PluginCtrl', function ($scope) {
$scope.invokeJsPlugin = function () {
JsPlugin.alert();
};
})

调用结果如下：



注意：浏览器中调用无效

插件项目地址

Ionic项目地址

Cordova Plugin Guide