Cordova自定义插件

现在混合式应用越来越流行，之前公司开发的一款是基于ionic的混合应用。总的来说，效果还不错，也能基本上实现一套代码，多个平台上跑，流畅性也还不错。总体代码框架和可扩展性也还不错。但是也遇到了一些问题：

网上大多数插件都不太适用，需要自己开发
当时引入部分es6的语法，结果导致代码在老的手机上不能跑起来，这里可以通过webpack打包的时候将es6的语法通过babel转化成es5语法。
由于插件和webview交互，通过js回调函数，很容易形成回调金字塔。

这里只说下android的cordova插件开发。

曾经做过几个:
1、是解压缩，压缩的插件。当时网上没有找到合适的。
2、下载文件的插件。
这里就说一个最简单，打印日志，或者说弹出一个Toast。只要能够调通，后面就是android或者ios的事情了。
开发插件 cordova提供了一个叫做 plugman 的框架，这个工具能帮助我们生成一些插件格式的目录。如果你很精通的话，其实可以随便找个别人的插件。按照他的格式，把代码删了自己写。

创建个插件

plugman create --name ToastPlugin  --plugin_id cordova-plugin-toast  --plugin_version 0.0.1

这里会得到一个目录结构，很简单，看下就明白了，主要有三个文件 .xml .js .java
先说下 .xml文件

<?xml version='1.0' encoding='utf-8'?>
<plugin id="cordova-plugin-toast" version="0.0.1" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
    <name>ToastPlugin</name>//这里是js调用的对象
    <js-module name="ToastPlugin" src="www/ToastPlugin.js">
        <clobbers target="cordova.plugins.ToastPlugin" />
    </js-module>   
    <platform name="android">   这里是android的路径配置，在添加插件的时候，会将当前的文件路径，复制到android工程中指定的路径。
            <config-file parent="/*" target="res/xml/config.xml">
                <feature name="ToastPlugin">
                    <param name="android-package" value="cordova-plugin-toast.ToastPlugin" />
                </feature>
            </config-file>

            <config-file parent="/*" target="AndroidManifest.xml" />
            <source-file src="src/android/ToastPlugin.java" target-dir="src/cordova/plugin/toast/ToastPlugin" />
    </platform>
</plugin>

.js文件

//引入exec这个cordova提供的执行函数
var exec = require('cordova/exec');

//下面随便暴露出一个对象，供外面调用。
var myChajianFun = {
    showToast:function(arg0,success,error){
    //这里的ToastPlugin是和.xml中feature对应，表示需要调用的文件  这里的ShowToast表示的是action。会当做参数传入到.java文件中。这样一个插件就可以实现多个功能
        exec(success, error, "ToastPlugin", "ShowToast", arg0);
    }
}
module.exports = myChajianFun;

看下.java文件，将插件安装之后，打开android studio可以看见插件的代码。一个ToastPlugin的类集成了CordovaPlugin实现其中的exec方法。这里的exec方法中的action就是上面的action。这样就基本上构成了一整个的插件。
写cordova插件不要急，其实很简单。通过xml文件约束需要向工程中添加的文件。比如将.js文件放在工程生成后的什么目录。.java放在生成目录。像android.mainfest中写入什么样的信息。.js文件中需要暴露出什么对象等等。

最后说下，我当时做的时候，就是有问题调用不了。最后发现是我的demo工程中，没有引入这两个文件

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="cordova_plugins.js"></script>

祝你顺利！

这里只说下android的cordova插件开发。

猜你喜欢