当前位置:   article > 正文

ionic3 自定义cordova插件的开发和调用(包含jar包调用,文件结构详解)_ionic4 ordova-plugin-sqlite api

ionic4 ordova-plugin-sqlite api

 由于项目需要调用别人写好的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平台

  1. cd TestPlugin
  2.  
  3. plugman platform add -platform_name android


        创建完成后的目录结构如下:

 

        从目录结构中不难看出,java文件是面向android项目的,类继承了CordovaPlugin,重写其中的execute()方法,在方法中可以调用js传来的action值,匹配相应的方法,在方法中可以调用jar包,也可以调用底层的方法;而js文件则是面向ionic项目的,作为中间件它将java中的方法暴露给H5,供其调用;plugin.xml文件则可以完成一些配置工作。

        这里我来费一些口舌,着重讲解一下plugin.xml文件,文件内容如下:

  1. <?xml version='1.0' encoding='utf-8'?>
  2. <plugin id="cordova-plugin-test" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0"
  3. xmlns:android="http://schemas.android.com/apk/res/android">
  4. <name>TestPlugin</name>
  5. <js-module name="TestPlugin" src="www/TestPlugin.js">
  6. <clobbers target="TestPlugin" />
  7. </js-module>
  8. <platform name="android">
  9. <config-file parent="/*" target="res/xml/config.xml">
  10. <feature name="TestPlugin">
  11. <param name="android-package" value="cordova.plugin.test.TestPlugin" />
  12. </feature>
  13. </config-file>
  14. <config-file parent="/*" target="AndroidManifest.xml">
  15. </config-file>
  16. <source-file src="src/android/TestPlugin.java" target-dir="src/cordova/plugin/test" />
  17. </platform>
  18. </plugin>



        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

  1. package cordova.plugin.test;
  2. import org.apache.cordova.CordovaPlugin;
  3. import org.apache.cordova.CallbackContext;
  4. import org.json.JSONArray;
  5. import org.json.JSONException;
  6. import org.json.JSONObject;
  7. import android.widget.Toast;
  8. import com.kevin.test.Operation;
  9. /**
  10. * 继承CordovaPlugin接口,重写execute方法
  11. */
  12. public class TestPlugin extends CordovaPlugin {
  13. /**
  14. * action:js传来的参数,通过匹配执行相应的方法
  15. * args:js传来的参数,以JSONArray格式,通过get方法获取值,它携带了从H5中传递过来的参数
  16. * callbackContext:java提供的接口供回掉给H5
  17. */
  18. @Override
  19. public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
  20. if(action.equals("add")){
  21. int a=args.getInt(0);
  22. int b=args.getInt(1);
  23. int result=Operation.Add(a,b);
  24. callbackContext.success(result);
  25. return true;
  26. }else if(action.equals("showToast")){
  27. String msg=args.getString(0);
  28. Toast.makeText(cordova.getActivity(), msg, Toast.LENGTH_SHORT).show();
  29. callbackContext.success("success" + msg);
  30. return true;
  31. }
  32. return false;
  33. }
  34. }

TestPlugin.js

  1. var exec = require('cordova/exec');
  2.  
  3. exports.add = function(arg0, arg1, success, error) {
  4.     //arg0:成功回调
  5.     //arg1:失败回调
  6.     //arg2:将要调用类配置的标志
  7.     //arg3:调用的原生方法名
  8.     //arg4:参数,json格式
  9.     exec(success, error, 'TestPlugin', 'add', [arg0, arg1]);
  10. };
  11. exports.showToast = function(arg0, success, error) {
  12.     exec(success, error, 'TestPlugin', 'showToast', [arg0]);
  13. };


        4.创建package.json文件
        这是一个非常重要的环节,如果缺少json文件在安装插件的时候会报出如下的错误信息:

  1. > cordova plugin add E:\TestPlugin --save
  2. Error: Invalid Plugin! E:\TestPlugin needs a valid package.json
  3.  
  4. [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;,如下

  1. import { Component,ViewChild } from '@angular/core';
  2. import { IonicPage, NavController, NavParams,Nav } from 'ionic-angular';
  3.  
  4. declare let TestPlugin: any;  //对变量进行声明
  5.  
  6. @IonicPage()
  7. @Component({
  8.   selector: 'page-menu',
  9.   templateUrl: 'menu.html',
  10. })
  11. export class MenuPage {
  12.           之后就可以通过TestPluginTestPlugin.js中的方法进行调用了,代码如下
  13.   add(){
  14.     var a=1;
  15.     var b=2;
  16.     TestPlugin.add(a,b,(data)=>{
  17.       alert(data);
  18.     },(error)=>{
  19.       alert(error);
  20.     });
  21.   }
  22.   showToast(){
  23.     TestPlugin.showToast("消息",(data)=>{
  24.       alert(data);
  25.     },(error)=>{
  26.       alert(error);
  27.     });
  28.   }

本文字转载自 仲夏夜之恋 博主 以防链接丢失特转载保存
原文链接:https://blog.csdn.net/WTunique/article/details/78543724

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/一键难忘520/article/detail/748913
推荐阅读
相关标签
  

闽ICP备14008679号