三、第一枚自主研发插件发射

主要的目的就在这了,我要学习一下怎么写cordova插件,如何调试,如何写config plugin.xml文件。
基础知识储备:写过java的helloworld,运行过eclipse上的android模拟器,js还行。


  • 创建一个应用,用来调用写好的插件
    • 进入工程目录:
      cordova create hello com.example.hello HelloWorld

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

  • 添加平台
    进入创建的项目中:
    cd hello
    添加平台
    cordova platform add android
    查看已经安装的平台和支持的平台:
    cordova platforms list
    移除不想要的平台
    cordova platform remove android

  • 编译项目
    cordova build android

    cordova prepare android cordova compile android
    编译完成后可以看到 platforms/android/bin/ 下已经生成了 apk 文件

  • 测试、运行项目
    查看adb识别的设备
    cordova run --list
    指定设备运行当前程序( 若不指定默认列表第一个设备)
    cordova run android --target=deviceName

  • 一个简单的非native插件(只用到js)(有个软件plugman会更方便,比如会生成plugin.xml)

    • 创建插件目录
      仿照官方明确插件结构
      pluginFolder
      |--src
      |.....|--android
      |...............|--xxx.java
      |.....|--otherPlatform
      |--www
      |.......|--xxx.js
      |--plugin.xml
      这里的 src 对应不同的平台,www 放我们的 javascript 文件,plugin.xml是插件的配置文件。
    • plugin.xml – 配置清单


    
             
             //该插件基于cordova的版本,
            //也可模糊匹配 
          // 
          //  
          ///
             
   test//插件的名称
    Cordova Plugin For A Test//描述信息
Foo plugin author
    Apache 2.0
    cordova,test
    //对应我们的 javascript 文件
        //target:H5通过它作为前缀调用js中间件方法。用于指定module.exports被插入在window对象的命名空间。你可以有很多的clobbers只要你喜欢。创建window上的任何对象不可用
    


//在dependency标签允许你指定在其当前插件依赖其他插件
    
    //支持的平台,这里仅仅用到了 android
//config-file标识一个基于XML的配置文件进行修改,其中在该文件中所述修改应该发生,什么应该进行修改。
        //插件的配置信息,最后会添加到 res/xml/config.xml文件
            //这个name设置必须要和下面这个插件类名相同,哎,这个导致的class not found把工程删了建建了删的搞了好几次才发现
                //package.继承cordovaplugin的类名
            
        
 
         
           
           
         


//config-file 是插入,edit-config在mode="merge"状态下是合并
            


//hook表示将由cordova当某些行为发生时被调用自定义脚本(例如,插件添加或平台准备逻辑后调用)。当你需要扩展默认cordvoa的功能,这非常有用。
        
//并且将我们的 src/android/test.java,复制到 android 的 package 包中。对应定义的包名,也可用拷贝其他文件
///相对于plugin.xml到文件的位置
    

  • xxx.js – 中间件
exports.forTest = function(success,error){//exports用来暴露接口
    var a=123;
    success(a);
};

到这里,一个简单的测试插件就完成了。
若是使用plugman这些步骤就是一句话:

plugman create --name test --plugin_id cordova.plugin.test --plugin_vers ion 1.0.0 --path D:/cordova/
--name 插件名,也是--path下的插件所在文件夹名
--plugin_id 插件id
--plugin_version 版本号
--path 相对路径或绝对路径
  • 一个简单的测试
    • 添加插件到应用
      切到应用目录
      cordova plugin add path/PluginName
      查看应用的plugins目录,添加成功就会有PluginID对应的文件夹。
    • 在应用的js中调用插件
var suc=function(result){alert(result);};
        cordova.plugin.test.forTest(suc);//对应js-module 中的clobbers.暴露接口
  • 运行一下
    cordova run android --target=deviceName
  • 添加native部分
    • xxx.js,中间件部分
var exec = require('cordova/exec');//法克,昨天写的代码那这句搞没了,找了一天才发现。
//所以还是建议这么用  var cordova=require('cordova');
//下面调用时用cordova.exec(success,error,"test","testFun",[]);
var myFunc = function(){};
// arg1:成功回调
// arg2:失败回调
// arg3:将要调用的java类
// arg4:调用的原生方法名
// arg5:参数,json格式
myFunc.prototype.javaShow=function() { 
      exec(success, error, "test", "testFun", [test]);
      //根据plugin.xml的配置,传给 java 类的 action 参数来调用 java 方法
      //exec就是js与java交互的传送门
};
var forOut = new myFunc();
module.exports = forOut;
  • xxx.java,nativa部分
package cordova.plugin.test;
//
import org.apache.cordova.CordovaInterface;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CordovaWebView;
import android.content.Context;
import org.json.JSONArray;
import org.json.JSONException;
//继承 CordovaPlugin 接口
//class name要对应上js
public class test extends CordovaPlugin {
//按需复写 execute 方法
//action:js传来的 action 参数,通过匹配执行相应方法
//args:js传来的参数,以 JSONArray 格式,通过 get 方法获取值
//callbackContext:对应js的succee、error,给其返回结果
    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        try {
            if (action.equals("testFun")) {//执行对应action方法
                callbackContext.success("testFun_OK");//返回成功回调参数
                return true;
            } 
            callbackContext.error("Invalid Action");
            return false;
        } catch (Exception e) {
            System.err.println("Exception: " + e.getMessage());
            callbackContext.error(e.getMessage());
            return false;
        }
    }
} 
  • all done
    暂时还不知道怎么调试,只能改源码一下下再编译了。
    每改一次都要
    cordova plugin rm pluginName --save
    一下,然后再添加回来
    ////////////////////////
    今天看了下好像可以用cordova server portNum这样调试,还没尝试。

如果扩展了插件,在用命令行工具编译时要使用 cordova compile 而不要用 cordova build 命令,因为 cordova build 命令其实是 cordova prepare + cordova compile,而 cordova prepare 命令做的就是根据插件中的 config.xml 将插件文件复制到项目中,这样就会把你修改了的插件文件替换掉,所以如果只是想编译项目,就只使用 cordova compile 命令吧。

你可能感兴趣的:(三、第一枚自主研发插件发射)