ionic3 自定义插件的开发和调用(包含jar包调用,文件结构详解)
来源:互联网 发布:淘宝客服兼职 招聘吗 编辑:程序博客网 时间:2024/06/05 02:40
由于项目需要调用别人写好的jar包,但是ionic中又无法直接使用,所以想到了去写一个插件,阅读了网上的很多材料,收获很大,也踩了不少坑,现在将成果跟大家分享一下!
一、准备工作
在创建插件的时候需要用到plugman插件,所以我们先在cmd中通过npm进行安装,如下:
npm install -g plugman
二、开发插件
1.创建插件
这时候需要我们用到之前安装的plugman插件了,在cmd中插入命令,命令格式如下
plugman create -name <plugmanName> --plugin_id <pluginID> --plugin_version <pluginVersion> [--path <directory>] [--variable NAME=VALUE]说明:
- <plugmanName> 为插件的名字,它也决定了文件夹的命名
- <pluginID> 为插件的id,比如扫描二维码插件的id为:phonegap-plugin-barcodescanner (需要注意id一般都是小写字母)
- <pluginVersion> 为插件的版本号,例如:0.0.1
- <directory> 为插件的创建目录,如果不指定默认为当前目录
- --variable Name=value 为一些额外的描述,如description、Author
plugman create -name TestPlugin --plugin_id cordova-plugin-test --plugin_version 1.0.0
plugman create -name TestPlugin --plugin_id cordova-plugin-test --plugin_version 1.0.0 --path d:\ --variable description="This is a plugin" --variable Author="wu ming"注意后面不要加中括号哦,上面加中阔号是想说明这些信息不重要
2.在创建的插件中添加android平台
cd TestPluginplugman platform add -platform_name android创建完成后的目录结构如下:
从目录结构中不难看出,java文件是面向android项目的,类继承了CordovaPlugin,重写其中的execute()方法,在方法中可以调用js传来的action值,匹配相应的方法,在方法中可以调用jar包,也可以调用底层的方法;而js文件则是面向ionic项目的,作为中间件它将java中的方法暴露给H5,供其调用;plugin.xml文件则可以完成一些配置工作。
这里我来费一些口舌,着重讲解一下plugin.xml文件,文件内容如下:
<?xml version='1.0' encoding='utf-8'?><plugin id="cordova-plugin-test" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android"> <name>TestPlugin</name> <js-module name="TestPlugin" src="www/TestPlugin.js"> <clobbers target="TestPlugin" /> </js-module> <platform name="android"> <config-file parent="/*" target="res/xml/config.xml"> <feature name="TestPlugin"> <param name="android-package" value="cordova.plugin.test.TestPlugin" /> </feature> </config-file> <config-file parent="/*" target="AndroidManifest.xml"> </config-file> <source-file src="src/android/TestPlugin.java" target-dir="src/cordova/plugin/test" /> </platform></plugin>
plugin.xml文件详解
- <plugin>元素中包含了id和version版本号,<name>是插件的名字,可能还会有其他的一些信息,如description(插件描述)、license(证书)、keywords(关键字)、repo(仓库地址)、issue(问题地址)等,这取决于你创建项目的时候有没有在最后添加这些信息。
- <js-module>元素中的name表示js的文件名,src是js文件的相对路径。这个标签可以在应用开始时自动以<script>元素的形式添加到项目的起始页中,通过在<js-module>中列出插件,可以减少开发者的工作。<clobbers>元素指明了js文件面向项目可以调用的对象,在上面的文件中通过TestPlugin向项目公开js接口。在程序中可以在import和@IonicPage之间加入declare let TestPlugin:any之后,通过TestPlugin调用js中exports的方法。
- <platform>它定义了某个移动平台专用的设置,包括了相关native代码的设置。可以有一个或多个平台,如android、ios、browser、wp等。
- <config-file parent="/*" target="res/xml/config.xml">,在config-file这个元素中定义了在插件安装过程中的改动。在本例中,一个叫TestPlugin的特性添加到Android项目的config.xml文件中,指向java类cordova.plugin.test.TestPlugin。
- <config-file parent="/*" target="AndroidManifest.xml">这里会向AndroidManifest.xml文件中添加配置,可以在这个元素里面添加权限,接受广播等配置,它在应用运行时会自动加入到AndroidManifest.xml文件中。
- <source-file>元素指出了一个或多个Android native源代码文件,当插件安装时由CLI安装。上面的例子中位于src/android目录下的TestPlugin.java文件会在应用运行的时候复制到Cordova项目的src/cordova/plugin/test目录下(我在这里已经将target-dir改过了,最开始创建时它会是src/cordova-plugin-test,也就是src后面接上你的id)。因此即使在不同package下的java文件我们都可以放到插件中android的目录下,只需要在<source-file>中将java文件指明在项目中相应的目录就可以了。
3.插入jar包
我们可以直接把jar包放在src\android目录下,也可以在android目录下创建libs目录。添加jar包后需要在plugin.xml文件中加入如下配置:
<source-file src="src/android/test.jar" target-dir="libs"/>这段代码需要放在<platform>元素之间,它表示插件src/android目录下的test.jar文件在应用运行的时候复制到cordova项目的libs文件夹下。
我们在使用jar包的时候可以在java文件中直接引入,调用其中的方法。如下实例中,test.jar包里包含一个Operation类,里面有一个public static void add(int a,int b)的静态方法,我们可以如下调用:
TestPlugin.java
package cordova.plugin.test;import org.apache.cordova.CordovaPlugin;import org.apache.cordova.CallbackContext;import org.json.JSONArray;import org.json.JSONException;import org.json.JSONObject;import android.widget.Toast;import com.kevin.test.Operation;/** * 继承CordovaPlugin接口,重写execute方法 */public class TestPlugin extends CordovaPlugin { /** * action:js传来的参数,通过匹配执行相应的方法 * args:js传来的参数,以JSONArray格式,通过get方法获取值,它携带了从H5中传递过来的参数 * callbackContext:java提供的接口供回掉给H5 */ @Override public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException { if(action.equals("add")){ int a=args.getInt(0); int b=args.getInt(1); int result=Operation.Add(a,b); callbackContext.success(result); return true; }else if(action.equals("showToast")){ String msg=args.getString(0); Toast.makeText(cordova.getActivity(), msg, Toast.LENGTH_SHORT).show(); callbackContext.success("success" + msg); return true; } return false; }}
TestPlugin.js
var exec = require('cordova/exec');exports.add = function(arg0, arg1, success, error) { //arg0:成功回调 //arg1:失败回调 //arg2:将要调用类配置的标志 //arg3:调用的原生方法名 //arg4:参数,json格式 exec(success, error, 'TestPlugin', 'add', [arg0, arg1]);};exports.showToast = function(arg0, success, error) { exec(success, error, 'TestPlugin', 'showToast', [arg0]);};
4.创建package.json文件
这是一个非常重要的环节,如果缺少json文件在安装插件的时候会报出如下的错误信息:
> cordova plugin add E:\TestPlugin --saveError: Invalid Plugin! E:\TestPlugin needs a valid package.json[ERROR] An error occurred while running cordova plugin add E:\TestPlugin --save (exit code 1).这是在提醒我们插件中缺少package.json文件,添加方法,我觉得很好用的一种是将cmd定位到插件目录,执行
npm init之后会提醒你添加name、version等信息,如果不想填可以直接回车跳过,最后输入y完成json文件的插入,到此,插件的开发结束。
三、安装插件
我的插件位于E:\TestPlugin,将cmd进入到ionic项目的目录下,执行插件安装命令
ionic cordova plugin add E:\TestPlugin注意ionic3相对于ionic2多了一个cordova。
执行完成后在plugins文件夹中就有了自己定义的插件,如果想要卸载的话执行ionic cordova plugin remove plugin_id,(remove后面是插件的id)
例如:
ionic cordova plugin remove cordova-plugin-test
四、插件的使用
在ts文件中使用插件首先需要在import和@IonicPage之间声明变量 declare let TestPlugin:any;,如下
import { Component,ViewChild } from '@angular/core';import { IonicPage, NavController, NavParams,Nav } from 'ionic-angular';declare let TestPlugin: any; //对变量进行声明@IonicPage()@Component({ selector: 'page-menu', templateUrl: 'menu.html',})export class MenuPage {
之后就可以通过TestPlugin对TestPlugin.js中的方法进行调用了,代码如下
add(){ var a=1; var b=2; TestPlugin.add(a,b,(data)=>{ alert(data); },(error)=>{ alert(error); }); } showToast(){ TestPlugin.showToast("消息",(data)=>{ alert(data); },(error)=>{ alert(error); }); }
到此插件开发和调用完成,多看一看别人已经写好的插件,他们之间的调用关系,目录结构之类的对自己帮助也很大。附上官网的自定义插件地址:点击打开链接
自定义插件下载地址: demo下载
- ionic3 自定义插件的开发和调用(包含jar包调用,文件结构详解)
- ionic3自定义插件以及调用
- Cordova开发自定义插件(详细篇含jar包调用)
- Cordova 自定义插件,包含有Jar包的插件
- Android Java调用.so和.a、Unity C#调用jar插件和C++开发的插件
- Android下自定义的jar库文件编译和调用
- Android下自定义的jar库文件编译和调用
- go的自定义结构跨包调用
- Kettle调用Java文件(Jar包)
- Kettle调用Java文件(Jar包)
- Kettle调用Java文件(Jar包)
- jar包调用jar包内部和外部的配置文件
- jar包调用jar包内部和外部的配置文件
- jar包调用jar包内部和外部的配置文件
- java程序调用exe文件和调用自己打的jar包或其他外部jar包
- Eclipse插件开发中对于Jar包和类文件引用的处理(彻底解决插件开发中的NoClassDefFoundError问题)
- Eclipse插件开发中对于Jar包和类文件引用的处理(彻底解决插件开发中的NoClassDefFoundError问题)
- Kettle中调用用户自定义的jar包
- 深入浅出理解QTimeLine类
- 如何使用JS筛选JSON数据
- 第二天的学习
- shell介绍、命令历史、命令补全和别名、通配符和输入输出重定向
- jquery文件上传控件 Uploadify
- ionic3 自定义插件的开发和调用(包含jar包调用,文件结构详解)
- 数字图像的梯度概念(the gradient of the image)
- 系统间通信方式之(ActiveMQ的使用性能优化之冰火两重天5)(十六)
- RecyclerView 隐藏部分分割线
- 输入不同对象的姓名、性别、年龄、体重和住址等信息,并输出显示
- React+Nginx页面刷新报错问题
- 实现Banner,TabLayout,XlistView
- FFmpeg RGB数据添加BMP头
- Python中lxml模块的安装