cordova 插件开发

Posted 2020-09-22

 公司现在用的ionic开发一些APP.中间涉及到自定义一些cordova 插件. 所以这里记录一下.这里主要参照一下这个  Android Cordova 插件开发之自定义插件生成安装包

1.搭建一个插件框架,这里使用的是plugman  安装那些就不说了.具体的 文档链接在这里

　　1.1搭建目录

 plugman create --name DialogPlugin  --plugin_id cordova-plugin-dialog  --plugin_version 0.0.1

 　　1.2添加平台代码,这里主要是安卓.

 plugman platform add --platform_name android

　  完成之后的目录结构如下:

　　DialogPlugin

　  　　—src

　　　　　　—android

　　　　　　　　CustomDialog.java

　　　　—www

　　　　　　dialog.js

　　　　plugin.xml

 

2. 添加代码

　　2.1 添加Java代码,CustomDialog.java 

public class CustomDialog extends CordovaPlugin{
    @Override
    public boolean execute(String action, CordovaArgs args, final CallbackContext callbackContext) throws JSONException {
        if("show".equals(action)){
            AlertDialog.Builder builder = new AlertDialog.Builder(cordova.getActivity());
            builder.setTitle("提示");
            builder.setMessage(args.getString(0));
            builder.setPositiveButton("确定", new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int which) {
                    dialog.dismiss();
                    callbackContext.success("点击了确定");
                }
            });
            builder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int which) {
                    dialog.dismiss();
                    callbackContext.error("点击了取消");
                }
            });
            builder.create().show();
            return true;
        }
        return super.execute(action, args, callbackContext);
    }

}

　　

　　2.2 添加js代码,

　　

  var exec = require( "cordova/exec" );
  module.exports = {
      show: function( content ) {
          exec(
              function( message ) {
                  console.log( message );
              },
              function( errorMessage ) {
                  console.log( errorMessage );
              },
              "CustomDialog",
              "show", [ content ] );
      }
  }

　　2.3 修改plugin.xml

<?xml version="1.0" encoding="UTF-8"?>
<!-- 插件的Id，安装后注册的Id为此id加js-moudle的name属性,即cordova_plugins.js里的id属性 -->
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
    id="cordova-plugin-dialog" version="0.0.1">
    <!-- 插件名称 -->
    <name>DialogPlugin</name>
    <!-- 插件描述 -->
    <description>Description</description>
    <!-- js文件的地址，安装后路径为：plugins/插件Id/src属性值 -->
    <js-module name="CustomDialog" src="www/dialog.js">
    <!-- 跟asserts/cordova_plugins.js中填clobbers的值一样 -->
        <clobbers target="alertDialog"/>
    </js-module>
    <!-- android -->
    <platform name="android">
        <config-file parent="/*" target="res/xml/config.xml">
        <!-- config-file中包含的这段会原封不动的插入到config.xml文件中 -->
            <feature name="CustomDialog">
                <param name="android-package" value="org.apache.cordova.dialog.CustomDialog"/>
            </feature>
        </config-file>
        <!-- 本地代码，有多个文件就写多个source-file，src对应本项目，target对应安装后的目录 -->
        <source-file src="src/android/CustomDialog.java" target-dir="src/org/apache/cordova/dialog"/>
    </platform>
    <!-- 其他平台的代码 -->
</plugin>

　3.添加package.json 文件,在cordova7.0版本以上需要这个文件.

　　3.1 使用命令

plugman createpackagejson #文件夹位置

　这样插件就编写完成了.

　最后目录结构

 

4.编写cordova项目测试.具体文档位置

　　4.1 创建一个cordova项目

cordova create hello com.example.hello HelloWorld

　　这里可能会报错,解决办法使用Yarn 安装.

sudo npm install -g yarn
yarn install -g cordova

　　这样就可以了.

　　4.2 添加平台

cordova platform add android  

　　4.2 添加插件,就是刚才我们写的插件,这里使用本地路径添加.

cordova plugins add <插件包路径>

　　4.3 使用插件,index.js文件中使用.

   alertDialog.show("install dialog plugin success!!");

　　4.4 运行cordova程序.

cordova run android

　　这样插件就编写完成并使用了.