cordova插件开发

其实此文章只是总结。

主要我总结了一下博客中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{@Overridepublic 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实现了开发。