cordova 插件開發

 公司現在用的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

　　這樣插件就編寫完成並使用了.