主要的目的就在这了，我要学习一下怎么写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 – 配置清单
- 创建插件目录
<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
xmlns:rim="http://www.blackberry.com/ns/widgets"
xmlns:android="http://schemas.android.com/apk/res/android"
id="cordova-plugin-test"//插件的标识，即发布到 plugins.cordova.io的ID，
//(cordova plugin remove id)(在wex5中使用前要把工程文件夹名改为这个id)
version="1.0.0">
<engines>
<engine name="cordova-android" version="=1.8.0" />
//该插件基于cordova的版本，
//也可模糊匹配<engine name="cordova-android" version=">=1.8.0" />
// <engine name="cordova" version=">=1.7.0" />
// <engine name="cordova-android" version=">=1.8.0" />
///<engine name="cordova-ios" version=">=1.7.1" />
</engines>
<name>test</name>//插件的名称
<description>Cordova Plugin For A Test</description>//描述信息
<author>Foo plugin author</author>
<license>Apache 2.0</license>
<keywords>cordova,test</keywords>
<js-module src="www/test.js" name="test">//对应我们的 javascript 文件
<clobbers target="cordova.plugin.test" />//target：H5通过它作为前缀调用js中间件方法。用于指定module.exports被插入在window对象的命名空间。你可以有很多的clobbers只要你喜欢。创建window上的任何对象不可用
</js-module>
<dependency id="cordova-plugin-someplugin" url="https://github.com/myuser/someplugin" commit="428931ada3891801" subdir="some/path/here" />
<dependency id="cordova-plugin-someplugin" version="1.0.1">
//在dependency标签允许你指定在其当前插件依赖其他插件
<!-- android -->
<platform name="android">//支持的平台，这里仅仅用到了 android
//config-file标识一个基于XML的配置文件进行修改，其中在该文件中所述修改应该发生，什么应该进行修改。
<config-file target="res/xml/config.xml" parent="/*">//插件的配置信息，最后会添加到 res/xml/config.xml文件
<feature name="test" >//这个name设置必须要和下面这个插件类名相同，哎，这个导致的class not found把工程删了建建了删的搞了好几次才发现
<param name="android-package" value="cordova.plugin.test.test"/>//package.继承cordovaplugin的类名
</feature>
</config-file>
<config-file target="AndroidManifest.xml" parent="/manifest/application">
<activity android:name="com.foo.Foo" android:label="@string/app_name">
<intent-filter>
</intent-filter>
</activity>
</config-file>
<edit-config file="AndroidManifest.xml" target="/manifest/application" mode="merge">
//config-file 是插入，edit-config在mode="merge"状态下是合并
<application android:theme="@android:style/Theme.NoTitleBar.Fullscreen"></application>
</edit-config>
<hook type="after_plugin_install" src="scripts/afterPluginInstall.js" />
//hook表示将由cordova当某些行为发生时被调用自定义脚本（例如，插件添加或平台准备逻辑后调用）。当你需要扩展默认cordvoa的功能，这非常有用。
<source-file src="src/android/test.java" target-dir="src/cordova/plugin/test/dtest" />
//并且将我们的 src/android/test.java，复制到 android 的 package 包中。对应定义的包名，也可用拷贝其他文件
///相对于plugin.xml到文件的位置
</platform>
</plugin>
- 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 命令吧。
网友评论