1 安装 plugman 插件

npm --registry https://registry.npm.taobao.org install -g plugman

2 新建组件

新建一个插件文件夹,进入插件文件夹。例如新建Plugins文件夹,然后执行下面语句

plugman create --name TestPlugin --plugin_id com.plugin.testPlugin --plugin_version 1.0.0

说明:

--name TestPlugin //自定义插件名称
--plugin_id com.plugin.testPlugin //自定义插件的包名
--plugin_version 1.0.0 //自定义插件版本

执行上述命令后会在Plugins文件夹下生成一个TestPlugin文件夹,并且TestPlugin文件夹内包含如下内容:

—TestPlugin
|——src
|——www
|——plugin.xml

3 生成平台(android/ios)插件代码

进入插件的根目录,然后执行创建android或者ios的平台支持命令

cd TestPlugin
plugman platform add --platform_name android

命令执行后在TestPlugin/src目录下出现了android目录,并且多了一个TestPlugin.java文件,打开TestPlugin.java文件,

package com.plugin.testPlugin;

import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext; import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject; /**
* This class echoes a string called from JavaScript.
*/
//自定义插件需要继承CordovaPlugin类,并且覆盖execute方法。
public class TestPlugin extends CordovaPlugin {

   //参数action是用来判断执行哪个方法,args是json格式的参数,callbackContext响应返回结果。
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
if (action.equals("coolMethod")) {
String message = args.getString(0);
this.coolMethod(message, callbackContext);
return true;
}
return false;
} private void coolMethod(String message, CallbackContext callbackContext) {
if (message != null && message.length() > 0) {
callbackContext.success(message);
} else {
callbackContext.error("Expected one non-empty string argument.");
}
}
}

并且在www文件夹下也新生成TestPlugin.js,TestPlugin.js的作用是通过js暴露插件的功能给ionic

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

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

说明:

TestPlugin //插件名称
coolMethod //方法名称

4 介绍plugin.xml

<?xml version="1.0" encoding="utf-8"?>

<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android" id="com.plugin.testPlugin" version="1.0.0">
<name>TestPlugin</name>
<js-module name="TestPlugin" src="www/TestPlugin.js">
<clobbers target="cordova.plugins.TestPlugin"/>
</js-module>
<platform name="android">
<config-file parent="/*" target="res/xml/config.xml">
<feature name="TestPlugin">
<param name="android-package" value="com.plugin.testPlugin.TestPlugin"/>
</feature>
</config-file>
<config-file parent="/*" target="AndroidManifest.xml"/>
<source-file src="src/android/TestPlugin.java" target-dir="src/com/plugin/testPlugin/TestPlugin"/>
</platform>
</plugin>

说明:

id: 插件的标识,即发布安装到plugin 的 ID
name:插件的名称
js-module:对应我们的 javascript 文件,src 属性指向 www/TestPlugin.js
platform:支持的平台,这里仅仅用到了 android

5 初始化package.json

在ionic3项目中添加插件,所添加的插件必须包含package.json文件,网上一些生成的方式尝试失败,最后发现执行下面命令可行。

npm init

例如下面执行过程

C:\work\ionic\plugins\TestPlugin>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields
and exactly what they do. Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file. Press ^C at any time to quit.
package name: (testplugin)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\work\ionic\plugins\TestPlugin\package.json: {
"name": "testplugin",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
} Is this ok? (yes) yes C:\work\ionic\plugins\TestPlugin>

标识红色的地方,可以自定义,也可以直接回车选择默认值。

然后会在插件根目录下看到新建的package.json文件

6 插件引入ionic3项目中

6.1 新建ionic3项目

ionic start TestIonic3 tabs
npm --registry https://registry.npm.taobao.org install
ionic serve

6.2 引入自定义插件

ionic cordova plugin add 你插件的存储路径

例如:

ionic cordova plugin add C:\work\ionic\plugins\TestPlugin

会在TestIonic3根目录下新增plugins目录,并生成相关配置文件和代码。

6.3 使用自定义插件

6.3.1 在home.html 上添加下面代码

<p>
<button ion-button color="primary" (click)="callMyPlugin()">call my plugin</button>
</p>

6.3.2 修改home.ts代码

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
declare let cordova: any;
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage { constructor(public navCtrl: NavController) { }
callTestPlugin(){
cordova.plugins.TestPlugin.coolMethod("今天好运气,一老狼请吃鸡呀!",result=>alert(result),error=>alert(error));
}
}

标识红色的部分是定义cordova对象,和引用自定义插件方法

注意,这个变量的定义,是个全局的引用,表示所有的插件对象都加载进来

declare let cordova: any;

具体插件类的调用需要看被调用插件的配置文件plugin.xml中的节点

 <clobbers target="cordova.plugins.TestPlugin"/>

如果这个节点被定义为

 <clobbers target="BaiduTTS"/>

那么在调用时直接这样写

BaiduTTS.XXX(xxxxx);//xxxx代表方法名或者参数

6.4 查看效果

自定义插件只在手机上有效果,浏览器上不能运行,如果运行的话会报ReferenceError: cordova is not defined的错误,所以只能生成apk并安装到手机上查看效果。生成apk,需要执行下面命令

ionic cordova platform add android
ionic cordova build androi

或者通过usb手机调试

ionic cordova run android -l -c

6.5 修改自定义插件

自定义插件修改后必须先删除插件,然后再安装插件才可生效。

1)ionic cordova plugin list 列出所有已安装的插件
2)ionic cordova plugin remove com.plugin.testPlugin 从ionic3项目中删除插件
3)ionic cordova plugin add 自定义插件路径 安装插件到ionic3项目

执行顺序为1->2->修改代码->3

例如在插件中增加一个方法,首先修改TestPlugin/Android/TestPlugin.java

package com.plugin.testPlugin;

import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext; import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject; /**
* This class echoes a string called from JavaScript.
*/
public class TestPlugin extends CordovaPlugin { @Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
if (action.equals("coolMethod")) {
String message = args.getString(0);
this.coolMethod(message, callbackContext);
return true;
}else if (action.equals("plus")) {//主方法中增加一段方法名称判断和调用的代码
int x = args.getInt(0);
int y = args.getInt(1);
this.plus(x, y, callbackContext);
return true;
}
return false;
} private void coolMethod(String message, CallbackContext callbackContext) {
if (message != null && message.length() > 0) {
callbackContext.success(message);
} else {
callbackContext.error("Expected one non-empty string argument.");
}
} //新增一个传入两个参数求和的方法
private void plus(int x, int y, CallbackContext callbackContext) {
callbackContext.success(x + y);
}
}

修改TestPlugin/www/TestPlugin.js代码

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

var testAPI = {}

testAPI.coolMethod = function(arg0, success, error) {
exec(success, error, "TestPlugin", "coolMethod", [arg0]);
};
//求和方法
testAPI.plus = function(arg0,arg1, success, error) {
exec(success, error, "TestPlugin", "plus", [arg0,arg1]);
}; module.exports = testAPI;

修改自定义插件package.json和plugin.xml文件的版本号

修改ionic项目home.html代码,增加一个button

 <p>
<button ion-button color="primary" (click)="callTestPluginNew()">new plus function</button>
</p>

修改home.ts代码,增加一个调用方法

  callTestPluginNew(){
cordova.plugins.TestPlugin.plus(3,7,result=>alert(result),error=>alert(error));
}

重新添加自定义插件后,再次重新生成apk,查看效果

ionic cordova build android

ionic3使用cordova创建自定义插件的更多相关文章

  1. cordova /phonegap 自定义插件

    ### cordova /phonegap 自定义插件 在使用cordova 的过程中,虽然官方提供的插件以及其他人开源的插件较多.但有时为了实现某种需求,还是需要自己编写插件. 以前总是会手动的配置 ...

  2. Cordova - 与iOS原生代码交互2(使用Swift开发Cordova的自定义插件)

    在前一篇文章中我介绍了如何通过 js 与原生代码进行交互(Cordova - 与iOS原生代码交互1(通过JS调用Swift方法)),当时是直接对Cordova生成的iOS工程项目进行编辑操作的(添加 ...

  3. cordova自定义插件的创建过程

    最近学习了cordova插件,记录一下大概的过程,仅供参考. 前期的配置就不记录了网上好多. 在简书上从新写了一个更详细的cordova插件教程,有需要的可以点这里进去看看. 第一步 创建一个cord ...

  4. Cordova与现有框架的结合,Cordova插件使用教程,Cordova自定义插件,框架集成Cordova,将Cordova集成到现有框架中

    一.框架集成cordova 将cordova集成到现有框架中 一般cordova工程是通过CMD命令来创建一个工程并添加Android.ios等平台,这样的创建方式可以完整的下载开发过程中所需要的的插 ...

  5. cordova创建工程添加插件

    创建工程 phonegap创建工程 代码 用以创建自己需要的  工程名   ; 报名  ;类名 ; 应用名 cordova create hello com.example.hello HelloWo ...

  6. Cordova应用的JavaScript代码和自定义插件代码的调试

    我之前写过三篇Cordova相关的技术文章.当我们使用Cordova将自己开发的前端应用打包安装到手机上后,可能会遇到需要调试Cordova应用的时候. 本文就介绍Cordova应用的调试步骤. 如果 ...

  7. 【Maven实战技巧】「插件使用专题」Maven-Archetype插件创建自定义maven项目骨架

    技术推荐 自定义Archetype Maven骨架/以当前项目为模板创建maven骨架,可以参考http://maven.apache.org/archetype/maven-archetype-pl ...

  8. ionic2/cordova自定义插件集成aar包

    一.准备自定义插件 1. 准备:安装plugman npm install -g plugman 2. 新建组件 plugman create --name MyPlugin --plugin_id ...

  9. cordova3.X 运用grunt生成plugin自定义插件骨架

    Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等.Cordova还提供了一组统一的JavaScript类库,以及为这些 ...

随机推荐

  1. linux下NFS实战

    系统环境 系统平台:CentOS release 6.8 (Final) NFS Server IP:172.16.55.6 防火墙关闭 SELinux=disabled 安装NFS程序包 1.查看系 ...

  2. SQL SERVER 事务的使用(tran)

    sql server事务的使用是为了确保数据的一致性. 通常写法 begin tran --sql 语句1 --sql 语句2 --sql 语句3 commit tran 上面写法存在隐患,当操作(增 ...

  3. C++中数组声名后不初始化,数组里的值都是0吗?

    这得看数组的申明情况: 1.全局/静态数组 如果申明的是全局/静态数组,系统会把数组的内容自动初始化为0. 2.局部数组 如果申明的是局部数组,数组的内容会是随机的,不一定是0.如函数内声明: int ...

  4. angular4,6 引入第三方插件的方法

    话不多说直入主题,最常见的有三种方式来引用第三方插件,下面以jquery插件及基于JQuery的两款插件:nicescroll和rangeSlider为例. 一.第一种方式:在.angular-cli ...

  5. Python—列表操作

    列表 列表的使用: 列表是可变数据类型,因此列表的方法,都是直接修改列表原始值 list = ["panda","chimpanzee","zebra ...

  6. Python *Mix_w4

    1.什么是列表(list) 列表是一个可变的数据类型 列表由[ ]来表示,每一项元素使用逗号隔开.列表什么都能装,能装对象的对象. 列表可以装大量的数据,列表能装所有数据类型 2.列表的索引和切片 列 ...

  7. 为你详解Linux安装GCC方法

    下载: http://ftp.gnu.org/gnu/gcc/gcc-4.5.1/gcc-4.5.1.tar.bz2浏览: http://ftp.gnu.org/gnu/gcc/gcc-4.5.1/查 ...

  8. GDT全局描述符表

    GDT全局描述符表 什么是GDT全局描述符表 GDT全称为Global Descriptor Table,全局描述符表. 保护模式的寻址方式不在使用寄存器分段的方式直接寻址方式了.而采用的是使用GDT ...

  9. git 的安装和使用及hithub同步

    作业要求来自https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/2097 GitHub远程仓库的地址 https://github.com/ ...

  10. cut语法2

    linux每日一命令--cut--按文件大小排序 显示前100行 显示后五列 ll -Sh|head -n 100|cut -d ' ' -f 5- 一.基本语法cut是一个选取命令,以行为单位,用指 ...