写一个phonegap插件

最新推荐文章于 2025-08-05 16:27:09 发布

最新推荐文章于 2025-08-05 16:27:09 发布 · 152 阅读

文章标签：

#phonegap #插件

JAVA 同时被 2 个专栏收录

47 篇文章

订阅专栏

android

9 篇文章

订阅专栏

本文介绍了使用PhoneGap（Cordova）进行混合应用开发时如何创建插件以便于与原生代码交互。通过示例代码展示了插件的实现步骤，包括在Eclipse中配置插件类、修改config.xml文件及在JavaScript中调用插件。

我的博客网站：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