Cordova 创建 Demo插件

acc8226

发布于 2022-05-17 19:51:00

6960

发布于 2022-05-17 19:51:00

文章被收录于专栏：叽叽西

1. 创建基本插件

plugman create --name MyPluginName --plugin_id cordova-plugin-my --plugin_version 0.0.1

然后就会生成如下的文件内容，即下面的两个文件：

.
├── plugin.xml
├── src
└── www
    └── MyPluginName.js

plugin.xml 清单文件，定义了插件的结构以及相关的设置。

<?xml version='1.0' encoding='utf-8'?>
<plugin id="cordova-plugin-my" version="0.0.1" 
    xmlns="http://apache.org/cordova/ns/plugins/1.0" 
    xmlns:android="http://schemas.android.com/apk/res/android">
    <name>MyPluginName</name>
    <js-module name="MyPluginName" src="www/MyPluginName.js">
        <clobbers target="cordova.plugins.MyPluginName" />
    </js-module>
</plugin>

它定义了几个内容：

plugin -- 命名空间、ID、版本
name -- 名称
js-module -- js文件地址，会被默认加载到首页面（index.html）。clobbers元素定义的内容将会被插入到 window对象中

MyPluginName.js JavaScript接口，用于插件与混合应用的接口。

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

exports.coolMethod = function (arg0, success, error) {
    exec(success, error, 'MyPluginName', 'coolMethod', [arg0]);
};

exports中创建了一个名为coolMethod的方法，然后cordova将调用对应平台的Native方法。

2. 添加安卓平台支持

$ plugman platform add --platform_name android

它会在src目录下创建android文件夹, 并产生MyPluginName.java文件. 如果遇到包名出错的情况, 修改为你想要的包名即可. 它提供了原生功能和接口。

package com.abc.cordova; // 包名可能会出错

import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

/**
 * This class echoes a string called from JavaScript.
 */
public class MyPluginName extends CordovaPlugin {

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

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

它也会更新你的plugin.xml 配置文件, 适当修改后如下

<?xml version="1.0" encoding="utf-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android" id="cordova-plugin-my" version="0.0.1">
  <name>MyPluginName</name>
  <js-module name="MyPluginName" src="www/MyPluginName.js">
    <clobbers target="cordova.plugins.MyPluginName"/>
  </js-module>
  <platform name="android">
    <config-file parent="/*" target="res/xml/config.xml">
      <feature name="MyPluginName">
        <param name="android-package" value="com.abc.cordova.MyPluginName"/>
      </feature>
    </config-file>
    <source-file src="src/android/MyPluginName.java" target-dir="src/com/abc/cordova"/>
  </platform>
</plugin>

3. 创建package.json, 否则无法 add 插件

plugman createpackagejson .

4. 使用插件

cordova plugin add ../MyPluginName

由于我的项目MyApp 和 MyPluginName 属于同一级, 所以这样添加插件

5. 配置后可运行

在www 下的index.html中添加按钮

<button id = "testButton">test</button>

然后再在 js/index.js 下新增

document.getElementById("testButton").addEventListener("click", wowawoziji);

function wowawoziji() {
            // 注意clobbers中拿到的名称 和 js文件中配置的方法名要保持一致
            cordova.plugins.MyPluginName.coolMethod('Hello , catch YOU!', 
               function(success){
                  alert(success);
               },
               function(error) {
                  alert(error);
               });
         }

最后, 一切完美