Ionic自定义插件开发(附Demo)

前言
ionic是目前比较火的一个移动端混合开发框架.其中插件开发是其实现混合开发的主要方式.这里我就大概记录下自己自定义插件的一些心得.如有不好之处,还望各位看官指出。

 

 

创建自定义插件


1.安装plugman,该工具主要用于创建一个自定义的插件

npm install -g plugman

2.创建一个插件框架---例如:plugman creat --name 插件名字 --plugin_id 插件id --plugin_version 插件版本号,插件可创建在磁盘的任意位置

plugman create --name MyPlugin --plugin_id com.plugin.myPlugin --plugin_version 0.0.1

使用命令创建完成之后会生成如下文件

Ionic自定义插件开发(附Demo)_第1张图片

3.添加平台支持,常用的有两种平台,android和ios

plugman platform add --platform_name android

如果需要改成添加ios平台,只需要把android改成ios即可,当然,也可以将这两个平台全部添加,添加平台之后,会新增如何文件,如图

Ionic自定义插件开发(附Demo)_第2张图片

至此自定义一个插件到此告一段落.

 

 

自定义插件文件作用说明

1.MyPlugin.js作用是通过js暴露插件的功能给ionic,这个我们就能够在ionic中调用java方法

Ionic自定义插件开发(附Demo)_第3张图片

2.MyPlugin.java主要用于存放java代码,我们需要调用的java方法都需要放在这里面,

自定义插件需要继承CordovaPlugin类,并且覆盖execute方法。我们简单看看这个类是什么意思,主要看方法execute(String action, JSONArray args, CallbackContext callbackContext)。 参数action是用来判断执行哪个方法,args是json格式的参数,callbackContext响应返回结果。如图

Ionic自定义插件开发(附Demo)_第4张图片

3.package.json这个不需要关注,在插件目录下使用npm init即可生成,这个一般添加插件的时候可能需要用到,具体作用我这里就不阐述了,可以自行百度下.

4.plugin.xml主要用来关联插件中的各个文件,一般不需要修改,如有新增so库或者jar包,需要在此文件中声明.如我在插件中添加自定义的jar包.

Ionic自定义插件开发(附Demo)_第5张图片

则需要在plugin.xml中加上

这部分是插件文件作用说明.

 

 

插件的安装和插件的卸载

1.安装插件

自定义好插件之后,如果我们需要使用插件,那么还需要在项目中添加插件,添加插件的命令如下

cordova plugin add E:\MyPlugin

其中 E:\MyPlugin是你的自定义插件生成路径.执行插件添加后会在项目中生成一个plugin的文件,里面就会出现我们刚添加的插件

Ionic自定义插件开发(附Demo)_第6张图片

到这一步我们自定义的插件就已经添加好了.

2.卸载插件

在开发过程中,我们难免要去修改之前的插件,这个时候如有对插件进行修改,一定要先卸载之前的这个插件,然后再次重新执行安装的方法,生成的插件才会生效.卸载插件我们是根据插件的名称来卸载的,这时候需要先查看已经安装的插件有哪些,查看已安装插件命令

cordova plugin   该命令用于查看项目已安装插件

Ionic自定义插件开发(附Demo)_第7张图片

下面列出的就是我们该ionic项目已有的插件

这时候我们就可以通过插件的名称来卸载已经安装的插件了,命令如下

cordova plugin remove com.plugin.myPlugin 0.0.1; "MyPlugin"

remove后面就是我们需要卸载的插件

到此插件的安装和卸载到此结束

 

 

自定义插件开发需要注意的事项:

1.安装插件时如果提示插件找不到package.json文件,需要切换自定义插件目录下,使用命令生成该文件,命令如下

npm init

2.安装插件之后对项目进行打包apk操作提示config.xml文件错误,原因是你的安卓版本太高,需使用如下命令进行android版本替换

ionic cordova platform add [email protected] (安装指定版本android)

然后删除项目下的platform平台,重新android或者ios平台的添加

3.修改插件使记得一定要修改插件本身,不要对安装好的插件文件进行修改,因为那样操作是无效的

Ionic自定义插件开发(附Demo)_第8张图片

4.插件修改后一定要记得先卸载再重新安装,否则修改的插件运行无效

我会把demo和自定义的插件文件上传到附件中,有需要的可自行下载查阅.

本博客有参考如下博客:

ionic3添加android平台使用指定版本(解决没有升级Android Studio3.0的时候添加平台过高报错)

ionic2 自定义cordova插件开发以及使用 (Android)

参考Demo下载地址:

自定义插件Demo附件

自定义插件附件

你可能感兴趣的:(Ionic自定义插件开发(附Demo))