公司现在用的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
这样插件就编写完成并使用了.