cordova开发自定义插件

由于最近工作需要，需要一个自定义插件，本人研究了很久终于做出一个最简单的插件，是基于Android平台来开发的，虽然写博客很花时间，但是为了以后再次查看复习能很好的提供参考，也是值了，废话就不多说，直接进入主题。

1.环境搭建

cordova插件开发前需要安装一些软件和配置环境

1.1 Node.js环境搭建

到node.js官网(https://nodejs.org/)下载安装就好，不过访问node.js需要翻墙，在dos窗口输入npm,能显示如下信息就说明node.js安装成功

1.2 cordova和ionic 的安装

在窗口输入下面命令全局安装cordova和ionic

npm install -g cordova ionic

1.3 android  sdk的下载

到谷歌官网(https://developer.android.com/sdk/index.html)上下载android sdk，然后需配置下面几个环境变量

到此插件的开发环境就搭建好了。

2.创建第一个应用

创建的命令是ionic start myApp tabs

3.添加平台

3.1 进入创建的项目目录 

cd myApp

3.2 查看已有的平台

cordova platforms list

3.3添加所需要的平台  

cordova platform add android

如果想移除已经添加的平台的话 cordova platform remove android 或者cordova platform rm android

4.编译项目

编译项目命令

cordova build android

5.运行项目

cordova run android

注：如果需要看详细的cordova的命令的话可以参考这篇博文http://wenzhixin.net.cn/2014/02/11/cordova_command_line

注：生成的项目可以导入到eclipse中，导入之后如下图

6.插件开发

前面说了这么多全都是准备工作，接下来是插件的具体开发过程

6.1 pluman的安装

npm install -g plugman

6.2 plugman安装完之后就可以创建一个插件了cordova plugin

plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version <version> [--path <directory>] [--variableNAME=VALUE]

参数:
pluginName: 插件名字
pluginID: 插件id, egg : coolPlugin 
oversion: 版本, egg : 0.0.1
directory:一个绝对或相对路径的目录，该目录将创建插件项目
variable NAME=VALUE: 额外的描述，如作者信息和相关描述

egg : plugman create --name CoolPlugin --plugin_id coolPlugin --plugin_version 0.0.1 

生成的插件的目录如下：

但是遵循规范的话，一般在src目录下新建android目录，然后在android目录下新建类，如下图

HelloPlugin.js和plugin.xml的解释可以参考http://blog.csdn.net/itcatface/article/details/50520301，这边博文解释的非常详细

其中HelloPlugin.js和plugin.xml的相关配置如下

a. plugin.xml的配置

[html]  view plain  copy

 

1. <?xml version='1.0' encoding='utf-8'?>  
2. <plugin id="coolPlugin" version="0.0.1" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <name>CoolPlugin</name>  
4.     <js-module name="CoolPlugin" src="www/CoolPlugin.js">  
5.         <clobbers target="cool.toast" />  
6.     </js-module>  
7.     <!-- android -->  
8.     <platform name="android">  
9.         <config-file target="res/xml/config.xml" parent="/*">  
10.             <feature name="CoolToast">  
11.                 <param name="android-package" value="com.cool.toast.ShowToast"/>  
12.             </feature>  
13.         </config-file>  
14.   
15.   
16.         <source-file src="src/android/ShowToast.java" target-dir="src/com/cool/toast" />  
17.   
18.   
19.         <config-file target="AndroidManifest.xml" parent="/*">    
20.             <uses-permission android:name="android.permission.READ_PHONE_STATE" />    
21.         </config-file>   
22.         <config-file target="AndroidManifest.xml" parent="/manifest/application">  
23.       
24.         <activity android:name="com.example.hello.TestActivity" />  
25.         </config-file>  
26.   
27.   
28.         <source-file src="src/android/TestActivity.java" target-dir="src/com/example/hello" />  
29.   
30.   
31.         <source-file src="src/android/layout/activity_text.xml" target-dir="res/layout" />  
32.     </platform>  
33. </plugin>  

对于plugin.xml的下面这几行配置有疑问的话可以参考http://blog.csdn.net/u013598660/article/details/50065937，里面讲的很详细

[html]  view plain  copy

 

1. <source-file src="src/android/TestActivity.java" target-dir="src/com/example/hello" />  
2. <config-file target="AndroidManifest.xml" parent="/*">    
3.             <uses-permission android:name="android.permission.READ_PHONE_STATE" />    
4.         </config-file>   

    b.HelloPlugin.js的配置

[javascript]  view plain  copy

 

1. var exec = require('cordova/exec');  
2. var myFunc = function(){};  
3.   
4.   
5. // arg1：成功回调  
6. // arg2：失败回调  
7. // arg3：将要调用类配置的标识  
8. // arg4：调用的原生方法名  
9. // arg5：参数，json格式  
10. myFunc.prototype.showToast=function(success, error) {  
11.     exec(success, error, "CoolToast", "showToast", []);  
12. };  
13.   
14.   
15. myFunc.prototype.showshowToast=function(text, lenth,success, error) {  
16.     exec(success, error, "CoolToast", "showshowToast", [text, lenth]);  
17. };  
18. myFunc.prototype.openActivity=function() {  
19.     exec(null, null, "CoolToast", "openActivity", []);  
20. };  
21. var showt = new myFunc();  
22. module.exports = showt;  

c 最后还有一个Java类

里面的哪个TestActivity这个类是我测试用的，这里忽略就好

[java]  view plain  copy

 

1. package com.cool.toast;  
2.   
3. import org.apache.cordova.CallbackContext;  
4. import org.apache.cordova.CordovaPlugin;  
5. import org.json.JSONArray;  
6. import org.json.JSONException;  
7. import com.example.hello.TestActivity;  
8. import android.content.Intent;  
9. import android.widget.Toast;  
10.   
11. public class ShowToast extends CordovaPlugin {  
12.   
13. @Override  
14. public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {  
15. // TODO Auto-generated method stub  
16. if("showToast".equals(action)){  
17. Toast.makeText(cordova.getActivity(), "show...", Toast.LENGTH_SHORT).show();  
18. callbackContext.success("success");  
19. return true;  
20. }else if("showshowToast".equals(action)){  
21. String str = args.getString(0);  
22. int len = args.getInt(1);  
23.   
24. if(len == 0){  
25. Toast.makeText(cordova.getActivity(), str, Toast.LENGTH_SHORT).show();  
26. callbackContext.success("success" + str);  
27. return true;  
28. }else{  
29. Toast.makeText(cordova.getActivity(), str, Toast.LENGTH_LONG).show();  
30. callbackContext.success("success" + str);  
31. return true;  
32. }  
33. }else if("openActivity".equals(action)){  
34. openActivity();  
35. callbackContext.success("success");  
36. return true;  
37. }  
38.  callbackContext.error("error");  
39.         return false;   
40. }  
41.   
42. private void openActivity() {  
43. Intent intent = new Intent(cordova.getActivity(),TestActivity.class);  
44. cordova.getActivity().startActivity(intent);  
45. }  
46.   
47. }  

6.3插件的安装

我的插件所在的路径是F:\CoolPlugin

首先切换到最初创建的hello目录   cd hello

执行插件安装命令 cordova plugin add F:\CoolPlugin  

执行完之后你就发现插件已经安装上去了

如果你想卸载插件的话，执行cordova plugin remove  你的plugin_id

egg:cordova plugin remove  coolPlugin

6.4插件的使用

[javascript]  view plain  copy

 

1. cool.toast.showToast();  
2.   cool.toast.showshowToast("hello",0, function(msg) {  
3.                 alert(msg);  
4.             }, function(msg) {  
5.                 alert(msg);  
6.             });  
7.   
8. cool.toast.openActivity();  

在F:\hello\platforms\android\assets\www下的index.html的中

egg:

[html]  view plain  copy

 

1. <!DOCTYPE html>  
2. <html>  
3.     <head>  
4.   
5.   
6.         <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">  
7.         <meta name="format-detection" content="telephone=no">  
8.         <meta name="msapplication-tap-highlight" content="no">  
9.         <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">  
10.         <link rel="stylesheet" type="text/css" href="css/index.css">  
11.         <title>Hello World</title>  
12.         <script type="text/javascript" charset="utf-8">        
13.          // Wait for device API libraries to load        
14.         //        
15.         document.addEventListener("deviceready", onDeviceReady, false);        
16.         function click1(){  
17.             cool.toast.showToast();  
18.         }  
19.         function click2(){  
20.            cool.toast.showshowToast("hello",0, function(msg) {  
21.                 alert(msg);  
22.             }, function(msg) {  
23.                 alert(msg);  
24.             });  
25.         }  
26.         function click3(){  
27.             cool.toast.openActivity();  
28.         }  
29.     </script>  
30.     </head>  
31.     <body>  
32.         <div class="app">  
33.             <h1>Apache Cordova</h1>  
34.             <div id="deviceready" class="blink">  
35.                 <p class="event listening">Connecting to Device</p>  
36.                 <p class="event received">Device is Ready</p>  
37.             </div>  
38.         </div>  
39.         <script type="text/javascript" src="cordova.js"></script>  
40.         <script type="text/javascript" src="js/index.js"></script>  
41.         <a href="#" onclick="click1(); return false;">show Toast</a>  
42.         <hr>  
43.         <a href="#" onclick="click2(); return false;">click with back data</a>  
44.         <hr>  
45.         <a href="#" onclick="click3(); return false;">open activity</a>  
46.     </body>  
47. </html>  

项目源码连接：http://download.csdn.NET/detail/cool_fuwei/9491282