其实此文章只是总结。
主要我总结了一下博客中cordova插件开发的方法。
首先参考的文章如下,
csdn的一个博客:http://blog.csdn.net/aaawqqq/article/details/20401111/
他有很多phonegap的博客,对我有了很大的帮助,很感谢。
文翼的博客:http://www.wenzhixin.net.cn/2014/03/20/cordova_my_plugin
cordova官网:http://cordova.apache.org/docs/en/latest/cordova-plugin-camera/index.html#module_camera.getPicture
本博客主要分为3个部分,1.插件的布置 2.插件的修改 3,phoengap原理
喜欢看了解原理后者看不懂的可以先看第三个。
1.插件布置
建立一个文件夹结构如下
<?xml version="1.0" encoding="utf-8"?>
<plugin id="cn.net.wenzhixin.cordova" version="0.0.1"
xmlns="http://apache.org/cordova/ns/plugins/1.0"
xmlns:android="http://schemas.android.com/apk/res/android">
<name>ExtraInfo</name>
<description>Description</description>
<js-module name="ExtraInfo" src="www/extInfo.js">
<clobbers target="cordova.plugins.ExtraInfo"/>
</js-module>
<platform name="android">
<config-file parent="/*" target="res/xml/config.xml">
<feature name="ExtraInfo">
<param name="android-package" value="cn.net.wenzhixin.cordova.ExtraInfo"/>
</feature>
</config-file>
<source-file src="src/android/ExtraInfo.java" target-dir="src/cn/net/ldh/cordova"/>
</platform>
</plugin>
- id: 插件的标识,即发布到 plugins.cordova.io 的 ID
- name:插件的名称
- description:描述信息
- js-module:对应我们的 javascript 文件,
src
属性指向www/ExtraInfo.js
- platform:支持的平台,这里仅仅用到了 android
<source-file src="src/android/ExtraInfo.java" target-dir="src/cn/net/ldh/cordova"/>
这行代码。制定了你的文件是那个,后面是在新项目中的位置。
<config-file parent="/*" target="res/xml/config.xml">
<feature name="ExtraInfo">
<param name="android-package" value="cn.net.wenzhixin.cordova.ExtraInfo"/>
</feature>
</config-file>
<source-file src="src/android/ExtraInfo.java" target-dir="src/cn/net/wenzhixin/cordova"/>
这是项目中的配置文件。导入插件后就会变成这样。在原理的时候回带一下。
下面就是最重要的导入插件指令了:
cordova plugin add ExtraInfo#目录名称,也可以是 git 的地址
注意:这是在你进入项目文件夹后输入的指令。ExtraInfo 是地址
java文件
需要继承于 CordovaPlugin 类
覆盖Execute方法
public class ExtraInfo extends CordovaPlugin{
@Override
public boolean execute(String action, JSONArray args,
CallbackContext callbackContext) throws JSONException {
System.out.println("action==========>"+action);
//action 是传进来的让你调用的方法名称 ,一会看js文件就明白了
System.out.println("args==========>"+args);
//进来的json类型参数
callbackContext.success("success");
//回调方法
return false;
}
}
js文件
cordova.define("cn.net.ldh.cordova.ExtraInfo", function(require, exports, module) {
var exec = require('cordova/exec');
module.exports = {
/**
* 一共5个参数
第一个 :成功会掉
第二个 :失败回调
第三个 :将要调用的类的配置名字(在config.xml中配置 上文配置文件中的名称)
第四个 :调用的方法名(一个类里可能有多个方法 靠这个参数区分)
第五个 :传递的参数 以json的格式
*/
demo: function(mills) {
exec(function(winParam){
alert(winParam);
}, function(winParam){
alert("error"+winParam);
}, "ExtraInfo", "execute", [mills]);
},
};
});
以上就是:插件的开发过程。
说一下调用方法:
<script>
document.addEventListener('deviceready', function() {
alert("come in ");
navigator.ExtraInfo.demo("ldh is good");
});
</script>
这里可以参照其他phonegap 插件的用法2.插件修改
在插件安装完成后,
这里面你可以打开cordova_plugin.js
cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
{
"file": "plugins/cordova-plugin-network-information/www/network.js",
"id": "cordova-plugin-network-information.network",
"clobbers": [
"navigator.connection",
"navigator.network.connection"
]
},
{
"file": "plugins/cordova-plugin-network-information/www/Connection.js",
"id": "cordova-plugin-network-information.Connection",
"clobbers": [
"Connection"
]
},
{
"file": "plugins/cordova-plugin-camera/www/CameraConstants.js",
"id": "cordova-plugin-camera.Camera",
"clobbers": [
"Camera"
]
},
{
"file": "plugins/cordova-plugin-camera/www/CameraPopoverOptions.js",
"id": "cordova-plugin-camera.CameraPopoverOptions",
"clobbers": [
"CameraPopoverOptions"
]
},
{
"file": "plugins/cordova-plugin-camera/www/Camera.js",
"id": "cordova-plugin-camera.camera",
"clobbers": [
"navigator.camera"
]
},
{
"file": "plugins/cordova-plugin-camera/www/CameraPopoverHandle.js",
"id": "cordova-plugin-camera.CameraPopoverHandle",
"clobbers": [
"CameraPopoverHandle"
]
},
{
"file": "plugins/cn.net.ldh.cordova/www/ExtraInfo.js",
"id": "cn.net.ldh.cordova.ExtraInfo",
"clobbers": [
"navigator.ExtraInfo"
]
}
];
module.exports.metadata =
// TOP OF METADATA
{
"cordova-plugin-network-information": "1.2.0",
"cordova-plugin-camera": "2.1.0",
"cn.net.ldh.cordova": "0.0.1"
};
// BOTTOM OF METADATA
});
这里面:id唯一即可;
file 是js 的文件目录
clobbers 是访问名称 (node.js那种,请参照其他phoengap用法)
下面的版本随便写就行
理解了这个,你就可以在clobbers中进行修改了。
3.原理
这里以andorid为例。每个app都有一个Activity。cordova中都会继承自CordovaActivity。这里会进行日志,等等调用,这里不是重要内容就不一一讲解了。同时继承了cordovaActivity 后你会使用这句 loadUrl(launchUrl); 来调用 index.html
这里在cordovaPlugin 中会有一个 HashMap此hashMap 会装在所有已注册的plugin信息
在CordovaActivity的变化中会解析AndoidMainfest.xml 前文你可以看到注册进去的配置信息。讲配置信息解析后放入到cordovaPlugin的HashMap中。
以上初始化就完成了
剩下就是js 与java通信问题
其实android提供了js与java的通信
不懂的可以看这篇文章 http://www.cnblogs.com/greatverve/archive/2012/01/18/android-javascript.html
Ok回到cordova中。有了通信。cordova.js中封装了一个这样的对象
var exec = require('cordova/exec');
有了这个对象后,调用execgetExtra就可以了。cordova会进行实例化NativeToJsMessageQueue这个类,再通过CordovaBridge 进行转化,就可以调用javaHashMap中指定的Plugin 然后调用execute的这个方法,传入回调函数,就完成了。
以上就是cordova的原理。
总结一下,其实就是android的 webView 对象加载了一个页面。 在调用android中的js 与java的通信,进行 插件封装。 web前端开发人员不用懂android就懂js实现了开发。