Cordova自定义插件实战

Posted by one_cup on 2016-12-12

#Cordova自定义插件实战#

使用前提

  1. 已经能够实现原有插件的使用。
  2. 稍微熟悉JS语言（其实我也不会）

  3. 创建一个Cordova的Demo。

    自定义插件实战

    准备工具

  4. 用Cordova在Dos中创建一个Demo，之后将此Demo在Eclipse中引入，会发现多了两个文件CordovaLib和MainActivity。

  5. 新建一个text的Android工程，将MainActivity中src目录下的org.apache.cordova包，assets目录下的www文件，和res目录下的XML文件夹拷到新建text工程的相应位置。
  6. 将Cordova作为text外部依赖库。

Toast

先写一个比较简单的插件，方便大家了解这个插件化的编写流程，只要把套路记住了，其他的都好弄。
先说一下在写插件的过程中我们需要经常接触的四个文件。

  1. 插件的JAVA文件—位于src目录下–自己写
  2. 插件的JS文件—位于assets/www/plugins目录下–自己写
  3. Cordova_plugins.js—位于assets目录下–插件的配置文件
  4. Config.xml—位于res/xml目录下–添加配置

在自定义插件的过程中我们会经常接触的就是这四个文件，接下来就是套路了。

编写Java文件：在src目录下新建一个包，包名随便起，我的是com.pactera.plugin，之后在里面新建一个Toast类。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   public class Toast extends CordovaPlugin{
CallbackContext mCallbackContext;
@Override
public boolean execute(String action, JSONArray args,
		CallbackContext callbackContext) throws JSONException {
	// TODO Auto-generated method stub
	if("showToast".equals(action)){
	showToast(args.getString(0),args.getInt(1));
	}
	return true;
}
private void showToast(String text, int type) {
	android.widget.Toast.makeText(cordova.getActivity(), text, type).show();
}
}

首先继承CordovaPlugin这个类之后重写execute方法，三个参数，action为html中调用的方法名，args为方法参数，callbackContext为回调，先不用管那个多，首先对action进行判断，如果action所对应的方法名与我们定义的方法名相同的话就，就执行弹出一个Toast的动作，在if（）{}大括号中随便写，我只不过是为了方便就写的与方法名相同，其实不用。关于返回值true的时候表示此插件可用，false为不可用，个人目前没有感觉在实际中有什么应用。现在一个Toast插件的Java代码就写好了，唯一值得注意的就是if（）括号中的方法名。

编写JS文件：
在assets/www/plugins目录下新建一个文件夹，名字随意起，我的是cordova-plugin-toast，之后在文件夹内新建一个toast.js文件，代码。

cordova.define("cordova-plugin-toast.toast", function(require, exports, module) {
var exec = require('cordova/exec');
module.exports ={
showToast:function (content,type) {
     exec(null, null, "Toasts", "showToast", [content,type]);
}
};
});

这是一个最精简的一个JS文件，不过也囊括了一个插件的JS文件的必备要素。

  1. 第一行，” cordova.define(“cordova-plugin-toast.toast”, function(require, exports, module) { “ 这就是套路，不用想为什么这么写，因为我也不知道，值得注意的就是在cordova.define()括号中添加的是插件js文件的文件夹名和js文件名。
  2. 第二行，第三行，抄过去进行，必须写。
  3. 第四行，其中showToast为我们自己定义的在html调用的方法名。冒号后面的function的括号中定义在html中调用本地Toast中需要的参数，大括号中也是固定写法 exec括号中有五个参数，分别是：成功回调，失败回调，feature name，方法名，参数。，其中feature name可能不知道是什么无所谓，先放着，方法名就是showToast，参数就是function中的参数，同时也对应着java代码中JSONArray args。

配置cordova_plugins.js

在module.exports中添加

{
    "file": "plugins/cordova-plugin-toast/toast.js",
    "id": "cordova-plugin-toast.toast",
    "clobbers": [
          "navigator.webtoast"
    ]
}

把上面的复制粘贴一下，将file中的改为插件的JS文件路径，id改为插件的文件夹名和文件名，对应着JS文件中的Cordova.define括号中内容，clobbers中内容随便写，这个是html中调用方法时的调用头部（先这么叫着吧，因为我也没学过JS，不知道专业怎么叫），注意上下文的逗号。

在module.exports.metadata中添加

"cordova-plugin-toast":"1.0.0"

“文件夹名” ：”版本号”，版本号随便写，目前不知道在未来有什么作用，文件夹名就是JS文件的文件夹名，这个cordova_plugins也配合完成。

配置config.xml
在文件中适当的位置添加

  <feature name="Toasts">
<param name="android-package" value="com.pactera.plugin.Toast" />
   </feature>

直接把其中的一个复制粘贴，feature name随便写，不过要与JS文件中的第三个参数保持一致，param name统一写 android-package，value中则对应的是JAVA文件的包名和类名。

套路

整体的编写流程已经介绍一遍了，其中比较重要的地方都加粗标记了一下，不过这么看起来好像有点乱，而且也没有体现出来套路是什么。现在就把套路告诉大家，只要掌握这个基本的套路写一个简单的插件完全没有问题。

  1. JAVA文件：”方法名”.equals(action),做判断。args中存放html给你的参数。
  2. JS文件：define（”JS文件夹名.文件名”），方法名 ：function（参数）{exec（成功，失败，”feature name”，”方法名”，[参数]）}
  3. cordova_plugins.js:file:”js文件的路径”，id：”JS文件夹名.文件名”，clobbers：”方法调用头”，metadata中添加”JS文件夹名”：”版本号”。
  4. config.xml:feature name=”随便写”，与JS文件中保持一致，value为”JAVA包名.类名”

在编写的过程中一共就这四条，只要这四条中所对应的内容都匹配的上，那么这个插件就没有问题。

验证

这运行之前还有两点需要做，首先在新建的Android的项目中把MainActivity中的内容进行一点的更改，将MainActivity继承自CordovaActivity，将onCreate修饰符改为public，去掉setContentview改为loadUrl(“file:///android_asset/www/index.html”);就是加载assets下index.xml文件，其次在index.xml文件中写一个button，onclick方法名随便写，之后写一个function方法。

function showToast(){
           navigator.webtoast.showToast("测试Toast成功",0);
        }

第一个showToast为button的onclick所对应的方法名。大括号中的就是在cordova_plugins中定义的方法调用头和在JS中定义的方法名，参数也随便写，不过要注意就是也JAVA中的参数相对应。
看下效果。

可以看到这就是一个简单的Toast插件效果，个人觉得按照套路把房子搭好，之后你愿意放什么就放什么。如果有不明白或者有有问题的可以留言。

Call&SmS

接下来如果你的Toast插件已经编写完成了，并且对于整个套路有了一定的熟悉，肯定想验证一下自己学到的东西到底有没有真正的掌握，那么来做个测试吧，尝试编写插件来实现html调用本地的电话和短信，套路都是一样的主要差别就在JAVA代码中，这也是编写插件的最主要的地方，先看一下效果。


可以看出来效果还是可以的就是实现简单的调用而已。大家可以自行尝试一下，并不难。

拓展

关于拓展我想写的有两点：

  1. 关于html中接受回调，这个需要做的就是在Java代码中CallbackContext的两个方法，succsee和error，其中可以传递多种参数类型，之后要做的就是在JS代码中function方法的参数内添加两个参数，分别是成功和失败回掉调， exec中也要在相应的位置上写上相同名称的回调。最后在html中的方法内同样要写上成功和失败回调的function方法，注意参数的位置顺序。这个就自己尝试吧，不上代码了。
  2. 关于onActivityResult的执行：通常会出现这样的情况，html中一个动作，通过插件开启另一个Activity之后需要回传数据，如果按照之前的startActivityForResult方法的话在插件的JAVA类中重写onActivityResult中是无法接受回调的，正确启动另一个Activity的姿势是
    cordova.startActivityForResult(command, intent, requestCode);
    第一个参数是关键就是当前的Plugin对象，这样onActivityResult才会收到回调。

    总结

    之前一直在找工作，很久没有更新博客了，这篇博客算是新工作的第一个任务的阶段性总结吧，公司要求使用Cordova来实现很多的html交互，只能去学一些这方面的知识。新工作目前感觉还可以，接下来的半年应该都是自己充实的过程吧，感觉最近自己有点浮躁了，或者说安逸的生活不能激励我，鞭策我前进，找到工作就没有之前那么努力学习了，这是病得治，准备合理安排自己的工作时间和休息时间，坚持半年，保持良好的学习态度和高昂的学习热情，未来会更好的。

本人水平有限，对于JS，html之类的东西不是很了解，这篇博客内容主要就是那四个套路方式，用好就可以其他的问我我也不会，如果按照我的套路在写插件的过程中出现什么问题可以留言，或者你有一个想要实现的插件效果，也可以留言，正好我也需要锻炼，共同进步！

FEATURED TAGS
FRIENDS