cordova开发自定义插件

下面是自定义cordova插件的基本入门，做插件的小白可以参考一下哈，后续会更新插件的进阶博客，希望大家能够共同学习共同进步

1.环境搭建

cordova插件开发前需要安装一些软件和配置环境

1.1 node.js环境搭建

到node.js官网(https://nodejs.org/)下载安装就好，不过访问node.js需要翻墙，在dos窗口输入npm,能显示如下信息就说明node.js安装成功

1.2 cordova和ionic 的安装

在窗口输入下面命令全局安装cordova和ionic

安装cordova (cordova版本建议安装6.3.1)

npm install -g cordova@6.3.1

安装ionic

npm install -g ionic

注：安装cordova和ionic时一次不一定会成功，需要多试几次，如果能翻墙的童鞋们能翻墙就更好了

1.3 android  sdk的下载

到谷歌官网(https://developer.android.com/sdk/index.html)上下载android sdk，然后需配置下面几个环境变量

到此插件的开发环境就搭建好了。

2.创建第一个应用

创建的命令是ionic start CoolApp tabs

3.添加平台

3.1 进入创建的项目目录 

cd CoolApp

3.2 查看已有的平台

cordova platforms list

3.3添加所需要的平台  

cordova platform add android

如果要指定安装android6.0的平台可以这样执行命令：cordova platform add android@6.0

如果想移除已经添加的平台的话 cordova platform remove android 或者cordova platform rm android

注：如果需要看详细的cordova的命令的话可以参考这篇博文http://wenzhixin.net.cn/2014/02/11/cordova_command_line

4.将工程导入androidStudio（在到了studio之前要确保添加了android平台）

第一步：选择Import project(Eclipse ADT,Gradle,etc.)

第二步：找到platform->android下的build.gradle点击ok,等studio编译一段时间就能导入成功了

到此：插件的准备工作就已经做好了

5.插件开发

接下来是插件的具体开发过程

5.1 pluman的安装

npm install -g plugman

5.2 plugman安装完之后就可以创建一个插件了,使用如下面命令

plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version <version> [--path <directory>] [--variableNAME=VALUE]

参数:
pluginName: 插件名字
pluginID: 插件id, egg : coolPlugin 
oversion: 版本, egg : 0.0.1
directory:一个绝对或相对路径的目录，该目录将创建插件项目
variable NAME=VALUE: 额外的描述，如作者信息和相关描述

egg : plugman create --name CoolPlugin --plugin_id coolPlugin --plugin_version 0.0.1 

生成的插件的目录如下：

但是遵循规范的话，一般在src目录下新建android目录，然后在android目录下新建ShowToast.java类(ShowToast.java此时是一个空文件)，如下图

HelloPlugin.js和plugin.xml的解释可以参考http://blog.csdn.net/itcatface/article/details/50520301，这边博文解释的非常详细

其中HelloPlugin.js和plugin.xml的相关配置如下

在命令生成的插件下默认生成plugin.xml和CoolPlugin.js,下面分别打开查看：

a. plugin.xml的配置

打开plugin.xml你会看到如下已经生成的配置

<?xml version='1.0' encoding='utf-8'?>
<plugin id="coolPlugin" version="0.0.1" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
    <name>CoolPlugin</name>
    <js-module name="CoolPlugin" src="www/CoolPlugin.js">
        <clobbers target="cordova.plugins.CoolPlugin" />
    </js-module>
</plugin>

首先解释一下里面的几个参数：

id:  插件的id

version: 插件的版本

name: 插件的名字
clobbers: 这个是js代码调用原生代码的引用

b.CoolPlugin.js的配置

coolPlugin.js稍后再和完整的plugin.xml一起介绍

var exec = require('cordova/exec');

exports.coolMethod = function(arg0, success, error) {
    exec(success, error, "CoolPlugin", "coolMethod", [arg0]);
};

c.完整plugin.xml和CoolPlugin.js

plugin.xml

<?xml version='1.0' encoding='utf-8'?>
<plugin id="coolPlugin" version="0.0.1" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
    <name>CoolPlugin</name>
    <js-module name="CoolPlugin" src="www/CoolPlugin.js">
        <clobbers target="cordova.plugins.CoolPlugin" />
    </js-module>

    <platform name="android">
        <source-file src="src/android/ShowToast.java" target-dir="src/com/hand/toast"/>

        <config-file target="res/xml/config.xml" parent="/*">
            <feature name="ShowToast">
                <param name="android-package" value="com.hand.toast.ShowToast"/>
            </feature>
        </config-file>
    </platform>
</plugin>

CoolPlugin.js

var exec = require('cordova/exec');

exports.toast = function(arg0, success, error) {
    exec(success, error, "ShowToast", "toast", [arg0]);
};

看到plugin.xml在之前的基础上新加了<platform>节点

其中feature对应着CoolPlugin.js中exec(success, error, "ShowToast", "toast", [arg0]);第3个参数，这个两处的参数必须一致，不然插件调用不起来，exports.toast和第4个参数也必须一致，这个是调用原生代码中的方法，后面会讲到。

plugin.xml中的更多信息可以参考http://blog.csdn.net/u013598660/article/details/50065937

6.3插件的安装

我的插件所在的路径是F:\handPlugin\CoolPlugin

首先切换到最初创建的CoolApp目录  cd CoolApp

执行插件安装命令 cordova plugin add F:\handPlugin\CoolPlugin

执行完之后你就发现插件已经安装上去了

如果你想卸载插件的话，执行cordova plugin remove  你的plugin_id

egg:cordova plugin remove  coolPlugin

安装后的在项目中如图所示：

补充ShowToast.java

package com.hand.toast;

import android.widget.Toast;

import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;

public class ShowToast extends CordovaPlugin{
  private CallbackContext mCallbackContext;
  @Override
  public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
    this.mCallbackContext = callbackContext;
    if("toast".equals(action)){
      String msg = args.getString(0);
      Toast.makeText(cordova.getActivity(),msg,Toast.LENGTH_SHORT).show();
      callbackContext.success("success");
      return true;
    }
    mCallbackContext.error("error");
    return false;
  }
}

if（“toast”.equals(action)）中的toast对应中CoolPlugin.js中的exports.toast和exec方法的第4个参数

完成这个类后把完整的类复制到之前的插件中覆盖掉ShowToast.java,这样一个最简单的插件就算是完成了，接下来测试一下我们的成果

6.4插件的使用

    <Button οnclick="cordova.plugins.CoolPlugin.toast('吐司',function(msg){
      alert(msg);
    },function(msg){
      alet(msg);
    })">打印吐司</Button>

可以在assets->templates->的tab-dash.html中添加使用代码：

如下：

<ion-view view-title="Dashboard">
  <ion-content class="padding">
    <Button οnclick="cordova.plugins.CoolPlugin.toast('吐司',function(msg){
      alert(msg);
    },function(msg){
      alet(msg);
    })">打印吐司</Button>
  </ion-content>
</ion-view>

最后附着效果图：

项目源码连接:http://download.csdn.net/detail/cool_fuwei/9722834

插件下载地址：http://download.csdn.net/detail/cool_fuwei/9722847