最近因为工作需要在使用Phonegap开发收益应用,在开发过程中需要开发一个自己的插件。
google一通,然后自己尝试写了个demo下面视具体步骤。
以下的步骤是建立在已按照Phonegap的向导创建了工程模版的基础上完成的。
1)在你的www文件夹创建一个新的js文件我们把命名为SharePlugin.js,代码如下:
1 2 3 4 5 6 7 8 | var SharePlugin = { callNativeFunction: function (success, fail, resultType) { return Cordova.exec( success, fail, "com.eunut.SharePlugin", "nativeFunction", [resultType]); } }; |
2)编写对应的本地class,在工程Pludins文件夹下创建名为SharePlugin的Objective-c class。
头文件定义如下:
1 2 3 4 5 6 7 | #import <Cordova/CDV.h> @interface SharePlugin : CDVPlugin - (void) nativeFunction:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options; @end |
实现文件如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | #import "SharePlugin.h" @implementation SharePlugin - (void) nativeFunction:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options { //get the callback id NSString *callbackId = [arguments pop]; NSLog(@"Hello, this is a native function called from PhoneGap/Cordova!"); NSString *resultType = [arguments objectAtIndex:0]; CDVPluginResult *result; if ( [resultType isEqualToString:@"success"] ) { result = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString: @"Success :)"]; [self writeJavascript:[result toSuccessCallbackString:callbackId]]; } else { result = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString: @"Error :("]; [self writeJavascript:[result toErrorCallbackString:callbackId]]; } } @end |
3)创建关联,这个时候基本代码编写案比,但是js如何知道怎样调用这个本地class呢?
这就需要创建js与class的关联。关联定义在Cordova.plist文件中。
在Cordova.plist文件的plugins组下添加新的键值
com.eunut.SharePlugin = SharePlugin
键为你在js中定义的名字;
值为你定义的class名字;
到此你的插件已经开发完毕。
4)测试。编写测试的heml,我暂且命名为demo.html代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE html> <html> <head> <title>phonegap插件开发</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" charset="utf-8" src="js-libs/cordova-1.8.1.js"></script> <script type="text/javascript" charset="utf-8" src="js-libs/SharePlugin.js"></script> <script type="text/javascript"> function callNativePlugin( returnSuccess ) { SharePlugin.callNativeFunction( nativePluginResultHandler, nativePluginErrorHandler, returnSuccess ); } function nativePluginResultHandler (result) { alert("SUCCESS: \r\n"+result ); } function nativePluginErrorHandler (error) { alert("ERROR: \r\n"+error ); } </script> </head> <body onselectstart="return false" onselect="return false"> <!--主界面 --> <div data-role="page" id="subView" data-fullscreen="true"> <div data-role="header" data-theme="b" data-position="fixed"> <a href="#" data-role="button" data-icon="back" data-rel="back">返回</a> <div data-role="controlgroup" data-type="horizontal" align="center" style="padding-top:3px;"> <a href="#" data-role="button" onclick="callNativePlugin('success');">调用成功</a> <a href="#" data-role="button" onclick="callNativePlugin('error');">调用失败</a> </div> <a href="#settingView" data-role="button" data-icon="grid">更多</a> </div> <div id="wrapper"></div> <ul id="nav"></u> </div> </body> </html> |
ok,现在你就可以运行你的程序来试试看你自己开发的插件了。
运行成功后你会得到弹出的窗口提示,在控制台也会看到打印的调试信息。