`

写一个phonegap插件

阅读更多

我的博客网站:http://www.zeromike.net

本文地址:http://www.zeromike.net/?p=58

 

在使用phonegap或者说叫cordova进行hybrid开发的时候,肯定需要和原生代码进行交互,因此需要开发一个插件来完成两者之间的交互,下面我给出示意性代码。将建好的cordova项目导入eclipse中,我下一篇会写如何建立cordova项目。

 

插件开发链接:http://docs.phonegap.com/en/3.5.0/guide_hybrid_plugins_index.md.html#Plugin%20Development%20Guide

 

         Warning:中文文档千万别看,还是繁体,编程用词和大陆相差比较大,貌似是台湾翻译的吧,看了变SB了。。。

 

         需求:在客户端点击一个按钮,将一个字符串信息传到原生代码并通过回调方法显示出来。

 

   1.在src目录中建立插件类

        

package com.mike;

import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;

public class MyPlugin extends CordovaPlugin {
	@Override
	public boolean execute(String action, JSONArray args,
			CallbackContext callbackContext) throws JSONException {
		if (action.equals("echo")) {
			String message = args.getString(0);
			this.echo(message, callbackContext);
			return true;
		}
		return false;
	}

	private void echo(String message, CallbackContext callbackContext) {
		if (message != null && message.length() > 0) {
			callbackContext.success(message);
		} else {
			callbackContext.error("Expected one non-empty string argument.");
		}
	}
}

 

   2.在res/confg.xml文件中加入

    

    <feature name="App">
        <param name="android-package" value="org.apache.cordova.App" />
    </feature> 
   	<!-- 设备 -->
    <feature name="Device" >
        <param  name="android-package" value="org.apache.cordova.device.Device" />
    </feature>
   	<!-- 添加自定义插件 -->
    <feature name="MyPlugin" >
        <param name="android-package" value="com.mike.MyPlugin"/>
    </feature>

 

    3.在www/js/index.js文件中加入

    

var MyPlugin = function() {

};
MyPlugin.prototype.service ='MyPlugin';
MyPlugin.prototype.exec = cordova.require('cordova/exec');
MyPlugin.prototype.sayHello =  function(params,success) {
   this.exec(success, function(err) {success('Nothing to echo.');}, this.service, "echo", [params]);
};

 

exec的执行方法参数介绍:

第一个参数     success:方法执行成功时调用该方法

第二个参数    方法执行失败时调用该函数,可自定义该方法

第三个参数    插件名称,保证和config.xml中的插件名称一致就行(feature的name)

第四个参数   插件类中的调用的方法名称

第五个参数   [target, content]:一个数据,插件类中的参数JSONObject data

    4.在www/index.html代码

    

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <meta name="msapplication-tap-highlight" content="no" />
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>Apache CordovaHelelloo</h1>
             <div class="app">
            <h1>Apache Cordova</h1>
            <input type="button" value="test" onclick="test();" />
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            var plugin = new MyPlugin();
            function test(){
            	   plugin.sayHello("zeromike", function(echoValue) {
            		     alert("hello,"+echoValue);
			     	       });
            }
        </script>
    </body>
</html>

 

    点击后结果:hello,zeromike

 

 

    原文链接:http://www.zeromike.net/?p=58
    原文作者:zeromike

0
0
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics