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. Vue(一)

    一.es6语法:let和const es6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. 上面代码在代码块之中,分别用let和var声明了两 ...

  2. wireshark捕获/显示过滤器表达式书写规律说明

    一.说明 1.1 背景说明 对于大多数刚开始接触wireshark的使用者而言,经常是开始的时候时候看到wireshark能把所有数据包都拦截下来觉得强无敌,但是面对一大堆的数据包要问有什么用或者说想 ...

  3. python3练习-发送IP地址到邮箱

    需求: 从外网通过VPN访问内网,并登录电脑A.在电脑A通过共享文件夹(需要\\IP的方式访问)访问到内网电脑B,由于电脑B的WI-FI的IP地址会变化,所以当电脑B的I访问路径需要获知电脑B的最新I ...

  4. day16_python_1124

    圈子 圈子是互相影响,走着走着就散了. 道不同不相为谋,与人的认知相关. 圈子如何正向引导? 圈子能决定你的人生走向. 圈子能决定你的格局. 01 昨日内容回顾 序列化模块 将一个数据结构 ----& ...

  5. Python第一个GUI

    #!/usr/bin/python#coding=utf-8'''Created on 2017年11月2日 from home @author: James zhan ''' from functo ...

  6. 网络编程-day1

    一. *** C/S架构:客户端(client)/服务端(server)架构, B/S架构:浏览器(browser) / 服务端(server)架构 软件cs架构:浏览器,qq,微信,陌陌等等 硬件c ...

  7. SVN客户端使用

    1.在SVN服务器添加新的用户,复制SVN URL(路径/目录). 2.在客户端电脑上下载安装SVN客户端,配置hosts文件中的内容和SVN服务器的hosts文件内容一致. hosts路径:C:\W ...

  8. python 多个脚本

    1.增删改查haproxy.conf配置文件 1.查询输入:www.oldboy1.com 2.删除输入:{'backend': 'www.oldboy2.org','record':{'server ...

  9. Windows环境安装tesseract-ocr 4.00并配置环境变量

    最近要做文字识别,不让直接用别人的接口,所以只能尝试去用开源的类库.tesseract-ocr是惠普公司开源的一个文字识别项目,通过它可以快速搭建图文识别系统,帮助我们开发出能识别图片的ocr系统.因 ...

  10. (转)Web.config配置文件详解

    花了点时间整理了一下ASP.NET Web.config配置文件的基本使用方法.很适合新手参看,由于Web.config在使用很灵活,可以自定义一些节点.所以这里只介绍一些比较常用的节点. <? ...