ionic开发之Android平台echo插件编写

本文只是简单的简绍。适用于需要开发自己插件的同学

看了cordova的官方文档，介绍了很多内容，但是正真开发一个插件的详细流程却没有提及，后来看到一篇不错的文章并最终测通过。现在自己从新总结一下。本文是针对安卓平台开发cordova插件来介绍的。

1． 准备材料：

安装好npm ，cordova ，ionic等基本环境，然后通过命令ionic start demo tabs 创建一个新的工程，待会把创建好的插件，插入到这个项目里。当然最好事先运行命令:

cd demo，

ionic platform add android，

ionic build android.

Ionic run android(ionic emulate android )，

保证工程可以正确运行，然后再开始着手开发插件。

2． 安装plugman：

运行命令：npm install–g plugman 来全局安装plugman，全局安装以为这你可以在任何目录执行此命令。

3． 新建插件：

执行以下命令：

其中命令的格式为：plugman create –name <pluginName>--plugin_id <pluginID> --plugin_version <version>

我们建立插件运行的命令如下：

plugman create --name myEcho --plugin_id com.haha.myEcho --plugin_version0.0.1

执行完命令之后，会在执行命令的目录生成如下文件夹和文件，

其中www目录下为接口js文件，

src目录是用来放置本地平台下的本地代码

plugin.xml是插件的配置文件：

4． 在myEcho插件添加Android平台：

命令格式为：plugman platform add --platform_name <platform>

我们执行的命令为：

cd myEcho

plugman platform add --platform_name android

命令执行完之后，我们的src目录下就会多出一个Android目录以及目录下的一个java文件。

这里是测试了android平台，如果增加了其他平台，也会被放置在这个目录

5． 简单介绍plugin.xml文件：

Id=”com.haha.myEcho”               //定义了插件id
<name>myEcho</name>           //定义了插件的名字
<js-module src=”www/myEcho.js” name=”myEcho”>
<clobbers target=”cordova.plugins.myEcho”/>  //定义了js调用插件的方法
</js-module>
说明了插件js代码的路径和插件js接口的名称
<platform name=”android”>
<config-filetarget=”res/xml/config.xml” parent=”/*”>  //指明config.xml插入的位置
       //在config.xml插入的内容
       <feature name=”myEcho”>
               <paramname=”android-package” value=”com.haha.myEcho.myEcho”/>
       </feature>
</config-file>
<config-filetarget=”AndroidManifest.xml” parent=”/*”/>
//指定使用此插件会加入到安卓AndroidManifest.xml里面的权限项目
<source-file src=”src/android/myEcho.java” target-dir=”src/com/haha/myEcho/myEcho”/>
//支出插件本地代码的位置，以及插入到安卓平台源码的目录
</platform>

6． 修改myEcho.js文件成为如下：

var exec = require('cordova/exec');

var echo = function(arg0, success, error) {
    exec(success, error, "myEcho","myEchofunction", [arg0]);
};
window.plugins = window.plugins || {};
window.plugins.myEcho = echo;
exports.myEcho = echo

7． 修改myEcho.java文件成为如下：

package com.haha.myEcho;

import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

/**
 * This class echoes a string called fromJavaScript.
 */
public class myEcho extends CordovaPlugin {

    @Override
    public boolean execute(String action,JSONArray args, CallbackContext callbackContext) throws JSONException {
        if(action.equals("myEchofunction")) {
            String message =args.getString(0);
            this.myEcholocal(message,callbackContext);
            return true;
        }
        return false;
    }

    private void myEcholocal(Stringmessage, CallbackContext callbackContext) {
        if (message != null &&message.length() > 0) {
           callbackContext.success(message);
        } else {
           callbackContext.error("Expected one non-empty stringargument.");
        }
    }
}

8． 安装插件：

切换到需要增加插件的工程目录：运行命令

注意：插件工程目录与需要加入插件的工程目录在同一父目录下。

增加插件：cordova plugin add ../myEcho 

在项目的plugins目录可以看到如下：

 

9． 移除插件：

如果你想移除插件，可以通过如下步骤：

先列出当前项目已经安装的插件：cordova plugin list

然后运行命令移除myEcho：cordova pluginremove com.haha.myEcho

10．        调用插件：

在需要增加插件的项目里，打开一个controllers.js文件。即你想调用插件的页面的controller里面。由这里使用的是 通过命令ionic start demotabs创建的工程。所以打开其工程下的www/js/controllers.js代码，并增加如下代码：

window.plugins.myEcho("echo my text",
  function(data) {
    alert(data);
  },
function(error) {
    alert(error);
});

增加完后整个文件如以下内容：

angular.module('starter.controllers', [])

.controller('DashCtrl', function($scope) {})

.controller('ChatsCtrl', function($scope, Chats) {
  // With the new view caching in Ionic,Controllers are only called
  // when they are recreated or on appstart, instead of every page change.
  // To listen for when this page isactive (for example, to refresh data),
  // listen for the $ionicView.enterevent:
  //
  //$scope.$on('$ionicView.enter',function(e) {
  //});

  $scope.chats = Chats.all();
  $scope.remove = function(chat) {
    Chats.remove(chat);
  };
})

.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
  $scope.chat = Chats.get($stateParams.chatId);
})

.controller('AccountCtrl', function($scope) {
  $scope.settings = {
    enableFriends: true
  };

    window.plugins.myEcho("echo mytext",
      function(data) {
        alert(data);
      },
    function(error) {
        alert(error);
    });

});

意味着，当点击Accounttab的时候，就会弹出一个alert对话框。

11．安装并运行项目

在工程的目录下执行以下命令：

ionic build android

ionic run android 或 ionic emulateandroid

执行的效果如下：