Phonegap 1.8.1 插件开发

最近因为工作需要在使用Phonegap开发收益应用，在开发过程中需要开发一个自己的插件。
google一通，然后自己尝试写了个demo下面视具体步骤。
以下的步骤是建立在已按照Phonegap的向导创建了工程模版的基础上完成的。

1)在你的www文件夹创建一个新的js文件我们把命名为SharePlugin.js,代码如下：

var SharePlugin = {
    callNativeFunction: function (success, fail, resultType) {
        return Cordova.exec( success, fail, 
                        "com.eunut.SharePlugin", 
                        "nativeFunction", 
                        [resultType]);
    }
};

2)编写对应的本地class，在工程Pludins文件夹下创建名为SharePlugin的Objective-c class。
头文件定义如下：

#import <Cordova/CDV.h>
 
@interface SharePlugin : CDVPlugin
 
- (void) nativeFunction:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options;
 
@end

实现文件如下：

#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代码如下：

<!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,现在你就可以运行你的程序来试试看你自己开发的插件了。
运行成功后你会得到弹出的窗口提示，在控制台也会看到打印的调试信息。

This entry was posted on Wednesday, July 11th, 2012 at am 11:17 by 施常亮 and is filed under 未分类. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Phonegap 1.8.1 插件开发

Leave a Reply Cancel reply