以下是自己定义cordova插件的基本入门。做插件的小白可以參考一下哈,兴许会更新插件的进阶博客,希望大家可以共同学习共同进步

1.环境搭建

cordova插件开发前须要安装一些软件和配置环境

1.1 node.js环境搭建

到node.js官网(https://nodejs.org/)下载安装就好。只是訪问node.js须要翻墙,在dos窗体输入npm,能显演示样例如以下信息就说明node.js成功安装

1.2 cordova和ionic 的安装

在窗体输入以下命令全局安装cordova和ionic

安装cordova (cordova版本号建议安装6.3.1)

npm install -g cordova@6.3.1

安装ionic

npm install -g ionic

注:安装cordova和ionic时一次不一定会成功,须要多试几次,假设能翻墙的童鞋们能翻墙就更好了

1.3 android  sdk的下载

到谷歌官网(https://developer.android.com/sdk/index.html)上下载android sdk。然后需配置以下几个环境变量

到此插件的开发环境就搭建好了。

2.创建第一个应用

创建的命令是ionic start CoolApp tabs

3.加入平台

3.1 进入创建的项目文件夹

cd CoolApp

3.2 查看已有的平台

cordova platforms list

3.3加入所须要的平台

cordova platform add android

假设要指定安装android6.0的平台能够这样运行命令:cordova platform add android@6.0

假设想移除已经加入的平台的话 cordova
platform remove android 或者cordova
platform rm android

注:假设须要看具体的cordova的命令的话能够參考这篇博文http://wenzhixin.net.cn/2014/02/11/cordova_command_line

4.将project导入androidStudio(在到了studio之前要确保加入了android平台)

第一步:选择Import project(Eclipse ADT,Gradle,etc.)

第二步:找到platform->android下的build.gradle点击ok,等studio编译一段时间就能导入成功了

到此:插件的准备工作就已经做好了

5.插件开发

接下来是插件的详细开发过程

5.1 pluman的安装

npm install -g plugman

5.2 plugman安装完之后就能够创建一个插件了,使用如以下命令

plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version <version> [--path <directory>] [--variableNAME=VALUE]



參数:

pluginName: 插件名字

pluginID: 插件id, egg : coolPlugin 

oversion: 版本号, egg : 0.0.1

directory:一个绝对或相对路径的文件夹,该文件夹将创建插件项目

variable NAME=VALUE: 额外的描写叙述,如作者信息和相关描写叙述

egg : plugman create --name CoolPlugin --plugin_id coolPlugin --plugin_version 0.0.1

生成的插件的文件夹例如以下:

可是遵循规范的话,一般在src文件夹下新建android文件夹,然后在android文件夹下新建ShowToast.java类(ShowToast.java此时是一个空文件),例如以下图

HelloPlugin.js和plugin.xml的解释能够參考http://blog.csdn.net/itcatface/article/details/50520301。这边博文解释的很具体

当中HelloPlugin.js和plugin.xml的相关配置例如以下

在命令生成的插件下默认生成plugin.xml和CoolPlugin.js,以下分别打开查看:

a. plugin.xml的配置

打开plugin.xml你会看到例如以下已经生成的配置

<?xml version='1.0' encoding='utf-8'?

>
<plugin id="coolPlugin" version="0.0.1" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
<name>CoolPlugin</name>
<js-module name="CoolPlugin" src="www/CoolPlugin.js">
<clobbers target="cordova.plugins.CoolPlugin" />
</js-module>
</plugin>

首先解释一下里面的几个參数:

id:  插件的id

version: 插件的版本号

name: 插件的名字

clobbers: 这个是js代码调用原生代码的引用

b.CoolPlugin.js的配置

coolPlugin.js稍后再和完整的plugin.xml一起介绍

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

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

c.完整plugin.xml和CoolPlugin.js

plugin.xml

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

CoolPlugin.js

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

exports.toast = function(arg0, success, error) {
exec(success, error, "ShowToast", "toast", [arg0]);
};

看到plugin.xml在之前的基础上新加了<platform>节点

当中feature相应着CoolPlugin.js中exec(success, error, "ShowToast", "toast", [arg0]);第3个參数,这个两处的參数必须一致,不然插件调用不起来,exports.toast和第4个參数也必须一致,这个是调用原生代码中的方法,后面会讲到。

plugin.xml中的很多其它信息能够參考http://blog.csdn.net/u013598660/article/details/50065937

6.3插件的安装

我的插件所在的路径是F:\handPlugin\CoolPlugin

首先切换到最初创建的CoolApp文件夹  cd CoolApp

运行插件安装命令 cordova plugin add F:\handPlugin\CoolPlugin

运行完之后你就发现插件已经安装上去了

假设你想卸载插件的话,运行cordova plugin remove  你的plugin_id

egg:cordova plugin remove  coolPlugin

安装后的在项目中如图所看到的:

补充ShowToast.java

package com.hand.toast;

import android.widget.Toast;

import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException; public class ShowToast extends CordovaPlugin{
private CallbackContext mCallbackContext;
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
this.mCallbackContext = callbackContext;
if("toast".equals(action)){
String msg = args.getString(0);
Toast.makeText(cordova.getActivity(),msg,Toast.LENGTH_SHORT).show();
callbackContext.success("success");
return true;
}
mCallbackContext.error("error");
return false;
}
}

if(“toast”.equals(action))中的toast相应中CoolPlugin.js中的exports.toast和exec方法的第4个參数

完毕这个类后把完整的类拷贝到之前的插件中覆盖掉ShowToast.java,这样一个最简单的插件就算是完毕了,接下来測试一下我们的成果

6.4插件的使用

    <Button onclick="cordova.plugins.CoolPlugin.toast('吐司',function(msg){
alert(msg);
},function(msg){
alet(msg);
})">打印吐司</Button>

能够在assets->templates->的tab-dash.html中加入使用代码:

例如以下:

<ion-view view-title="Dashboard">
<ion-content class="padding">
<Button onclick="cordova.plugins.CoolPlugin.toast('吐司',function(msg){
alert(msg);
},function(msg){
alet(msg);
})">打印吐司</Button>
</ion-content>
</ion-view>

最后附着效果图:

项目源代码连接:http://download.csdn.net/detail/cool_fuwei/9722834

插件下载地址:http://download.csdn.net/detail/cool_fuwei/9722847

cordova开发自己定义插件的更多相关文章

  1. 基于Cordova5.0开发自己定义插件(android)

    1.开发插件java部分 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvenhmMjE2MjE2/font/5a6L5L2T/fontsize/400/fi ...

  2. Android Cordova 插件开发之编写自己定义插件

    前言 本文适合Android+web的复合型人才,由于cordova本身就是混合开发,所以在Android开发的基础上,还要懂web相关技术(HTML+CSS+JS).可是也有例外,比方我.仅仅需负责 ...

  3. Cordova - 使用Cordova开发iOS应用实战3(添加Cordova控制台插件)

    Cordova - 使用Cordova开发iOS应用实战3(添加Cordova控制台插件) 前文介绍了通过 Safari 的 Web检查器,可以看到控制台输出的信息.但有时这样调试代码不太方便,如果在 ...

  4. Cordova开发总结(插件篇)

    最近刚刚做完一个用Cordova开发了一款电子商务的应用.在选用Cordova前,我有考察过,国内的Appcan, Apicloud等等的解决方案.其实Appcan,ApiCloud的混合方案挺完整的 ...

  5. phonegap(cordova) 自己定义插件代码篇(五)----android ,iOS 集成微信登陆

    统一登陆还是非常有必要的,安全,放心.代码 /*cordov 微信自己定义插件*/ (function (cordova) { var define = cordova.define; define( ...

  6. Cordova开发App入门之创建android项目

    Apache Cordova是一个开源的移动开发框架.允许使用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 应用在每个平台的具体执行被封装了起来,并依靠符合标准的API绑 ...

  7. [Android教程] Cordova开发App入门(一)创建android项目

    前言 Apache Cordova是一个开源的移动开发框架.允许使用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 应用在每个平台的具体执行被封装了起来,并依靠符合标准的A ...

  8. 为WLW开发Latex公式插件

    WLW是写博客的利器,支持离线.格式排版等,而且拥有众多的插件.博客园推荐了代码插入插件,但是没有提供WLW的公式编译插件.目前我的一般做法是:先在Word下使用MathType编辑好公式,然后将公式 ...

  9. 搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo

    目前的手机APP有三类:原生APP,WebAPP,HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Cordova就是一个中间件,让我们把WebAPP打包成Hybrid ...

随机推荐

  1. 1353表达式括号匹配(stack)

    [题目描述] 假设一个表达式有英文字母(小写).运算符(+,—,*,/)和左右小(圆)括号构成,以“@”作为表达式的结束符.请编写一个程序检查表达式中的左右圆括号是否匹配,若匹配,则返回“YES”:否 ...

  2. 数据库的语言——SQL

    DBMS 是一种系统软件,我们要与它交互的时候就必须使用某种语言,在数据库发展初期每一种DBMS 都有自己的特有的语言,不过逐渐的SQL 成为了所有DBMS 都支持的主流语言.SQL 是专为数据库而建 ...

  3. 列(Column)

     同样是生肉,不同的生肉又有不同的特性,有的生肉是里脊肉,有的生肉是前臀尖,这块生肉是18公斤,而那块生肉是12公斤,这块生肉是12.2 元/公斤,而那块生肉是13.6 元/公斤.每块肉都有各自的不同 ...

  4. [BZOJ5462][APIO2018]新家(线段树+堆)

    其实这个题第一反应一定是线段树分治,但是这样反而更难考虑了(实际上是可做的但很难想到),可见即使看上去最贴切的算法也未必能有效果. 考虑这个DS题,没有什么模型的转化,可能用到的无非就是线段树.平衡树 ...

  5. AtCoder - 2061 Tree Restoring

    Problem Statement Aoki loves numerical sequences and trees. One day, Takahashi gave him an integer s ...

  6. Ze_Min Tree 主席树

    前言 主席树,也叫可持久化线段树,所以他的本质是颗线段树,而可持久化指的是这颗线段树可以访问过去某个时刻线段树上的信息. 应用 应用的比较多的是查询区间的第k大值(因为其他的数据结构不好做). 实现 ...

  7. 【块状树】bzoj3720 Gty的妹子树

    块状树.教程见:http://z55250825.blog.163.com/blog/static/1502308092014163413858/将树按一定大小分块,分成许多子树,在每个子树的根节点记 ...

  8. Scala实战高手****第10课:Scala继承彻底实战和Spark源码鉴赏

    isInstanceOf  和 asInstanceOf is用于判断 as用于转换,把父类类型转换成子类类型   getClass 具体找出类型    

  9. angular2学习资源汇总

    文档博客书籍类 官方网站: https://angular.io 中文站点: https://angular.cn Victor的blog(Victor是Angular路由模块的作者): https: ...

  10. cookie的secure、httponly属性设置

    cookie的secure.httponly属性设置 转载自:http://www.cnblogs.com/alanzyy/archive/2011/10/14/2212484.html 一.属性说明 ...