Cordova hybrid app -- android -- plugins

最新推荐文章于 2024-08-24 09:57:33 发布

原创最新推荐文章于 2024-08-24 09:57:33 发布 · 281 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#hybrid-app

hybird-app 专栏收录该内容

0 篇文章

订阅专栏

本文详细介绍如何使用Cordova创建自定义插件，包括插件的目录结构、配置文件、原生代码及JavaScript模块的编写方式。同时介绍了如何安装、管理和使用自定义插件。

Cordova hybrid app – android– plugins

参考：http://cordova.apache.org/docs/en/latest/plugin_ref/spec.html

1.创建本地plugin文件夹目录，然后创建plugin文件夹如picture_routes

2.插件内plugin.xml文件内容
这里写图片描述
name – 插件名称
js-module – js模块嵌入文件路径(如例–js模块定义文件为www/picture_routes.js,在原生代码中可以直接使用mobile.pictureRoutes使用插件)
platform – 对应平台插件代码存储位置和配置文件内容
config-file(target-AndroidManifest.xml) – 配置文件增加权限配置
config-file(target-config.xml) – 插件对应原生代码（在project中）保存位置
source-file – 平台插件原生代码在本地库中相对位置

3.插件原生代码

package org.apache.cordova.plugin;

import android.content.ContentResolver;
import android.content.Context;
import android.database.Cursor;
import android.net.Uri;
import android.provider.MediaStore;

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

import java.util.ArrayList;
import java.util.HashMap;

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

    Context context;

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {

        context = this.cordova.getActivity().getApplicationContext();

        if(action.equals("getList")){
            this.getList(callbackContext);
            return true;
        }
        return false;
    }

    private void getList(CallbackContext callbackContext) {

        LOG.d("picture route list", "get list start");
        ContentResolver cr = context.getContentResolver();
         //图片
         Uri IMAGE_URI = MediaStore.Images.Media.EXTERNAL_CONTENT_URI;
         String[] columns  = new String[] {MediaStore.Images.Media.TITLE, MediaStore.Images.Media.DATA};
         //要读的列名,这些常量可以查GOOGLE官方开发文档,TITLE是标题 DATA是路径
         Cursor cursor = cr.query(IMAGE_URI, columns, null, null, null);
        /* 返回图片列表 */
        callbackContext.success(getPictureRotesList(cursor));
    }

    private JSONArray getPictureRotesList(Cursor cursor){

        JSONArray routeList = new JSONArray();

        if(cursor != null){
            //生成动态数组，并且转载数据
            while(cursor.moveToNext()){
                //循环读取第一列,即文件路径,0列是标题
                routeList.put(getJSON(cursor.getString(1)));
            }
            cursor.close();
            return routeList;
        }
        return null;
    }

    private JSONObject getJSON(String param) {
        JSONObject r = new JSONObject();
        try {
            r.put("route", param);
        } catch (JSONException e) {
            e.printStackTrace();
        }
        return r;
    }

}

4.js 模块定义代码

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

var MyPlugin = function() {};

MyPlugin.prototype.getList = function(successCallback,failureCallback) {
    exec(successCallback, failureCallback, "PictureRoutes", "getList", []);
}

MyPlugin.prototype.init = function(pageSize,successCallback,failCallback) {
    exec(function(data){
        MyPlugin.prototype.list = [];
        MyPlugin.prototype.pageSize = pageSize;
        MyPlugin.prototype.currPage = 1;
        data.forEach(function(temp){
            /* 包含中文一次或多次 */
            var expression = /[\u4e00-\u9fa5]+/g;
            if(!expression.test(temp.route)){
                MyPlugin.prototype.list.push(temp);
            }else{
                /* do nothing */
            }
         });
        successCallback("success");
    }, function(error){
        failCallback(error);
    }, "PictureRoutes", "getList", []);
}

MyPlugin.prototype.nextPage = function() {
    if(MyPlugin.prototype.list){
        if(MyPlugin.prototype.currPage < MyPlugin.prototype.list.length/MyPlugin.prototype.pageSize){
            MyPlugin.prototype.currPage++;
            var resArr = [];
            for(var i=(MyPlugin.prototype.currPage-1)*MyPlugin.prototype.pageSize;i<MyPlugin.prototype.currPage*MyPlugin.prototype.pageSize;i++){
                resArr.push(MyPlugin.prototype.list[i]);
            }
            return resArr;
        }else{
             var resArr = [];
             for(var i=(MyPlugin.prototype.currPage-1)*MyPlugin.prototype.pageSize;i<MyPlugin.prototype.currPage*MyPlugin.prototype.pageSize;i++){
                 resArr.push(MyPlugin.prototype.list[i]);
             }
             return resArr;
        }
    }else{
        return null;
    }
}

MyPlugin.prototype.lastPage = function() {
    if(MyPlugin.prototype.list){
        if(MyPlugin.prototype.currPage > 1){
            MyPlugin.prototype.currPage--;
            var resArr = [];
            for(var i=(MyPlugin.prototype.currPage-1)*MyPlugin.prototype.pageSize;i<MyPlugin.prototype.currPage*MyPlugin.prototype.pageSize;i++){
                resArr.push(MyPlugin.prototype.list[i]);
            }
            return resArr;
        }else{
            var resArr = [];
            for(var i=(MyPlugin.prototype.currPage-1)*MyPlugin.prototype.pageSize;i<MyPlugin.prototype.currPage*MyPlugin.prototype.pageSize;i++){
                resArr.push(MyPlugin.prototype.list[i]);
            }
            return resArr;
        }
    }else{
        return null;
    }
}

MyPlugin.prototype.currPageData = function() {
    if(MyPlugin.prototype.currPage){
        MyPlugin.prototype.currPage;
        var resArr = [];
        for(var i=(MyPlugin.prototype.currPage-1)*MyPlugin.prototype.pageSize;i<MyPlugin.prototype.currPage*MyPlugin.prototype.pageSize;i++){
            resArr.push(MyPlugin.prototype.list[i]);
        }
        return resArr;
    }else{
        return null;
    }
}

MyPlugin.prototype.currPic = function() {
    return MyPlugin.prototype.list[MyPlugin.prototype.currPage];
}

var myplugin = new MyPlugin();
module.exports = myplugin;

5.安装管理自定义plugin

    5.1 cordova plugin ls -- 列出项目plugin列表
    5.2 cordova plugin remove ... -- 删除plugin
    5.3 cordova plugin add ../plugins/picture_routes(插件相对路径或github地址)

6.附 – 插件目录结构
plugins/
plugins/picture_route/
plugins/picture_route/src/android/PictureRoutes.java
plugins/picture_route/www/picture_routes.js