在Cordova項目的開發(fā)過程中智厌，一些功能通過Web端的技術(shù)很難/無法實現(xiàn)挡篓，此時需要借助Cordova插件來調(diào)用Native代碼實現(xiàn)偎蘸。Cordova為我們提供了豐富的插件庫篡殷，實現(xiàn)了諸如獲取設(shè)備信息，獲取通訊錄藻治，設(shè)置設(shè)備狀態(tài)欄等基本功能碘勉。但有時我們?nèi)孕鑼崿F(xiàn)自定義的插件以滿足項目需要，下面以iOS為例介紹其開發(fā)過程桩卵。
1. 創(chuàng)建Git倉庫管理插件
在Github或是其他Git服務(wù)器上創(chuàng)建一個倉庫：
https://github.com/easyfisher/easter-plugin-demo.git
2. 插件定義
在根目錄下添加plugin.xml以定義一個插件验靡。其中id是插件的唯一標識，安裝插件時如果項目中有相同id的會被覆蓋雏节。
<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://easter.com/mobile/plugins/1.0"
id="easter-plugin-demo" version="1.0.0">
<name>Demo</name>
<description>Easter Plugin Demo</description>
<license>Easter</license>
<keywords>easter,demo</keywords>
</plugin>
3. JS接口實現(xiàn)
在plugin.xml中增加接口定義胜嗓。下面js-module中的內(nèi)容將www/Demo.js中實現(xiàn)的module導出為可全局訪問的變量easter.demoPlugin。
<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://easter.com/mobile/plugins/1.0"
id="easter-plugin-demo" version="1.0.0">
<name>Demo</name>
<description>Easter Plugin Demo</description>
<license>Easter</license>
<keywords>easter,demo</keywords>
<js-module src="www/Demo.js" name="Demo">
<clobbers target="easter.demoPlugin" />
</js-module>
</plugin>
接下來我們實現(xiàn)www/Demo.js钩乍。其中提供了greeting方法用于向Native代碼傳遞消息辞州。
var exec = require('cordova/exec');
var Demo = {};
Demo.greet = function(message, success, failure) {
exec(success, failure, "Demo", "greet", [message]);
}
module.exports = Demo;
4.Native代碼實現(xiàn)
在plugin.xml中添加Native相關(guān)配置。其中feature定義了ESDemo類作為消息入口寥粹。
<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://easter.com/mobile/plugins/1.0"
id="easter-plugin-demo" version="1.0.0">
<name>Demo</name>
<description>Easter Plugin Demo</description>
<license>Easter</license>
<keywords>easter,demo</keywords>
<js-module src="www/Demo.js" name="Demo">
<clobbers target="easter.demoPlugin" />
</js-module>
<platform name="ios">
<config-file target="config.xml" parent="/*">
<feature name="Demo">
<param name="ios-package" value="ESDemo"/>
</feature>
</config-file>
<header-file src="src/ios/ESDemo.h" />
<source-file src="src/ios/ESDemo.m" />
</platform>
</plugin>
下面實現(xiàn)ESDemo類变过。greet方法接收JS端傳來的greet消息并在屏幕上顯示一個提示框。至此我們就可以調(diào)用其他的本地代碼以實現(xiàn)項目需要涝涤。
ESDemo.h
#import <Cordova/CDVPlugin.h>
@interface ESDemo : CDVPlugin
- (void)greet:(CDVInvokedUrlCommand*)command;
@end
ESDemo.m
#import "ESDemo.h"
#import <Cordova/CDVPlugin.h>
@implementation ESDemo
- (void)greet:(CDVInvokedUrlCommand*)command {
NSString *message = command.arguments[0];
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"" message:message preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:nil];
[alertController addAction:okAction];
UIViewController *rootController = [UIApplication sharedApplication].delegate.window.rootViewController;
[rootController presentViewController:alertController animated:YES completion:nil];
}
@end
5. 插件的安裝與調(diào)試
在Cordova項目目錄下運行以下命令來安裝插件媚狰。安裝后就可以在全局調(diào)用easter.demoPlugin('message')來使用了。
$ cordova plugin add https://github.com/easyfisher/easter-plugin-demo.git
參考文章
Plugin Development Guide
iOS Plugin Development Guide
Android Plugin Development Guide
