服务购

　　如何为ionic webapp开发自定义插件？应该怎么做？下面就让小编告诉你具体怎么操作吧：

　　1

　　安装cordova插件管理工具，plugman

　　在终端中输入：

　　npm install -g plugman

　　安装命令与安装结果如下：

　　2

　　新建一个插件myEcho，用弹出框来显示我们的内容。

　　plugman create --name --plugin_id --plugin_version [--path ] [--variable NAME=VALUE]

　　把其中的替换为 myEcho;

　　 替换为 com.lulee007.myEcho

　　 替换为 0.0.1

　　[--path ] [--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

　　把替换为 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”替换为自己的插件的目录就好了。

　　上面就是小编为大家整理的关于如何为ionic webapp开发自定义插件的文章，希望对大家有帮助。在实际的操作过程中大家可以根据实际情况进行灵活的调整。了解更多咨询请关注猪八戒网。