phonegap插件实现对android原生的调用

最近一值在使用phonegap + html5 + js来开发移动端，相对原生开发效率确实高，也很方便。不过phonegap提供对原生调用的插件有限，比如二维码扫描、附件打开、文件上传等等，这些phonegap是没有提供的。所以就需要自定义插件来满足自己的需求，今天就简单记录下phonegap插件的开发。

实现一个吐司效果（Toast）,直接上代码：

新建ToastPlugin类继承CordovaPlugin

package com.plugins.toast;

import android.widget.Toast;

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

/**
 * Toast效果插件
 * 继承CordovaPlugin，并重写execute方法
 */

public class ToastPlugin extends CordovaPlugin {
    /**
     *
     * @param action          The action to execute.
     * @param args            The exec() arguments, wrapped with some Cordova helpers.
     * @param callbackContext The callback context used when calling back into JavaScript.
     * @return
     * @throws JSONException
     */
    @Override
    public boolean execute(String action, CordovaArgs args, CallbackContext callbackContext) throws JSONException {
        if ("showShort".equals(action)) {
            Toast.makeText(cordova.getActivity(), "我是一条短吐司！", Toast.LENGTH_SHORT).show();
        } else if("showLong".equals(action)) {
            Toast.makeText(cordova.getActivity(), "我是一条长吐司！", Toast.LENGTH_LONG).show();
        }
        return super.execute(action, args, callbackContext);
    }
}

配置res/xml/config.xml文件

    <feature name="Toast">
        <param name="android-package" value="com.plugins.toast.ToastPlugin" />
    </feature>

如果想偷懒的话这样就可以使用了，直接在页面调用

    <div>
        <a href="#" οnclick="showToast()">显示Toast</a>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript">
        function showToast() {
            cordova.exec(null, null, "Toast", "showShort", []);
        }
    </script>

部署就可以实现效果。

其实也可以封装成js方法调用,实现分三步，第一，首先在assets/www/plugins文件夹中创建com-samulle-plugin-toast/www文件夹，然后创建toast.js文件，代码为：

cordova.define("com-samulle-plugin-toast.toast", function(require, exports, module) {
var exec = require('cordova/exec');

exports.show = function(arg0, success, error) {
    exec(success, error, "Toast", "showShort", [arg0]);
};

});

第二步，在assets/www中的cordova_plugins.js配置模块，在module.exports中添加：

{
         "id": "com-samulle-plugin-toast.toast",
         "file": "plugins/com-samulle-plugin-toast/www/toast.js",
         "pluginId": "com-samulle-plugin-toast",
         "clobbers": [
             "Toast"
         ]
     }

然后在module.exports.metadata中添加

"com-samulle-plugin-toast": "1.0.0"

第三步，页面调用

    <div>
        <a href="#" οnclick="showToast()">显示Toast</a>
        <a href="#" οnclick="Toast.show()">显示</a>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript">
        function showToast() {
            cordova.exec(null, null, "Toast", "showShort", []);
        }
    </script>

好了，整个插件的开发过程就是这样的。如有不足之处还望指出。

另外提供phonegap android在线更新插件 demo 和phonegap选择文件及上传文件 demo