自定义Cordova插件、Ionic插件开发

CordovaPluginsDome

CordovaPluginsDome

自定义Cordova插件

第一步编写JAVA代码

1 命令行新建 项目

例如：

1 cordova create plugins  org.apache.cordova.plugs  plugins

2 cd  plugins

3 cordova platform add android

Cordova 会创建一个带CordovaLib （Library项目） 的 Android 项目，这个就是Cordova的库

文件，插件的开发基于这个Library

2 将项目导入eclispe 得到两个工程，展开工程目录如下：

其中，第一个工程MainActivity-CordovaLib就是我们要用的Library
第二个工程plugins 是一个依赖MainActivity-CordovaLib 的Android 项目

3 编写Android平台的 JAVA代码插件

　　Java 代码可以直接在生成的项目中编写，也可以新创建一个单独的工程，这里我新创建一个Android 工程,目录结构如下：

1 新建ProgressDialogPlugin 类，继承CordovaPlugin

CordovaPlugin 是Cordova 的js桥，必须继承这个类，

2 重写继承自 CordovaPlugin的方法

  @Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext)
    throws JSONException
{

    if (args.getString(0) != null)
    {
        content = args.getString(0);
    }

    if (SHOWPROGRESS.equals(action))
    {

        showProgerss();
        return true;
    }
    else if (CLOSEPROGRESS.equals(action))
    {
        closeProgress();
        return true;
    }
    else
    {
        return false;
    }

}

　　　这里action 参数是指要执行的方法名，
　　　args 是在JS中传递过来的字符品参数数组
　　　showProgerss()和 closeProgress();是我们根据action 要选择执行的方法

private void closeProgress()
{
    if (dialog.isShowing())
    {
        dialog.dismiss();

    }
}

private void showProgerss()
{
    if (dialog==null)
    {
        dialog = ProgressDialog.createDialog(this.cordova.getActivity());
    }

    dialog.setMessage(content);
    if (!dialog.isShowing())
    {
        dialog.show();

    }

}

这里的MainActivity仅时为了测试插件代码，并不打包到插件中去。需要说明的是，一般情况下，插件不要带资源文件，因为资源文件会涉及到R文件的导入问题，在插件使用时，需要使用插件时手动导入R资源

---

第二步 编写js代码

1 用前端编辑工具打开刚才创建的Cordova项目， 我这里是用的WebStorm 目录结构如下：

2 新建文件夹，并相要用到的文件放到相应的文件夹下

3在www 文件夹下新建js 文件

/TODO 导入依赖库
var exec = require('cordova/exec');
var platform = require('cordova/platform');

module.exports = {
// TODO JS 中调用的 js方法，参数列表可根据业务需求定
showdalog: function (message) {

    //TODO 第三个参数为 参数（回调方法,null,类名，方法名，[参数1，参数2，……]）
    exec(null,null, "ProgressDialogPlugin", "show", [message]);

},

closedalog: function () {

    //TODO 第三个参数为 参数（回调方法,null,类名，方法名，[参数1，参数2，……]）
    exec(null,null, "ProgressDialogPlugin", "close", []);

}
}

js 文件必须改入相应的依赖模块，并且重写

 exec(<successFunction>, <failFunction>, <service>, <action>, [<args>])方法

---

第三步配置plugin.xml

Plugin.xml文件是Cordova 识别插件时最重要的文件，会根据这个文件生成Android 项目的源代码，如果这一步出现差错，前面所的有工作将前功尽弃。

参数说明

   Id="org.xiangbalao.progressdialog"  
  插件ID, cordova 将根据 ID生成 plugins 下的目录结构

<name>                      插件名
<description>                   插件描述
<author>                        作者
<keywords>                  关键字
<license>                       许可协议
<engine >                       支持的引擎及版本号
<platform name="android">       android 平台的配置
 <js-module>                    //指定JS路径
 <merges target="xiangbalao" />         这里是在JS中调该插件的前缀

<feature name="ProgressDialogPlugin">     插件名
 <param name="android-package"                  value="org.xiangbalao.progressdialog.ProgressDialogPlugin"/>  插件的完整类路径 </feature>

 Java 本地代码映射，由两部分组成，前面是在插件文件中的路径，后面是将要生成的JAVA源码的包路径名，就是要把这些文件放到哪个目录下
<source-file src="src/android/ProgressDialogPlugin.java"    插件中的目录 target-dir="src/org/xiangbalao/progressdialog"/>     // 将要生成的Android 源码中的存放目录

举例

 <?xml version="1.0" encoding="UTF-8"?>
 <plugin
    xmlns="http://apache.org/cordova/ns/plugins/1.0"
    xmlns:android="http://schemas.android.com/apk/res/android"
    id="org.xiangbalao.progressdialog"
    version="0.1.0">
<!--TODO 域名空间，插件ID,版本号 cordova 将根据 ID生成 plugins 下的目录结构 -->
<name>进度条</name><!--插件名-->
<description>加载动画</description><!--插件描述-->
<author>longtaoge</author><!--作者-->
<keywords>progress</keywords><!--关键字-->
<license>Apache 2.0 License</license><!--许可协议-->
<engines>
    <engine name="cordova" version=">=3.0"/>
    <!--支持的引擎及版本号-->
</engines>
<!-- TODO android 平台的配置-->
<platform name="android">
    <js-module src="www/progrress_dialog.js" name="progrress_dialog">
        <!--TODO  这里是在JS中调该插件的前缀-->
        <merges target="xiangbalao" />
    </js-module>
    <config-file target="res/xml/config.xml" parent="/*">
        <feature name="ProgressDialogPlugin">
            <!--TODO 插件的完整类路径-->
            <param name="android-package" value="org.xiangbalao.progressdialog.ProgressDialogPlugin"/>
        </feature>
    </config-file>
    <!--TODO Java 本地代码映射，由两部分组成，前面是在插件文件中的路径，就是要把这些文件放到哪个目录下 -->
    <source-file src="src/android/ProgressDialogPlugin.java" target-dir="src/org/xiangbalao/progressdialog"/>
    <source-file src="src/android/ProgressDialog.java" target-dir="src/org/xiangbalao/progressdialog"/>
    <source-file src="src/android/pageload_icon1.png" target-dir="res/drawable-hdpi"/>
    <source-file src="src/android/pageload_icon2.png" target-dir="res/drawable-hdpi"/>
    <source-file src="src/android/styles.xml" target-dir="res/values"/>
    <source-file src="src/android/progress_round2.xml" target-dir="res/anim"/>
    <source-file src="src/android/customprogressdialog.xml" target-dir="res/layout"/>
</platform>

第四步发布

1发布到 github

在github 上创建仓库，将 代码提交到git仓库即可

目录结构如下

2发布到本地

新建文件夹，将三部分代码拷贝到要发布的目录即可

目录结构如下

第五步使用

1远程仓库

1 cordova plugin add  https://github.com/longtaoge/CodovaProgressDialog.git

这里 https://github.com/longtaoge/CodovaProgressDialog.git 是仓库地址
2 如果插件用到了资源文件 将 import org.apache.cordova.plugs.R; 
  修改为 AndroidManifest.xml 中的 package="xx.xxx.xxxxxx.xxx" 包名   例如 package="org.apache.cordova.plugs" 
  则改为 import  org.apache.cordova.plugs.R;3 方法调用，例如：  xiangbalao.showdalog("正在加载数据...");    //打开进度条
  xiangbalao.closedalog();     //关闭进度条

这里的  xiangbalao 前缀是指在plugin.xml中配置的参数   方法名是 js文件中提供的方法
<js-module   src="www/progrress_dialog.js" name="progrress_dialog">
         <merges target="xiangbalao" />   这里是在JS中调该插件的前缀
 </js-module>

2本地仓库

cordova plugin add  F:\my_plugindir    //这里是指插件本地路径

使用方法同上.

示例项目源码地址：

https://github.com/longtaoge/CordovaPluginsDome/tree/master

示例使用方法

1 cordova plugin add  https://github.com/longtaoge/CodovaProgressDialog.git

2 将 import org.apache.cordova.plugs.R; 
   修改为 AndroidManifest.xml 中的 package="xx.xxx.xxxxxx.xxx" 包名
   例如 package="org.apache.cordova.plugs" 则改为 import  org.apache.cordova.plugs.R;

3 提供的方法
  xiangbalao.showdalog("正在加载数据...");    //打开进度条
  xiangbalao.closedalog();     //关闭进度条