Cordova 3.x 基础（12） -- Plugin开发

阅读更多

Cordova提供的功能能够满足一般应用，但是对于复杂的应用或者对性能要求比较严格的应用来说，并不是很理想的。所以就需要在某些场景下自己写代码来弥补这些不足，类似Titanium Module一样，Cordova也提供了Plugin功能。Cordova本身访问Native接口都是通过Plugin的方式提供的，可以参考官方Plugin代码，而且GitHub上也存在不少开源的Cordova Plugin，所以这些都是最好的教程。

Plugin的分类大概有两种：

• JavaScript-only Plugin：不需要写Native代码，不依赖平台的共通的JS代码
• Native Plugin：弥补Cordova提供的功能以外的Native调用，依赖各个平台写不同的Native代码

（1）Plugin构成

引用

|- plugin.xml
|- www
|   +- hello_world.js
+- src
    |- android
    |     +- com/rensanning/cordova/plugin/HelloWorldPlugin.java
    +- ios
        |- HelloWorldPlugin.h
        +- HelloWorldPlugin.m

plugin.xml ： 必须。通知CLI哪个平台应该从什么地方Copy哪些文件到什么地方，以及CLI在生成config.xml时应该根据平台加入什么样的特殊设置。
JavaScript文件 : 必须。一个Plugin至少应该有一个JS文件，也可以引入其他的lib（比如：handlebars.js），定义为js-module，会被cordova.js会自动读入。
原生代码 ：可选。
静态文件 ： 可选。HTML、图像等

其中plugin.xml文件配置如下：

    Device
    Cordova Device Plugin
    Apache 2.0
    cordova,device
    https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
    https://issues.apache.org/jira/browse/CB/component/12320648

    
        
    

    
    
        
            
                
            
        

        
    

    

plugin -- 命名空间、ID、版本
name -- 名称
description -- 描述
keywords -- 关键字
engines -- Cordova版本
js-module -- js文件地址，会被默认加载到首页面（index.html），通过clobbers元素的定义把就是的module.exports自定赋给window对象。
platform -- 各个平台设置

（2）创建JS Plugin
文件夹结构：

引用

sample
│  plugin.xml
│
└─www
        hello_world.js

plugin.xml：

    HelloWorldPlugin
    HelloWorldPlugin Description
    rensanning
    Apache 2.0 License
    
        
    
    
        
    

hello_world.js：

var HelloWorld = function() {};

HelloWorld.prototype.say = function() {
    alert("Hello World");
};

var helloWorld = new HelloWorld();
module.exports = helloWorld;

创建工程测试Plugin：

引用

cordova create simplePlugin com.rensanning.cordova.simplePlugin SimplePlugin
cd simplePlugin
cordova platform add android
cordova plugin add E:\plugins\sample

修改index.html后启动测试即可。

Click me!

（3）创建Native Plugin
以Android下获取Carrier Code为例。
文件夹结构：

引用

carrier
│  plugin.xml
│
├─src
│  └─android
│          CarrierPlugin.java
│
└─www
        carrier.js

plugin.xml：

    CarrierPlugin
    CarrierPlugin Description
    rensanning
    Apache 2.0 License
    
        
    
    
        
    
    
        
        
            
                
            
        
        
            
        
    

CarrierPlugin.java：

public class CarrierPlugin extends CordovaPlugin {
	public static final String TAG = "CarrierPlugin";
	public static final String ACTION_GET_CARRIER_CODE = "getCarrierCode";
	public TelephonyManager tm;

	public void initialize(CordovaInterface cordova, CordovaWebView webView) {
		super.initialize(cordova, webView);
		Context context = this.cordova.getActivity().getApplicationContext();
		tm = (TelephonyManager) context.getSystemService(Context.TELEPHONY_SERVICE);
	}

	@Override
	public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
		if (ACTION_GET_CARRIER_CODE.equals(action)) {
			String carrier = tm.getSimCountryIso();
			Log.d(TAG, carrier);
			callbackContext.success(carrier);
			return true;
		}
		return true;
	}
}

carrier.js：

var cordova = require('cordova');

var Carrier = function() {};

Carrier.prototype.getCarrierCode = function(success, error) {
    cordova.exec(success, error, 'CarrierPlugin', 'getCarrierCode', []);
};

var carrier = new Carrier();
module.exports = carrier;

修改index.html后启动测试即可。

Carrier Code!

***Cordova device APIs从Cordova 3.0开始全Plugin的机制稍有变化，默认都不可用，需要什么添加什么：

Plugin的添加和删除也同时提供两种方式： Cordova CLI、Plugman。
但是不同的是Plugman一次只能为一个platform添加Plugin，而Cordova CLI是为所有平台都添加Plugin。
Cordova CLI内部实际上也是调用的Plugman。

安装plugman

引用

npm install plugman -g
plugman -v
plugman help

添加Plugin

引用

plugman --platform android --project --plugin [--plugins_dir ] [--www ] [--variable =]

删除Plugin

引用

plugman --uninstall --platform android --project --plugin [--www ] [--plugins_dir ]

详细参考： https://github.com/apache/cordova-plugman/
Cordova Plugin Registry有以下两个： http://plugins.cordova.io/、 http://plugreg.com/plugins

***Plugin的js中直接写代码即可，CLI会包装你的代码：
比如：

cordova.define("com.rensanning.cordova.helloworld.helloworld", function(require, exports, module) { var HelloWorld = function() {};

HelloWorld.prototype.say = function() {
    alert("Hello World");
};

var helloWorld = new HelloWorld();
module.exports = helloWorld;
});

参考：
Plugin Development Guide
Plugin Specification（plugin.xml）

• 
• 大小: 17.1 KB

• 
• 大小: 16.8 KB

• 
• 大小: 20.8 KB

• SimplePlugin-debug-unaligned.rar (207.7 KB)
• 下载次数: 242

• plugins.rar (2.2 KB)
• 下载次数: 314

• 查看图片附件