cordova3.X 運用grunt生成plugin自定義插件骨架

 

Cordova提供了一組設備相關的API，經過這組API，移動應用可以以JavaScript訪問原生的設備功能，如攝像頭、麥克風等。Cordova還提供了一組統一的JavaScript類庫，以及爲這些類庫所用的設備相關的原生後臺代碼。

 

1、安裝cordova

npm install -g cordova

 

2、建立項目

cordova create hello com.blue.sky.hybrid.app.hello HelloWorld

 

3、添加平臺支持

cd hello

cordova platform add android （前提是系統上面要安裝了對應移動系統的SDK）

 

在windows系統：

$ cordova platform add wp8
$ cordova platform add windows
$ cordova platform add amazon-fireos
$ cordova platform add android
$ cordova platform add blackberry10
$ cordova platform add firefoxos

在mac系統：

$ cordova platform add ios
$ cordova platform add amazon-fireos
$ cordova platform add android
$ cordova platform add blackberry10
$ cordova platform add firefoxos

 

4、經常使用命令

cordova platforms ls 查看當前安裝的移動平臺

cordova platform rm android 移除系統支持

cordova build 或者 cordova build android 編譯

cordova emulate android 模擬器運行程序

 

須要安裝ant：配置系統環境變量，ant須要java支持，肯定系統安裝JDK，並配置JAVA環境變量。

ANT_HOME   D:\tool\apache-ant-1.9.0
PATH       %ANT_HOME%\bin
CLASSPATH  %ANT_HOME%\lib

cordova run android usb  真機運行程序

cordova platform update android 更新android平臺

 

5、插件管理

cordova plugin search bar code 搜索插件
cordova plugin add org.apache.cordova.console 增長插件支持, 多個空格分開
cordova plugin add org.apache.cordova.console@latest 最新版本
cordova plugin add org.apache.cordova.console@0.2.1 指定版本
cordova plugin add https://github.com/apache/cordova-plugin-console.git
cordova plugin add https://github.com/apache/cordova-plugin-console.git#r0.2.0 版本
cordova plugin add https://github.com/someone/aplugin.git#:/my/sub/dir 子目錄

 

cordova plugin ls 查看已安裝的插件
cordova plugin rm org.apache.cordova.console 移除插件

 

6、自定義插件 

學了這麼多, 準備本身寫個自定義插件，變在命令行輸入：cordova plugin create  com.blue.sky.test   發現無論用.  查閱資料後, 發現沒有這個命令, 網上你們都是手動建立目錄, 以爲太麻煩,  因而用grunt 寫了一個命令經過模板生成cordova plugin骨架。

 

》》網上的方法大概是這樣：

cordova3.X以後,插件不能本身手動添加了,手動添加後,只要cordova build,數據當即被抹去.

所以,3.X後要添加插件,須要用 cordova plungin add "你本地插件的路徑"  的方式來添加插件,.

1.新建一個文件夾,命名爲你插件的名字,如TestPlugin

2.在文件夾裏再新建2個文件夾和1個文件.兩個文件夾分別是src和www.其中src中放你插件的java代碼,www中放對應的js文件;與src和www文件夾同級,創建plugin.xml

 

》》運用grunt模板生成cordova plugin骨架

思路：cordova plugin 主要是三個文件： 

  一、繼承cordovaActivity的Native實現類

  二、編寫javascript代碼

  三、編寫plugin.xml配置文件

 

既然是這樣, 即可以運用grunt經過模板生成cordova plugin骨架。

首先看一下項目代碼結構：

 

第一步：制定cordova plugin模板

 

模板內容以下：

src/android/template.txt 繼承cordovaActivity的Native實現類

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 自定義實現

        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 項目代碼配置文件

<?xml version="1.0" encoding="UTF-8"?>
<!--插件id號，與package.json保持一致 版本號，與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"爲已經寫好的js文件路徑，與js中調用的類名保持一致-->
    <js-module src="www/<%=className%>.js" name="<%=className%>">
        <!--插件在js中調用的類名-->
        <clobbers target="<%=className%>" />
    </js-module>

    <!-- android -->
    <platform name="android">
        <config-file target="res/xml/config.xml" parent="/*">
            <!--插件在java端的接口名稱，與以前文件中的接口名稱保持一致-->
            <feature name="<%=className%>">
                <!--該插件接口對應的java代碼路徑-->
                <param name="android-package" value="<%=pkgName%><%=className%>"/>
            </feature>
        </config-file>

        <!--該插件須要的權限申明，根據須要自行定義-->
        <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>

        <!--源文件的路徑和目標文件路徑，src爲已經編寫好的java代碼路徑，target-dir爲須要生成的android工程中該java源碼路徑，與上面的java代碼路徑保持一致-->
        <source-file src="<%=sourceSrc%>" target-dir="<%=targetDir%>"/>

    </platform>

</plugin>

 

運用Node.js + grunt根據模板生成骨架代碼： grunt plugin:create:com.blue.sky.test:Test

grunt.registerTask('plugin:create', '自定義插件 參數一 包名  參數二 插件類名', 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.txt";
      var tplJSCode = "template/www/template.txt";
      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);

      // 建立插件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);

      // 建立插件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);

      // 建立插件配置文件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("命令格式錯誤。 grunt plugin:create 包名 插件類名");
    }
  });

　　

使用cordova plugin add "本地自定義插件代碼"

cordova plugin add "D:\Project\workspace\phonegap\hello\temp\com.blue.sky.test"

運行以後, 在plugins 目錄下面會看到有com.blue.sky.test插件(請看項目結果圖)。

 

運行cordova run android 命令打包程序到手機

運行後，查看platforms目錄下面生成了自定義的相關代碼，以下圖所示：

 

總結

 經過運用grunt生成cordova plugin 能夠很方面的建立plugin骨架, 省去繁瑣的步驟。固然, 這個demo只是實現了android平臺的plugin。若是要支持ios、wp也比較簡單，只須要加相應的模板以及映射關係便可。