Cordova plugin

最新推荐文章于 2024-03-17 09:59:50 发布

LehmanHe

最新推荐文章于 2024-03-17 09:59:50 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Cordova & ionic2 文章标签： android ios cordova plugin ionic

本文链接：https://blog.youkuaiyun.com/u010106153/article/details/53418528

Cordova & ionic2 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍Cordova插件的开发流程，包括工程目录结构、关键文件的作用、编写跨平台插件的具体步骤及如何在Ionic2中使用这些插件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Cordova plugin

工程目录

这里写图片描述

src: 各个平台的源码文件，包含 Android ios blackberry 等；
www: JavaScript调用native代码的接口文件；
plugin.xml: 插件的配置文件

编写Android代码

首先定义一个类继承自`CordovaPlugin`：

public class Updater extends CordovaPlugin {
    public Updater(){
    }
}

在该类中添加一个方法`execute`:

public class Updater extends CordovaPlugin {
    public Updater(){

    }

    public boolean execute(String action, JSONArray args, final CallbackContext callbackContext) throws JSONException {
        if (action.equals("update")) {
            new UpdaterTask(callbackContext).execute(args.getString(0));
        }else{
            return false;
        }
        return true;
    }
}

action:在JavaScript中调用时指定的action名称；
args：在JavaScript中调用时传入的参数；
callbackContext：向JavaScript返回结果的上下文对象，正确返回时callbackContext.success(data),错误返回时 callbackContext.error(err)

注意：cordova plugin中的上下文与Android native中的上下文有所区别，例如在cordova中启动一个Activity的写法是：cordova.getActivity().startActivity(Intent intent)，且cordova plugin中的Activity需要继承自CordovaActivity.

编写plugin.xml文件

首先看一个例子：

<?xml version='1.0' encoding='utf-8'?>
<plugin id="expense-plugin-updater" version="0.0.1" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
    <name>ExpenseUpdater</name>
    <js-module name="ExpenseUpdater" src="www/expense-plugin-updater.js"><clobbers target="expenseupdater"/></js-module>
    <platform name="android">
        <config-file parent="/*" target="res/xml/config.xml">
            <feature name="ExpenseUpdater"><param name="android-package" value="expense.plugin.updater.Updater"/></feature>
        </config-file>
        <config-file parent="/*" target="AndroidManifest.xml">
            <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
            <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
            <uses-permission android:name="android.permission.INTERNET" />
        </config-file>
        <source-file src="src/android/Updater.java" target-dir="src/expense/plugin/updater"/>
        <source-file src="src/android/UpdaterTask.java" target-dir="src/expense/plugin/updater"/>
        <source-file src="src/android/DecompressFast.java" target-dir="src/expense/plugin/updater"/>
    </platform>
</plugin>

js-module: name:接口文件的名字 src：接口文件的路径 clobbers.target：在宿主工程中该plugin的对象名称；
feature：每一个调用入口都需要在这里注册，即：extends CordovaPlugin的类
source-file：源码文件的map关系
plugin.xml详细的教程见：https://cordova.apache.org/docs/en/latest/plugin_ref/spec.html

编写接口文件

例子：

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

exports.update = function(url, success, error) {
    exec(success, error, "ExpenseUpdater", "update", [url]);
};

success: 正确回调
error：错误回调
ExpenseUpdater：需要调用的feature的名称
update：需要调用的action的名称
[url]:传入的参数数组

在Ionic2中如何使用

首先将该plugin安装到ionic工程中：

cordova plugin add [path-to-your-plugin]

编写一个调用的interface[updater.d.ts]

export declare class ExpenseUpdater {
    update(url: string): Promise<any>;
}

实现interface[updater.js]

"use strict";
var ExpenseUpdater = (function(){
    function ExpenseUpdater(){};

    ExpenseUpdater.prototype.update=function(url){
        return new Promise(function(resolve,reject){
            expenseupdater.update(url,function(msg){
                resolve(msg);
            },function(err){
                reject("fuck");
            });
        });
    };
    return ExpenseUpdater;
}());

exports.ExpenseUpdater = ExpenseUpdater;