myFirstPlugin

框架：ionic + cordova (webApp)

##cordova-plugin

目录

• 1. 概述
• 2. 插件
  • 2.1 新建插件
  • 2.2 安装插件
  • 2.3 修改并调试插件
• 3. 下载示例

---

概述

由于有些功能受限于硬件，需要使用各个平台的特有功能，我们使用插件的方式来实现这些功能。

---

新建插件

1. 准备工作

   • 环境

     安装plugman

     步骤：

      npm install -g plugman
     注：报错请使用管理员权限安装
     

2. 新建一个插件

   • cd ~/your_plugin_folder 进入你想保存插件的目录

   • 新建命令

      plugman create --name <pluginName> --
     plugin_id <pluginID> --plugin_version <version> [--path <directory>] [--
     variable NAME=VALUE]
     example:plugman create --name myFirstPlugin --plugin_id com.handsmap.myFirstPlugin --plugin_version 0.0.1 参数解释：
     pluginName 插件名称
     pluginID	插件ID
     version 版本号
     directory	路径（可选）
     

   • 新建成功，如下图所示:

   

3. 添加平台

   cd myPlugin
   plugman platform add --platform_name <platform>
   注：platform-> ios android windows etc.
   

4. 插件目录

   

    src 对应不同的平台
   www 放我们的 javascript 文件
   plugin.xml 是插件的配置文件
   

   • plugin.xml

   id: 插件的标识，即一开始我们新建插件输入的 ID: com.handsmap.myPlugin
   name：插件的名称，新建插件时输入的名称，myPlugin
   description：描述信息
   js-module：对应我们的 javascript 文件，src 属性指向 www/myPlugin.js
   platform：支持的平台，这里仅有一个 android，这是刚才我们通过“ plugman platform add --platform_name android ”添加进来的。
   config-file：当安装该插件时，会添加到目标平台android下的 res/xml/config.xml 文件中，并将 src/android/myEcho.java，复制到 android 的 package 包中
   

   

   注：format code -> cmd + option + L

• myFirstPlugin.js

文件内容很简单，第一句是引入cordova下的exec库 第二句是我们插件的执行插件方法 exec(success, error, "myPlugin", "coolMethod", [arg0]); success:调用成功时的回调函数 error:调用出错时的回调函数 "myPlugin"：插件名称 "coolMethod"：执行插件里的方法 [arg0]：可选参数，执行方法的参数数组。 ```

• myFirstPlugin.java

可以看到myEcho继承自CordovaPlugin，并重载了execute方法。 在execute方法里有个判断，action.equals("coolMethod")，这表示如果执行的是我们的方法那就继续执行内部的逻辑并返回true，如果不是则直接返回false结束。 ```

```
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {}
参数解释：
actions: 方法名
args: 参数
callbackContext：回调
```
插件新建好了，赶紧安装试试吧~

---

安装插件

• 新建一个测试工程（如何新建）

• 安装本插件 cordova plugin add /xxx/myFirstPlugin

  安装成功后，如下图所示：

  系统会自动添加到已有的平台，如android:

---

修改并调试插件

• 修改

  功能：弹出对话框

1. myFirstPlugin.js

   var exec = require('cordova/exec');
   var alert = function(arg0, success, error) {
   exec(success, error, "myFirstPlugin", "showAlert", [arg0]);
   

}; window.plugins = window.plugins || {}; window.plugins.myFirstPlugin = {showAlert:alert}; ```

2. myFirstPlugin.java

	public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
if (action.equals("showAlert")) {
String msg = args.get[0];//test
return true;
}
return false;
}

args.get[0] 观察其数据类型，用于进一步处理

######注： 修改完之后需重新安装插件 cordova plugin remove plugin_id cordova plugin add /xxx/

---

3. 测试工程

   • 模拟数据

    window.plugins.myFirstPlugin.showAlert({title:"提示",
   message:"是否确认退出?",
   sureTitle:"确认",
   cancelTitle:"退出"},
   function(data){
   console.log(data);
   },
   function(error){
   console.log(error);
   });
   

• 调试

  1. 打开chrome浏览器，输入chrome://inspect/#devices

  2. 打开android工程，在args参数处设置断点 查看其数据类型，根据需求处理。

     注：耗时线程请开启子线程处理，cordova提供如下方式：

   cordova.getThreadPool().execute(new Runnable() {
  @Override
  public void run() {
  }
  });
  

   UI线程：
  ```
  cordova.getActivity().runOnUiThread(new Runnable() {
  @Override
  public void run() {
  }
  });
  ```
  

• 查看数据类型

   ![](http://i4.tietuku.com/a2a48c540c7a2908.jpg)
  由图可知，需要处理的数据类型为JsonObject.
  修改myFirstPlugin.java,处理数据.
  ` JSONObject jsonObject = args.getJSONObject(0);
  `
  ```
  cordova.getActivity().runOnUiThread(new Runnable() {
  @Override
  public void run() {
  CharSequence sure = null,cancel = null;
  AlertDialog.Builder builder=new AlertDialog.Builder(cordova.getActivity()); //先得到构造器
  try {
  String title = message.getString("title");
  String msg = message.getString("message");
  sure = message.getString("sureTitle");
  cancel = message.getString("cancelTitle");
  builder.setTitle(title); //设置标题
  builder.setMessage(msg); //设置内容
  } catch (JSONException e) {
  e.printStackTrace();
  }
  builder.setPositiveButton(sure, new DialogInterface.OnClickListener() { //设置确定按钮
  @Override
  public void onClick(DialogInterface dialog, int which) {
  dialog.dismiss(); //关闭dialog
  Toast.makeText(cordova.getActivity(), "确认" + which, Toast.LENGTH_SHORT).show();
  }
  });
  builder.setNegativeButton(cancel, new DialogInterface.OnClickListener() { //设置取消按钮
  @Override
  public void onClick(DialogInterface dialog, int which) {
  dialog.dismiss();
  Toast.makeText(cordova.getActivity(), "取消" + which, Toast.LENGTH_SHORT).show();
  }
  });
  //参数都设置完成了，创建并显示出来
  builder.create().show();
  }
  });
  ```
  对话框如下图所示：
  ![](http://i4.tietuku.com/066b20956c7bc652.png)
  

---

####注意事项

编写插件的同时最好编写一份插件的用法，放入插件目录中（README.md）

---

下载示例

插件：https://github.com/SandLZ/myFirstPlugin.git

测试工程: https://github.com/SandLZ/myFirstApp.git