Question

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

Answer 1

方法如下：

一：安装plugman新建插件

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 执行命令后会在当前目录下生成一个文件夹

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

二：插件项目修改配置

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

三：安装测试插件

1.打开终端，在终端中输入：cd myFirstApp切换到myFirstApp目录下

输入：cordova plugin add ../myEcho

显示已经安装myEcho插件到ios和android平台下

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

3.打开myFirstApp目录下的www/js/controllers.js

添加如下代码到最后“PlaylistCtrl”位置：

 window.plugins.myEcho("echo my text",

    function(data){

      alert(data);

    },

    function(error){

      alert(error);

    });

4.重新build然后run进行调试：在终端里输入：ionic build android然后输入：ionic run --device android

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

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

把“path/to/your/plugin/dir”替换为自己的插件的目录就好了