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{
	@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實現了開發。