Question

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

Answer 1

　　1
　　项目结构组成：
　　src 对应不同的平台，www 放我们的 javascript 文件，plugin.xml 是插件的配置文件。

　　2
　　先来看看配置文件：plugin.xml
　　解释一下关键的几个元素：
　　id: 插件的标识，即一开始我们新建插件输入的 ID，com.lulee007.myEcho
　　name：插件的名称，新建插件时输入的名称，myEcho
　　description：描述信息
　　js-module：对应我们的 javascript 文件，src 属性指向 www/myEcho.js
　　platform：支持的平台，这里仅有一个 android，这是刚才我们通过“ plugman platform add --platform_name android ”添加进来的。
　　其中android下的config-file：
　　这里是android插件的配置信息，当安装到应用时，会添加到目标平台android下的 res/xml/config.xml 文件中，并将 src/android/myEcho.java，复制到 android 的 package 包中。

　　3
　　看下javascript文件：myEcho.js
　　文件内容很简单，第一句是引入cordova下的exec库
　　第二句是我们插件的执行插件方法，
　　exec(success, error, "myEcho", "coolMethod", [arg0]);
　　success:调用成功时的回调函数，
　　error:调用出错时的回调函数，
　　"myEcho"：插件名称，
　　"coolMethod"：执行插件里的方法，
　　[arg0]：可选参数，执行方法的参数数组。
　　这里我们把“exports.coolMethod”改为“window.plugins.myEcho”
　　并在“exports.coolMethod”上面添加一行：
　　window.plugins = window.plugins || {};
　　同样把“coolMethod”也改为“echo”。
　　最终修改后的js文件内容如图：

　　4
　　接着修改myEcho.java文件
　　可以看到myEcho继承自CordovaPlugin，并重载了execute方法。
　　在execute方法里有个判断，action.equals("coolMethod")，这表示如果执行的是我们的方法那就继续执行内部的逻辑并返回true，如果不是则直接返回false结束。
　　这里我们修改下方法：“coolMethod”为“echo”,并把方法coolMethod名称修改为echo。