cordova跨平台app开发02_自定义插件开发与安装

视频地址:http://t.cn/RacmXiy

cordova的自定义插件由js、原生代码文件(java、oc)、plugin.xml三部分组成。

cordvoa提供了命令来创建插件模版项目。

创建插件模版

1.     pluman的安装

npm install –g plugman

2.     在d:\cordovaplugins创建一个名称为helloplugins,id为com.zql. helloplugins,版本号为1.0.0的插件

cd D:\cordovaplugins

plugman create --name helloplugins --plugin_id  com.zql.helloplugins --plugin_version 1.0.0

给插件增加android 平台

cd helloplugins

plugman platform add --platform_name android

给插件增加ios平台

plugman platform add --platform_name ios

插件模版目录结构

src 目录为原生代码文件

www 为前台js

plugin.xml为插件配置文件

模版代码创建完成后,还需要修改

1      修改plugin.xml

1.1      修改js-module配置。clobbers配置了调用js方法的对象。cordova.plugins.helloplugins太长了调用起来太麻烦,修改为helloplugins

<js-module name="helloplugins" src="www/helloplugins.js">
    <clobbers target="cordova.plugins.helloplugins"/>
</js-module>

<js-module name="helloplugins" src="www/helloplugins.js">
    <clobbers target="helloplugins"/>
</js-module>

1.2      修改<platform name="android"></ platform>配置中的source-file。

将target-dir="src/com/zql//helloplugins"。修改为target-dir="src/ com/zql/plungins "。  com/zql/plungins为java文件的包名

插件开发

Js开发

一个插件可以配置多个js方法,通过exec的第四个参数来区分

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

var func1 = function(){};

func1.prototype.show = function(arg0, success, error) {    exec(success, error, "helloplugins", "show", arg0);};

func1.prototype.show1 = function(arg0, success, error) {    exec(success, error, "helloplugins", "show1", arg0);};

module.exports = new func1();

通过helloplugins.show(args,successcallback,errcallback);

helloplugins.show1(args,successcallback,errcallback);调用。

这里的helloplugins为plugin.xml中js-model下的clobbers配置的值。

Andorid原生代码开发

public class helloplugins extends CordovaPlugin {

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

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

继承了 CordovaPlugin 类,并重写 execute 方法,使用 action 来判断我们在 javascript 中调用的方法名,成功的话调用callbackContext.success(message),失败调用 callbackContext.error(message) 方法,分别对应 javascript 文件中的success 和 error 回调函数。

插件的安装

复制插件文件夹到项目跟目录

cd 项目路径

cordova plugin addhelloplugins

插件删除

cd 项目路径

cordova plugin rm插件id

时间: 2024-10-07 11:51:05

cordova跨平台app开发02_自定义插件开发与安装的相关文章

cordova跨平台app开发01_创建项目、桌面图标、启动图配置

视频地址:http://t.cn/RacnKeB 安装cordova 1.     下载安装node.js(js的运行环境),安装时勾选npm(js包的管理工具).2.下载安装git(配置好环境变量).3.在cmd控制台,使用npm安装cordova. npm install -g cordova 创建cordova项目 $ cordova create hello com.example.hello HelloWorld 第一个参数hello指定项目创建的目录 第二个参数com.example

“H5跨平台APP开发”APICloud从入门到精通

"H5跨平台APP开发"APICloud从入门到精通 课程学习地址:http://www.xuetuwuyou.com/course/164 课程出自学途无忧网:http://www.xuetuwuyou.com 课程介绍:               一.课程使用到的软件 APICloud Studuio(或Sublime.WebStorm加上APICloud插件) Google Chrome浏览器 海马玩手机模拟器(或真机) 二.课程目的:     随着IOS.Android等原生

史上最简单的个人移动APP开发入门--jQuery Mobile版跨平台APP开发

书是人类进步的阶梯. ——高尔基 习大大要求新新人类要有中国梦,鼓励大学生们一毕业就创业.那最好的创业途径是什么呢?就是APP.<构建跨平台APP-jQuery Mobile移动应用实战>就是一本写给没钱没身份没资历的创业小白看的APP书,看完这本书你可以拥有自己的一个APP,不用花钱就能移植到其他移动平台,支持iOS,Android,Windows Phone!!!!!!!!找个最便宜的来练手吧!  小白APP交流Q群:  348632872 清华大学出版社推出的<构建跨平台APP:j

带你从零学ReactNative开发跨平台App开发(二)

ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 上一篇教程我们一步步配置了开发RN的必备环境,这篇文章我们依然配置环境,昨天配置的是CRNA模式开发的环境,我们今天配置原生混合开发环境. 第一次写系列教程,写的不好,多多担待,有错误欢迎评判指正. 说一下这个系列教程的目标吧,实战一个CRNA模式开发的跨平台App打包并发布,并将这个App用原生混合开模式实现并打包发布. 废话不多说开始撸码,你准备好了吗? 环境配置 配置原生混合模式开发的环

带你从零学ReactNative开发跨平台App开发(五)

ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发跨平台App开发(三) 带你从零学ReactNative开发跨平台App开发(四) 带你从零学ReactNative开发跨平台App开发(五) 其实写到第三篇的时候,再写第四篇,我突然感到再往后写,好 艰难 啊,坚持,我坚持写,坚持就是胜利,有人说你写这干什么,我说爱好而已,就好比有的人喜欢打王者,

带你从零学ReactNative开发跨平台App开发(十)

ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发跨平台App开发(三) 带你从零学ReactNative开发跨平台App开发(四) 带你从零学ReactNative开发跨平台App开发(五) 带你从零学ReactNative开发跨平台App开发(六) 带你从零学ReactNative开发跨平台App开发(七) hot:更多>> 贴一个交流群的二

带你从零学ReactNative开发跨平台App开发(十三)

ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发跨平台App开发(三) 带你从零学ReactNative开发跨平台App开发(四) 带你从零学ReactNative开发跨平台App开发(五) 带你从零学ReactNative开发跨平台App开发(六) 带你从零学ReactNative开发跨平台App开发(七) hot:更多>> 好久没写了,最近

CrossApp logo 跨平台app开发引擎

11月23日源创会年度(北京万豪酒店)千人盛典火热报名中 CrossApp简介 CrossApp是一款完全开源.免费.跨平台的移动应用开发引擎,基于最宽松的MIT开源协议,所以开发者可以完全免费.毫无顾虑的使用 CrossApp开发任何商业项目,官方会提供每天8小时的免费在线页面问答式服务,每个问题的反馈速度大概在30分钟左右,回复率90%. CrossApp采用C++开发(即将支持js和lua编写),可直接导出ios和android原生应用,拥有高性能,多控件,开发速度快的优 势.完美的集成了

带你从零学ReactNative开发跨平台App开发(一)

首先自我介绍一下,本人鸟窝,现在就职于xx共享汽车,担任主程,目前用的技术栈是.net core+angular. 今天我讲的是关于ReactNative从零基础开发,希望可以对入门的新手,起到一个指导作用. 目前学习React Native跨平台开发的人员比较多,干ReactNative开发的程序员,转行过来的也比较多,之前就有遇到过,比如:干前端的,干Android/IOS的,干后台的(C#,Go,Java...PHP),发现一个很有趣的现象,我公司同事干PHP的,一次偶然,我发现他尽然学起