Question

如何开发Ionic插件

Answer 1

　安装cordova插件管理工具，plugman
　　在终端中输入：
　　npm install -g plugman
　　安装命令与安装结果如下：

　　2
　　新建一个插件myEcho，用弹出框来显示我们的内容。
　　plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version <version> [--path <directory>] [--variable NAME=VALUE]
　　把其中的<pluginName>替换为 myEcho;
　　<pluginID> 替换为 com.lulee007.myEcho
　　<version> 替换为 0.0.1
　　[--path <directory>] [--variable NAME=VALUE] 这两个是可选参数，这里不写了。这样会在当前目录下（desktop）创建一个新的目录myEcho
　　在终端中输入：
　　plugman create --name myEcho --plugin_id com.lulee007.myEcho --plugin_version 0.0.1

　　执行命令后会在当前目录下生成一个文件夹，我这里的目录是在桌面下的myEcho.

　　3
　　向myEcho项目中添加一个android平台
　　plugman platform add --platform_name <platform>
　　把<platform>替换为 android
　　接着在终端中继续输入：
　　cd myEcho
　　然后输入：
　　plugman platform add --platform_name android
　　这时候查看我们的myEcho目录下的 src会新增一个目录android里面会有一个java文件：myEcho.java

　　END
　　插件项目修改配置
　　项目结构组成：
　　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。
　　最终修改后的java文件内容如下：

　　END
　　安装测试插件
　　这里用事先准备好的ionic项目myFirstApp来测试我们的插件。
　　这里不再赘述ionic项目的创建，具体可以参考我的另一篇经验。
　　直接在百度经验里搜索：如何用ionicframework进行混合移动应用开发
　　第一篇就是。

　　打开终端，在终端中输入：
　　cd myFirstApp
　　切换到myFirstApp目录下
　　输入：
　　cordova plugin add ../myEcho
　　显示已经安装myEcho插件到ios和android平台下

　　打开myFirstApp目录，可以看到在plugins目录下多了一个com.lulee007.myEcho目录。

　　打开myFirstApp目录下的www/js/controllers.js
　　添加如下代码到最后“PlaylistCtrl”位置：
　　window.plugins.myEcho("echo my text",
　　function(data){
　　alert(data);
　　},
　　function(error){
　　alert(error);
　　});

　　重新build然后run进行调试：
　　在终端里输入：
　　ionic build android
　　然后输入：
　　ionic run --device android
　　执行命令后结果如下图：

　　这时android设备上已经运行了我们的应用：
　　随便点击list的一个项，会弹出一个对话框，内容是“echo my text”

　　最后如果我们在测试中需要对插件进行更新，这时候只需要执行命令：
　　cordova plugin remove com.lulee007.myEcho
　　这里的“com.lulee007.myEcho”就是我们最开始新建插件的时候的插件ID。
　　重新安装还是这个命令：
　　cordova plugin add path/to/your/plugin/dir
　　把“path/to/your/plugin/dir”替换为自己的插件的目录就好了。