Cordova提供了一組設(shè)備相關(guān)的API蒲障，通過(guò)這組API锡宋，移動(dòng)應(yīng)用能夠以JavaScript訪問(wèn)原生的設(shè)備功能，如攝像頭媳否、麥克風(fēng)等栅螟。Cordova還提供了一組統(tǒng)一的JavaScript類庫(kù)，以及為這些類庫(kù)所用的設(shè)備相關(guān)的原生后臺(tái)代碼篱竭。
一力图、安裝cordova
npm install -g cordova
二、創(chuàng)建項(xiàng)目
cordova create hello com.blue.sky.hybrid.app.hello HelloWorld
三掺逼、添加平臺(tái)支持
cd hello
cordova platform add android`（前提是系統(tǒng)上面要安裝了對(duì)應(yīng)移動(dòng)系統(tǒng)的SDK）
四吃媒、自定義插件
學(xué)了這么多, 準(zhǔn)備自己寫個(gè)自定義插件，變?cè)诿钚休斎耄篶ordova plugin create com.blue.sky.test 發(fā)現(xiàn)不管用. 查閱資料后, 發(fā)現(xiàn)沒(méi)有這個(gè)命令, 網(wǎng)上大家都是手動(dòng)創(chuàng)建目錄, 覺(jué)得太麻煩, 于是用grunt 寫了一個(gè)命令通過(guò)模板生成cordova plugin骨架吕喘。
》》網(wǎng)上的方法大概是這樣：
cordova3.X之后,插件不能自己手動(dòng)添加了,手動(dòng)添加后,只要cordova build,數(shù)據(jù)立即被抹去.
因此,3.X后要添加插件,需要用 cordova plungin add "你本地插件的路徑" 的方式來(lái)添加插件,.
1.新建一個(gè)文件夾,命名為你插件的名字,如TestPlugin
2.在文件夾里再新建2個(gè)文件夾和1個(gè)文件.兩個(gè)文件夾分別是src和www.其中src中放你插件的java代碼,www中放對(duì)應(yīng)的js文件;與src和www文件夾同級(jí),建立plugin.xml
》》運(yùn)用grunt模板生成cordova plugin骨架
思路：cordova plugin 主要是三個(gè)文件：
1赘那、繼承cordovaActivity的Native實(shí)現(xiàn)類
2、編寫javascript代碼
3氯质、編寫plugin.xml配置文件
既然是這樣, 便可以運(yùn)用grunt通過(guò)模板生成cordova plugin骨架募舟。
首先看一下項(xiàng)目代碼結(jié)構(gòu)：
第一步：制定cordova plugin模板
模板內(nèi)容如下：
**src/android/template.txt **繼承cordovaActivity的Native實(shí)現(xiàn)類
package <%=pkgName%>;
import java.util.TimeZone;
import org.apache.cordova.CordovaWebView;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CordovaInterface;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import android.provider.Settings;
public class <%=className%> extends CordovaPlugin {
public <%=className%>() {
}
/**
* Executes the request and returns PluginResult.
*
* @param action The action to execute.
* @param args JSONArry of arguments for the plugin.
* @param callbackContext The callback id used when calling back into JavaScript.
* @return True if the action was valid, false if not.
*/
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
///TODO 自定義實(shí)現(xiàn)
return true;
}
}
**www/template.txt **javascript 模板
var channel = require('cordova/channel'),
utils = require('cordova/utils'),
exec = require('cordova/exec'),
cordova = require('cordova');
function <%=className%>() {
}
module.exports = new <%=className%>();
plugin.xml 插件編譯生成android 項(xiàng)目代碼配置文件
<?xml version="1.0" encoding="UTF-8"?>
<!--插件id號(hào)，與package.json保持一致 版本號(hào)闻察，與package.json保持一致-->
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
id="<%=pkgName%>" version="0.1">
<!--插件在cordova下的名稱拱礁，Test.js中exec的接口名稱，保持一致-->
<name><%=className%></name>
<description>Cordova Plugin</description>
<license>Apache 2.0</license>
<!--與package.json保持一致-->
<keywords></keywords>
<repo></repo>
<issue></issue>
<!--插件js接口文件配置信息蜓陌，插件在android-->
<!--src="www/Test.js"為已經(jīng)寫好的js文件路徑觅彰，與js中調(diào)用的類名保持一致-->
<js-module src="www/<%=className%>.js" name="<%=className%>">
<!--插件在js中調(diào)用的類名-->
<clobbers target="<%=className%>" />
</js-module>
<!-- android -->
<platform name="android">
<config-file target="res/xml/config.xml" parent="/*">
<!--插件在java端的接口名稱，與之前文件中的接口名稱保持一致-->
<feature name="<%=className%>">
<!--該插件接口對(duì)應(yīng)的java代碼路徑-->
<param name="android-package" value="<%=pkgName%><%=className%>"/>
</feature>
</config-file>
<!--該插件需要的權(quán)限申明钮热，根據(jù)需要自行定義-->
<config-file target="AndroidManifest.xml" parent="/*">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
</config-file>
<!--源文件的路徑和目標(biāo)文件路徑填抬，src為已經(jīng)編寫好的java代碼路徑，target-dir為需要生成的android工程中該java源碼路徑隧期，與上面的java代碼路徑保持一致-->
<source-file src="<%=sourceSrc%>" target-dir="<%=targetDir%>"/>
</platform>
</plugin>
運(yùn)用Node.js grunt根據(jù)模板生成骨架代碼：
grunt plugin:create:com.blue.sky.test:Test
module.exports = function(grunt) {
grunt.registerTask('plugin:create', '自定義插件 參數(shù)一 包名 參數(shù)二 插件類名', function (arg1, arg2, arg3) {
grunt.log.writeln(">>>>length:" + arguments.length);
if (arguments.length === 2) {
var pkgName = arg1;
var fileName = arg2;
var platform = arg3 || "android";
var pluginDir = "temp/" + arg1;
var tplNativeCode = "template/src/" + platform + "/template.js";
var tplJSCode = "template/www/template.js";
var tplPlugin = "template/plugin.xml";
var srcFileName = pluginDir + "/src/" + platform + "/" + arg2 + ".java";
var jsFileName = pluginDir + "/www/" + arg2 + ".js";
var configFileName = pluginDir + "/plugin.xml";
grunt.log.writeln("start create plugin:" + arg1);
grunt.file.mkdir(pluginDir);
// 創(chuàng)建插件java類
grunt.file.mkdir(pluginDir + "/src/" + platform);
grunt.file.write(srcFileName, grunt.file.read(tplNativeCode));
var content = grunt.file.read(srcFileName);
var text = grunt.template.process(content, {data: {"pkgName": pkgName + "." + fileName, "className": fileName}});
grunt.file.write(srcFileName, text);
// 創(chuàng)建插件javascript
grunt.file.mkdir(pluginDir + "/www");
grunt.file.write(jsFileName, grunt.file.read(tplJSCode));
var jsContent = grunt.file.read(jsFileName);
var jsText = grunt.template.process(jsContent, {data: {"className": fileName}});
grunt.file.write(jsFileName, jsText);
// 創(chuàng)建插件配置文件plugin.xml
var configContent = grunt.file.read(tplPlugin);
var configText = grunt.template.process(configContent,
{
data: {
"pkgName": pkgName,
"className": fileName,
"sourceSrc":"src/"+ platform + "/" + fileName + ".java",
"targetDir":"src/" + pkgName.replace(/\./g,"/")
}
}
);
grunt.file.write(configFileName, configText);
grunt.log.writeln("create plugin success");
} else {
grunt.log.writeln("命令格式錯(cuò)誤飒责。 grunt plugin:create 包名 插件類名");
}
});
}
使用cordova plugin add "本地自定義插件代碼"
cordova plugin add "D:\Project\workspace\phonegap\hello\temp\com.blue.sky.test"
運(yùn)行之后, 在plugins 目錄下面會(huì)看到有com.blue.sky.test插件(請(qǐng)看項(xiàng)目結(jié)果圖)赘娄。
運(yùn)行cordova run android 命令打包程序到手機(jī)
運(yùn)行后，查看platforms目錄下面生成了自定義的相關(guān)代碼宏蛉，如下圖所示：
總結(jié)
通過(guò)運(yùn)用grunt生成cordova plugin 可以很方面的創(chuàng)建plugin骨架, 省去繁瑣的步驟遣臼。當(dāng)然, 這個(gè)demo只是實(shí)現(xiàn)了android平臺(tái)的plugin。如果要支持ios拾并、wp也比較簡(jiǎn)單揍堰，只需要加相應(yīng)的模板以及映射關(guān)系即可。
