如何为ionic webapp开发自定义插件

myAPI.func1 = function(arg0, success, error) {

exec(success, error, "MyPlugin", "func1", [arg0])

}

myAPI.func2 = function(arg0, arg1, success, error) {

exec(success, error, "MyPlugin", "func2", [arg0,arg1])

}

myAPI.func3 = function(success, error) {

exec(success, error, "MyPlugin", "func3",[])

}

1. Cordova Plugin基础

1.1. 目录结构层次

IONIC下的插件都是遵循CORDOVA插件([BIBAPACHECORDOVA])规范，同时提供与CORDOVA类似的PLUGIN子命令来管理插件(IONIC PLUGIN XXX)。

下面是插件管理命令中的添加、删除及列举等基本使用方法：

$ ionic plugin list

cordova-plugin-camera 1.2.0 "Camera"

cordova-plugin-console 1.0.1 "Console"

cordova-plugin-device 1.0.1 "Device"

cordova-plugin-splashscreen 2.1.0 "Splashscreen"

cordova-plugin-statusbar 1.0.1 "StatusBar"

一、编写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

---