以下是自己定义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>
最后附着效果图: