HDC调试需求开发（15万预算）,能者速来！>>>
App开发尽量考虑国际上、业界主流的技术架构；这样，未来的扩展、升级、维护，也都不用太担心；而且，基于cordova这些主流技术，国内外可利用的现成资源会非常丰富。
本案例由 全开源的 WeX5应用框架综合 提供； WeX5混合模式app开发，底层基于cordova/phonegap，所以开发本地插件只需要按照相应规范就可以。整个框架也好，插件也好，每行源代码都可自己修改，全免费，没有任何收费的地方。
主要内容：
一、 如何开发本地插件
二、 哪里有免费的插件资源
三、 插件如何安装到WeX5
四、 如何使用安装好的插件

五、 安装好的插件的App作为模版App


一、 如何开发本地插件
在实际的项目开发中，需要用到 cordova 的插件，进行各个不同平台的辅助开发，我们可以通过 plugins.cordova.io 对现有插件的搜索，以及安装。
插件的安装和使用，详细可以通过查阅 Cordova 的官网文档 The Command-Line Interface .
但是更多的时候，我们需要开发属于我们自己的插件。通过查看官方文档 Plugin Development Guide ，你会发现， 坑爹 啊，这文档怎么还是以前 2.x 的开发文档？？自己在编写插件的过程中，花了不少时间，在这里讲一下如何开发属于自己的插件。
通过命令行创建 app 应用之后，你会发现目录结构是这样子的：
1
2
3
4
5
6
7
8
9
10
├── platforms
| ├── android
| ├── ios
| ├── wp7
| └── ...
├── plugins
| ├── org.apache.cordova.device
| └── ...
├── config.xml
└── www

这里的 platforms 是我们应用支持的平台目录，plugins 是我们安装的插件目录，config.xml 是应用的配置信息（应用名称、描述等），www 是我们的 web 工程目录。
我们知道，Cordova 3.x 的插件机制改变了，只需要通过简单的命令行即可安装和删除所需要的插件，而我们自己开发的插件，最终是要添加到 plugins 目录中的。
那么，就让一起开始， 制作属于我们自己的插件 吧，这里以 ExtraInfo（获取 app 额外信息） 为例子，我们在当前目录下（当然可以放在别的目录下）创建 ExtraInfo 文件夹，先看下具体的目录结构：
1
2
3
4
5
6
7
8
9
ExtraInfo
├── src
| ├── android
| | └── ExtraInfo.java
| ├── ios
| └── ...
├── www
| └── ExtraInfo.js
└── plugin.xml

这里的 src 对应不同的平台，www 放我们的 javascript 文件，plugin.xml 是插件的配置文件。
先来看看 plugin.xml 的内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xmlversion="1.0"encoding="utf-8"?>
<pluginid="cn.net.wenzhixin.cordova"version="0.0.1"
xmlns=" http://apache.org/cordova/ns/plugins/1.0 "
xmlns:android=" http://schemas.android.com/apk/res/android ">
<name>ExtraInfo</name>
<description>Description</description>
<js-modulename="ExtraInfo"src="www/ExtraInfo.js">
<clobberstarget="cordova.plugins.ExtraInfo"/>
</js-module>
<platformname="android">
<config-fileparent="/*"target="res/xml/config.xml">
<featurename="ExtraInfo">
<paramname="android-package"value="cn.net.wenzhixin.cordova.ExtraInfo"/>
</feature>
</config-file>
<source-filesrc="src/android/ExtraInfo.java"target-dir="src/cn/net/wenzhixin/cordova"/>
</platform>
</plugin>

有几个关键的字段需要解释下： id: 插件的标识，即发布到 plugins.cordova.io 的 ID name：插件的名称 description：描述信息 js-module：对应我们的 javascript 文件，src 属性指向 www/ExtraInfo.js platform：支持的平台，这里仅仅用到了 android
这里是插件的配置信息，最后会添加到 res/xml/config.xml 文件中，并且将我们的 src/android/ExtraInfo.java，复制到 android 的 package 包中。 接下来，ExtraInfo.js 的内容很简单：
1
2
3
4
5
var exec = require('cordova/exec');

exports.getExtra = function(success, error) {
exec(success, error,"ExtraInfo","getExtra", []);
};

用过 Nodejs 或者了解过 AMD、CMD 的话（当然，没了解过也没关系），一定会觉得很熟悉。简单的说，require 用于引入我们的类，exports 用于导出我们的方法。这里对外公开了 getExtra 方法，以便我们在 app 中可以用到。
最后看 ExtraInfo.java 的内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
publicclassExtraInfoextendsCordovaPlugin {

publicbooleanexecute(String action, JSONArray args, CallbackContext callbackContext)
throwsJSONException {
Activity activity =this.cordova.getActivity();
if(action.equals("getExtra")) {
Intent i = activity.getIntent();
if(i.hasExtra(Intent.EXTRA_TEXT)) {
callbackContext.success(i.getStringExtra(Intent.EXTRA_TEXT));
}else{
callbackContext.error("");
}
returntrue;
}
returnfalse;
}
}

继承了 CordovaPlugin 类，并重写 execute 方法，使用 action 来判断我们在 javascript 中调用的方法名，成功的话调用callbackContext.success(message)，失败调用 callbackContext.error(message) 方法，分别对应 javascript 文件中的success 和 error 回调函数。
当然，这里只用到 android 平台，其他的平台也是一样的，ios 使用 object-c、wp7 使用 c# 语言，例子见 Plugin Development Guide 。
到了这里，我们的插件就编写完成了。可以通过下面的命令添加插件： cordova plugin add ExtraInfo #目录名称，也可以是 git 的地址
查看我们的 plugins 目录，会发现在该目录下已经华丽丽地生成我们自己的插件 cn.net.wenzhixin.cordova 了。
对了，好像把最关键的事情给忘记了，这里貌似还没提到我们应该如何在 app 中使用自己的插件呢。前面提到说按照文档来坑爹了，是因为使用 window.getExtra，会报 getExtra is not defined 的错误。
通过查看生成的文件信息，可以知道，应该这样使用我们的插件：
1
2
3
4
5
6
7
8
9
document.addEventListener('deviceready', function() {
var extraInfo = cordova.require('cn.net.wenzhixin.cordova.ExtraInfo');

extraInfo.getExtra(function(message) {
// alert(message);
}, function(message) {
// alert(message);
});
});

最后，像平时的开发，觉得及时更新文档还是比较重要的，虽然自己花了不少时间，不过至少更加明白了 Cordova 插件的原理，同时也希望本文可以帮到你。
二、 哪里有免费的插件资源
cordova官方插件库：http://plugins.cordova.io/#/
github搜索：https://github.com
baidu、google搜索
三、 插件如何安装到WeX5
这里以常用的条形码扫描为例介绍。
1. http://plugins.cordova.io/#/package/com.phonegap.plugins.barcodescanner下载好源代码，并把插件的目录名改为和id相同，这里是com.phonegap.plugins.barcodescanner。id可以打开源代码中的plugin.xml看，根节点 plugin的id属性值就是。
2. 把插件目录复制到model/Native/plugins目录下
四、 如何使用安装好的插件
自定义插件需要通过源代码模式使用，具体使用如下：
1. 在Native下新建App，选择 原代码模式 ，在新建向导第二页，新建App时可选择，编辑App不能修改
2. 在新建向导选择插件的页面，去掉“自动选择使用到的Cordova插件”选项，选择新增名字为BarcodeScanner的插件，系统会把插件整合到自己新建的App中，该App已经具有对应插件的能力。名字BarcodeScanner是在plugin.xml中的name节点上定义。
3. 在需要使用插件的页面对应的js中，如下代码引用：
1
require("cordova!com.phonegap.plugins.barcodescanner");

再参考插件的文档，书写对应的js。对于barcodesacnner，代码如下：
1
2
3
4
5
6
7
8
9
10
11
cordova.plugins.barcodeScanner.scan(
function(result) {
alert("We got a barcode\n"+
"Result: "+ result.text +"\n"+
"Format: "+ result.format +"\n"+
"Cancelled: "+ result.cancelled);
},
function(error) {
alert("Scanning failed: "+ error);
}
);

在.w对应的js中，对于barcodesanner，上面代码一般会写到某个组件的click事件上，而有的插件需要在页面初始化时执行，那可以写到model的onLoad事件中
4. 通过 打包服务器打包生成App ；由于新建的是源码模式，也可以自己把新建好的工程导入到ADT或者XCode中编译发布App。 打包服务器安装和下载
五、 安装好的插件的App作为模版App
Native/templates/normal/x5-std.apk.t Android 不选择 增强型浏览器使用的App模版
Native/templates/normal/x5.apk.t Adnroid 选择 增强型浏览器使用的App模版
Native/templates/normal/x5.ipa.t IOS的App模版
可以把上面步骤四生成的App替换到上面对应位置，例如andoird的就直接用x5.apk.t的名字，那后续不通过服务器打包模式打包也将有上面集成的插件能力。