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.将project导入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 onclick="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 onclick="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