MENU

开发第一个Cordova(4.3.0)插件

• April 8, 2015 • Read: 6644 • Codes

学习中。。。嗯。。
Cordova插件的开发还是挺简单的,目前只做了Android的,iOS部分有时间补上。
Cordova插件开发主要分为四个部分:

  • 用本地语言编写插件主体功能
  • assets/plugins目录下添加js描述文件
  • asserts/cordova_plugins.js中添加描述文件
  • config.xml(Android中路径为res/xml/config.xml)中注册

好吧。。。一个一个来吧。。。
现在写一个Android中的Toast插件(因为只要一句话)

1.用本地语言编写插件主体功能

嗯,这里是Java。。
在合适的包下创建Class,继承CordovaPlugin类并覆盖execute方法,在execute方法中编写插件的主体功能

package me.hran.cordova.toast;

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

/**
 * Created by Hran on 2015/4/9.
 */
public class ToastPlugin extends CordovaPlugin {
    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        if ("show".equals(action)) {
            showToast(args.getString(0), args.getInt(1));
        }
        return super.execute(action, args, callbackContext);
    }

    private void showToast(String text, int type) {
        if (type == 1) {
            android.widget.Toast.makeText(cordova.getActivity(), text, android.widget.Toast.LENGTH_LONG).show();
        } else {
            android.widget.Toast.makeText(cordova.getActivity(), text, android.widget.Toast.LENGTH_SHORT).show();
        }
    }
}

2.在assets/plugins目录下添加js描述文件

文件路径:

assets/plugins/me.hran.cordova.toast/toast.js

代码:

/**
 * Created by Hran on 2015/4/8.
 */
//me.hran.cordova.toast.Toast为插件id,要跟cordova_plugins.js中的id一致
cordova.define("me.hran.cordova.toast.Toast",   function(require, exports, module){
    var exec = require("cordova/exec");
    module.exports = {
        show: function(content, type){
            //参数1:成功回调function
            //参数2:失败回调function
            //参数3:feature name,与config.xml中注册的一致
            //参数4:要传递的参数,json格式
            exec(null,null,"Toast","show",[content,type]);
        }
    }
});

3.在asserts/cordova_plugins.js中添加描述文件

module.exports = []中添加

{
    "file": "plugins/me.hran.cordova.toast/toast.js",//第二步中js描述文件地址
    "id": "me.hran.cordova.toast.Toast",             //与第二步中使用的id一致
    "clobbers":[
        "navigator.toast"                            //将本插件绑定到。。。上
    ]
}

4.在config.xml中注册插件

在widget节点下添加

<feature name="Toast">
    <!--配置Android本地代码-->
    <param name="android-package" value="me.hran.cordova.toast.ToastPlugin"/>
</feature>

5.在js文件中调用

在合适的地方调用

navigator.toast.show(text, type);

完成~
navigator.toast为第三步中clobbers中定义的,show为第二步中module.exports中定义的方法,多个方法都可以添加在这里

创建一个安装包吧

  • 新建一个空(wen)项(jian)目(jia)
  • 把我们第一步中写的本地代码(Toast_plugin.java)放到src/android/目录下
  • 把我们第二步中写的toast.js放到www/目录下
  • 修改toast.js文件,只保留function(require, exports, module)中的代码,即:

    var exec = require("cordova/exec");
    module.exports = {
        show: function(content, type){
            exec(null,null,"Toast","show",[content,type]);
        }
    }
  • 在项目根目录添加plugin.xml文件,代码如下:

    <?xml version="1.0" encoding="UTF-8"?>
    <plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
    
        <!-- 插件的Id,安装后注册的Id为此id加js-moudle的name属性 -->
        id="me.hran.cordova.toast" version="0.0.1">
        <name>Toast</name>
        <description>Cordova Toast Plugin</description>
        <license>Apache 2.0</license>
        <keywords>cordova,toast</keywords>
    
        <!-- js文件的地址,安装后路径为:plugins/插件Id/src属性值 -->
        <js-module src="www/toast.js" name="Toast">
        <!-- 跟第三步中asserts/cordova_plugins.js中填的一样 -->
            <clobbers target="navigator.toast" />
        </js-module>
    
        <!-- android -->
        <platform name="android">
            <config-file target="res/xml/config.xml" parent="/*">
                <!-- config-file中包含的这段会原封不动的插入到config.xml文件中 -->
                <feature name="Toast">
                    <param name="android-package" value="me.hran.cordova.toast.ToastPlugin"/>
                </feature>
            </config-file>
            <!-- 本地代码,有多个文件就写多个source-file,src对应本项目,target对应安装后的目录,注意分隔符别写成包格式(x.xx.xxx) -->
            <source-file src="src/android/ToastPlugin.java" target-dir="src/me/hran/cordova/toast" />
        </platform>
        <!-- 其他平台的代码 -->
    </plugin>
  • 现在的文件结构:

    Project
      --src
        --android
          --ToastPlugin.java
      --www
        --toast.js
      --plugin.xml
  • 好了,加上.gitignore和readme.MD什么的打包打包扔到git上吧

    测试一下安装包

    找个没装过这个插件的项目,用CLI工具执行

    cordova plugin add your-git-repository-address
    //example
    cordova plugin add https://github.com/zhuangluda/Cordova-Plugin-Toast.git

    执行一下第五步,看看对不对

Last Modified: August 31, 2016
Archives QR Code Tip
QR Code for this page
Tipping QR Code