首先需要创建一个plugin.xml,可以参考下面的模板,我做了详细的注释:
<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
id="org.apache.cordova.device" version="0.2.3">
<name>Device</name>
<description>Cordova Device Plugin</description>
<license>Apache 2.0</license>
<keywords>cordova,device</keywords>
<!--需要引入的JS文件-->
<js-module src="www/device.js" name="device">
<!--模块名称,requireJS使用-->
<clobbers target="device" />
</js-module>
<!-- android -->
<platform name="android">
<!--需要引入到config.xml的内容-->
<config-file target="res/xml/config.xml" parent="/*">
<!--name表示Service名称,JS接口中将调用-->
<feature name="JToast">
<!--上面的Service名称对应的Java Class-->
<param name="android-package" value="com.jiusem.plugins.window.JToast"/>
<!--App启动时加载插件-->
<param name="onload" value="true" />
</feature>
</config-file>
<!--需要引入到AndroidManifest.xml中的内容,一般是开启一些权限-->
<config-file target="AndroidManifest.xml" parent="/*">
</config-file>
<!--java文件路径-->
<source-file src="src/android/JToast.java" />
</platform>
<!--iOS-->
<platform name="ios">
<!--需要插入到config.xml中的内容-->
<config-file target="config.xml" parent="/*">
<!--Sevice名称-->
<feature name="Device">
<!--Service名称对应的Objective-C Class-->
<param name="ios-package" value="CDVDevice"/>
</feature>
</config-file>
<!--iOS中需要引入的源文件-->
<header-file src="src/ios/CDVDevice.h" />
<source-file src="src/ios/CDVDevice.m" />
</platform>
</plugin>
接下来可以编写JS接口了:
<script>
//JS文件写法示例
var JToast = {
show: function(txt, success, error) {
//该方法将调用JToast Service下的show action,并传递txt参数
cordova.exec(success, error, "JToast", "show", [txt]);
}
}
module.exports = JToast;
</script>
//cordova.exec方法详解
cordova.exec(function(winParam) {
//调用成功的回调
},
function(error){
//调用失败的回调
},
"service", //服务名
"action", //方法名
["firstArgument", "secondArgument", 42, false]);//以数组形式传递的参数
下面可以开始编写原生代码了,首先介绍Android部分
一个Android插件至少需要编写一个Java类继承CordovaPlugin类,并重写execute方法
插件是在第一次被调用时初始化,当然也可以配置在App启动时初始化,请参考上面的plugin.xml内容
package com.jiusem.plugins.window.JToast;
public class JToast extends CordovaPlugin{
@Override
public void initialize(CordovaInterface cordova, CordovaWebView webView) {
super.initialize(cordova, webView);
//初始化的业务逻辑,如果有的话,比如可以完成一些服务的注册
}
@Override
//所有的JS调用都会由该方法进行处理
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
if ("beep".equals(action)) {
this.beep(args.getLong(0));
callbackContext.success();//执行成功回调,该方法是用户在JS调用时传入
return true; //记得返回值
}
return false; // Returning false results in a "MethodNotFound" error.
}
}
//在插件内获取当前Activity
Activity main = this.cordova.getActivity();
//文档内说该方法和上面的功能相同
Activity main = this.cordova.getContext();
插件并不会运行在webview的线程内,当然也可以实现让插件运行在webview的线程内
现阶段应该涉及不到这么深的内容,可以参考文档。
下面介绍iOS下原生代码的实现
一般来说,至少需要编写一个类继承自CDVPlugin并重写
同样在第一次调用时被初始化,也可以通过配置实现App启动时初始化
需要注意的是iOS下的WebView,标准名称为UIWebView
请看下面的代码示例
值得注意的是,iOS中没有类似于Android插件中的execute方法,方法是直接被调用的
如果需要在插件初始化时执行一些代码,可以重写pluginInitialize方法,
具体可以参见CDVPlugin.h与CDVPlugin.m的源代码
/********* Echo.h Cordova Plugin Header *******/
#import <Cordova/CDV.h>
@interface Echo : CDVPlugin
- (void)echo:(CDVInvokedUrlCommand*)command;
@end
/********* Echo.m Cordova Plugin Implementation *******/
#import "Echo.h"
#import <Cordova/CDV.h>
@implementation Echo
- (void)echo:(CDVInvokedUrlCommand*)command
{
CDVPluginResult* pluginResult = nil;
NSString* echo = [command.arguments objectAtIndex:0];
if (echo != nil && [echo length] > 0) {
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:echo];
} else {
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR];
}
[self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
}
@end
后者是实现文件。
好了,就介绍到这里,了解了这些内容,再去找一个现成的插件(越简单越好~),模仿着就可以编写自己的插件了。