cordova开发自定义插件

cordova开发自定义插件

由于最近工作需要，需要一个自定义插件，本人研究了很久终于做出一个最简单的插件，是基于android平台来开发的，虽然写博客很花时间，但是为了以后再次查看复习能很好的提供参考，也是值了，废话就不多说，直接进入主题。

1.环境搭建

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

1.1 node.js环境搭建

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

1.2 cordova 的安装

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

npm install -g cordova

1.3 android sdk的下载

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

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

2.创建第一个应用

创建的命令是cordova create

列如：

• 第一个参数hello表示在工程目录中创建一个 hello 的文件夹
• 第二个参数com.cool.hello表示包名（反向域名），用于标志不同的 app
• 第三个参数HelloWorld表示项目的名称，可以在 config.xml 文件中修改

   

   

  3.添加平台

  3.1 进入创建的项目目录

  cd hello

  3.2查看已有的平台

   

  cordova platforms list

  3.3添加所需要的平台

  cordova platform add android

   

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

   

  4.编译项目

  编译项目命令

  cordova build android

  5.运行项目

  cordova run android

  注：生成的项目可以导入到eclipse中，导入之后如下图

  

  6.插件开发

  前面说了这么多全都是准备工作，接下来是插件的具体开发过程

  6.1 pluman的安装

  npm install -g plugman

  6.2 plugman安装完之后就可以创建一个插件了cordova plugin

  plugman create --name --plugin_id --plugin_version [--path ] [--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目录下新建类，如下图

   

  </div>
  

   

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

   

  a.plugin.xml的配置

   

  
      CoolPlugin
      
          
      
      
      
          
              
              
          
  
  
          
  
  
            
                
           
          
      
          
          
  
  
          
  
  
          
      
  

  
  
  

   

   

   

  
  
  

   

   

  b.HelloPlugin.js的配置

   

   

  var exec = require('cordova/exec');
  var myFunc = function(){};
  
  
  // arg1：成功回调
  // arg2：失败回调
  // arg3：将要调用类配置的标识
  // arg4：调用的原生方法名
  // arg5：参数，json格式
  myFunc.prototype.showToast=function(success, error) {
      exec(success, error, "CoolToast", "showToast", []);
  };
  
  
  myFunc.prototype.showshowToast=function(text, lenth,success, error) {
      exec(success, error, "CoolToast", "showshowToast", [text, lenth]);
  };
  myFunc.prototype.openActivity=function() {
      exec(null, null, "CoolToast", "openActivity", []);
  };
  var showt = new myFunc();
  module.exports = showt;

  
  
  

   

   

  c最后还有一个java类

  里面的哪个TestActivity这个类是我测试用的，这里忽悠就好

   

   

  package com.cool.toast;
  
  import org.apache.cordova.CallbackContext;
  import org.apache.cordova.CordovaPlugin;
  import org.json.JSONArray;
  import org.json.JSONException;
  import com.example.hello.TestActivity;
  import android.content.Intent;
  import android.widget.Toast;
  
  public class ShowToast extends CordovaPlugin {
  
  @Override
  public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
  // TODO Auto-generated method stub
  if("showToast".equals(action)){
  Toast.makeText(cordova.getActivity(), "show...", Toast.LENGTH_SHORT).show();
  callbackContext.success("success");
  return true;
  }else if("showshowToast".equals(action)){
  String str = args.getString(0);
  int len = args.getInt(1);
  
  if(len == 0){
  Toast.makeText(cordova.getActivity(), str, Toast.LENGTH_SHORT).show();
  callbackContext.success("success" + str);
  return true;
  }else{
  Toast.makeText(cordova.getActivity(), str, Toast.LENGTH_LONG).show();
  callbackContext.success("success" + str);
  return true;
  }
  }else if("openActivity".equals(action)){
  openActivity();
  callbackContext.success("success");
  return true;
  }
   callbackContext.error("error");
          return false; 
  }
  
  private void openActivity() {
  Intent intent = new Intent(cordova.getActivity(),TestActivity.class);
  cordova.getActivity().startActivity(intent);
  }
  
  }

   

  6.3插件的安装

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

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

  执行插件安装命令cordova plugin addF:\CoolPlugin

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

   

  6.4插件的使用

   

   

  cool.toast.showToast();
    cool.toast.showshowToast("hello",0, function(msg) {
                  alert(msg);
              }, function(msg) {
                  alert(msg);
              });
  
  cool.toast.openActivity();

  
  

   

  在F:\hello\platforms\