有时候需要使用android原生底层的控件或者方法,在cordova有很多插件供我们使用,通过简单的几步就可以开发简单的cordova吐司(toast)插件

创建插件目录结构

### ToastPlugin文件夹目录接口
|-- src
    |-- android
        |-- ToastPlugin.java  // android入口
|-- www
    |-- ToastPlugin.js        // 插件入口
|-- plugin.xml                // 插件配置

plugin.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<!-- id属性:插件的id标识符 -->
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
    xmlns:android="http://schemas.android.com/apk/res/android"
    id="com.test.toastplugin"
    version="1.0.0">
    <name>Toast</name>
    <description>简单插件</description>
    <license>Apache 2.0</license>
    <keywords>cordova, toast</keywords>
    <repo></repo>
    <issue></issue>

    <!-- src www目录下的js文件 -->
    <js-module src="www/ToastPlugin.js" name="ToastPlugin">
    	<!-- target是调用的全局对象 -->
        <clobbers target="ToastPlugin" />
    </js-module>

    <!-- android -->
    <platform name="android">
        <config-file target="res/xml/config.xml" parent="/*">
            <feature name="ToastPlugin" >
                <!-- value 类名的路径包含命名空间 和下面的target-dir路径一样 -->
                <param name="android-package" value="com.test.toastplugin.ToastPlugin"/>
            </feature>
        </config-file>

        <!-- 引入src/android目录下的源文件 -->
        <source-file src="src/android/ToastPlugin.java" target-dir="src/com/test/toastplugin" />
    </platform>

</plugin>

ToastPlugin.js

var exec = require('cordova/exec');

function ToastPlugin() { }

ToastPlugin.prototype.showToast = function (aString) {
  /**
   *  参数: 成功回调结果, 失败回调结果, 服务名(跟plugin.xml的js-module的name一致), actions, 传参
   */
  exec(function (result) { }, function (result) { }, "ToastPlugin", "showToast", [aString]);
}

var toastplugin = new ToastPlugin();
module.exports = toastplugin;

ToastPlugin.java

package com.test.toastplugin;
import org.apache.cordova.CordovaWebView;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CordovaInterface;
import android.util.Log;
import android.widget.Toast;
import org.json.JSONArray;
import org.json.JSONException;
public class ToastPlugin extends CordovaPlugin {
  public static final String TAG = "toastplugin";
  public ToastPlugin() {
  }
  // 插件初始化时调用
  public void initialize(CordovaInterface cordova, CordovaWebView webView) {
    super.initialize(cordova, webView);
    Log.v(TAG, "初始化");
  }
  public Boolean execute(final String action, final JSONArray args, CallbackContext callbackContext) throws JSONException {
    final int duration = Toast.LENGTH_sHORT;
    if (action.equals("showToast")) {
      cordova.getActivity().runOnUiThread(new Runnable() {
        public void run() {
          Toast toast;
          try {
            toast = Toast.makeText(cordova.getActivity().getApplicationContext(), args.getString(0), duration);
            toast.show();
          }
          catch (JSONException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
          }
        }
      }
      );
    }
    return true;
  }
}

execute()函数里面第三个参数callbackContext,可以返回结果给js入口的回调使用

callbackContxt.success("success msg");
callbackContext.error("error message");

这样就一个简单的吐司插件就封装完成了,接下来在项目引入插件,在工程目录下执行

# 此时插件文件夹在工程目录下
cordova plugin add ./ToastPlugin

# 然后cordova compile 老版本 cordova build

页面调用接口

必须监听deviceready完成后才能调用

document.addEventListener('deviceready', function() {
  document.getElementById("btnOpenCamera").onclick = function() {
    ToastPlugin.showToast("hello world");
  }
}, false);