cordova插件开发

目标：写一个可以让别人通过命令安装的android平台的cordova插件
步骤：
1、准备一个cordova项目导入到eclipse中（为了方便安装插件可以把cordova项目中的platform做为eclipse的工作空间,如果不懂可以看这里如何将cordova项目的platform作为eclipse的工作空间）

一、创建空白的cordova项目

 

1、到你想创建项目的目录下，打开黑窗口

 

cordova create hello com.example.hello HelloWorld

hello：项目目录名

com.exmple.hello:项目包名

HelloWorld:应用的名字

2、cd到刚才创建的目录hello下，添加android平台

cd hello

cordova platform add android

 

 

 

2、准备一个干净的插件
plugman create --name SaveDataPlugin --plugin_id cordova-myplugin-savedata --plugin_version 1.0.0 
SaveDataPlugin:插件名
cordova-myplugin-savedata<span style="color: rgb(51, 51, 51); line-height: 22.8571px; font-family: Helvetica, 'Hiragino Sans GB', 微软雅黑, 'Microsoft YaHei UI', SimSun, SimHei, arial, sans-serif;">：插件id</span>
新插件的目录结构
PluginB
    |--src 
        |--
    |--www
        |--pluginb.js
    |--plugin.xml
plugin.xml代码
<?xml version='1.0' encoding='utf-8'?>
<plugin id="cordova-myplugin-savedata" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
    <!--插件名-->
	<name>SaveDataPlugin</name>
	<!--这里的js-module的name属性无所谓，起什么名字都可以，为了区别插件名，起一个其他名字。src属性是插件js文件所在的路径，-->
    <js-module name="MyPlugin_SaveData" src="www/SaveDataPlugin.js">
	<!--clobbers标签的target属性则对应您在js调用该插件所用到的名称，比如target名字为cordova.plugins.ExtraInfo，则后面肯定是cordova.plugins.SaveDataPlugin.js定义的方法名字
	 来进行调用-->
        <clobbers target="cordova.plugins.SaveDataPlugin" />
    </js-module>
</plugin>



3、在本地修改插件plugin.xml,以及添加java文件
修改插件plugin.xml
<?xml version='1.0' encoding='utf-8'?>
<plugin id="cordova-myplugin-savedata" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
    <!--插件名-->
    <name>SaveDataPlugin</name>
    <!--这里的js-module的name属性无所谓，起什么名字都可以，为了区别插件名起一个其他名字,这个会决定cordova.define("cordova-myplugin-savedata.MyPlugin_SaveData"。src属性是插件js文件所在的路径，-->
    <js-module name="MyPlugin_SaveData" src="www/SaveDataPlugin.js">
        <!--clobbers标签的target属性则对应您在js调用该插件所用到的名称，比如target名字为cordova.plugins.SaveDataPlugin，则后面肯定是cordova.plugins.SaveDataPlugin.js定义的方法名字
         来进行调用-->
        <clobbers target="cordova.plugins.SaveDataPlugin" />
    </js-module>

    <platform name="android">
        <!--这里是插件的配置信息，最后会添加到 res/xml/config.xml 文件中-->
        <config-file target="res/xml/config.xml" parent="/*">
            <!--注意这里的name要和插件js文件中调用exec方法中所调用的插件名字一致，不然肯定会出问题-->
            <feature name="SaveDataPlugin">
                <!--value:com.plugins.savedataplugin SaveDataPlugin 插件java文件名，插件的包名和插件的id不是一回事，虽然后有时候默认用插件id做包名-->
                <param name="android-package" value="com.plugins.savedataplugin.SaveDataPlugin" />
                <param name="onload" value="true" />
            </feature>
        </config-file>
        <!--将插件src/android目录下的PluginB复制到项目的src/com/plugins/savedataplugin目录下-->
        <source-file src="src/android/SaveDataPlugin.java" target-dir="src/com/plugins/savedataplugin" />
    </platform>
</plugin>
添加插件的java文件
新建一个PluginB.java的文件放在插件的src目录下就可以，具体的代码可以在导入eclipse后再写。
4、将插件通过命令安装到项目中并执行prepare
 
plugman install --platform android --project platforms\android --plugin ../PluginsDIY/SaveDataPlugin、
对于项目来说的改变
改变1：项目中添加了插件的java文件
 
改变2：项目的platform_www目录下添加了插件的js文件
 
改变3：项目的platform_www目录下的cordova_plugin.js发生了改变
 
改变4：项目res目录下的xml目录下的config.xml文件发生了改变
执行cordova prepare android命令对于项目来说的改变
只改变了一个地方，就是将assets目录下的www清空，重新将里面的文件从别的地方复制了一遍，两个地方：
1、cordova项目本地目录中的www文件下的所有文件
2、项目目录platform_www下的所有文件
这样就把刚才安装插件引起的plugins目录和corodova_plugin.js的变化都更新了
做完上面的操作，你的插件在项目中就可以看到了，只不过还没有任何用能，因为java代码和js代码 还没写
------------------------------------------------------------------------------------------------------------------------------------------
5、根据功能修改插件的java代码和js代码
java代码：
[java] view plain copy
public class PluginB extends CordovaPlugin {  
    private Context context;  
  
    public void initialize(CordovaInterface cordova, CordovaWebView webView) {  
        super.initialize(cordova, webView);  
        //获取context  
        context = this.cordova.getActivity().getApplicationContext();  
    }  
  
    @Override  
    public boolean execute(String action, final CordovaArgs args,  
            CallbackContext callbackContext) throws JSONException {  
        //  
        if ("save".equals(action)) {  
            cordova.getThreadPool().execute(new Runnable() {  
                public void run() {  
                    String key = args.optString(0);  
                    String value = args.optString(1);  
                    saveData(key, value);  
                }  
            });  
        } else if ("get".equals(action)) {  
            String key = args.optString(0);  
            String values = this.getString(context, key, "");  
            callbackContext.success(values);  
        }  
        return true;  
    }  
  
    private void saveData(String key, String value) {  
        this.putString(context, key, value);  
    }  
  
    public static final String FILE_NAME = "share_data";  
    public static SharedPreferences sp;  
  
    /** 
     * 每次使用工具类的时候，首先判断是不是已经有sp对象了，如果有了就不用再次创建了。 
     *  
     * @param context 
     * @return 
     */  
    private static SharedPreferences getPreferences(Context context) {  
        if (sp == null) {  
            sp = context.getSharedPreferences(FILE_NAME, Context.MODE_PRIVATE);  
        }  
        return sp;  
    }  
  
    /** 
     * 保存key value值 
     *  
     * @param context 
     * @param key 
     * @param value 
     */  
    public static void putString(Context context, String key, String value) {  
        SharedPreferences sp = getPreferences(context);  
        sp.edit().putString(key, value).commit();  
    }  
  
    /** 
     * 根据key值获取value 
     *  
     * @param context 
     * @param key 
     * @param defValue 
     * @return 
     */  
    public static String getString(Context context, String key, String defValue) {  
        String value = getPreferences(context).getString(key, defValue);  
        return value;  
    }  
}
js代码：
cordova.define("cordova-myplugin-savedata.MyPlugin_SaveData", function(require, exports, module) {
var exec = require('cordova/exec');
 
function SaveData(){};
 
SaveData.prototype.save = function(key,value,success, error){
    exec(success, error, "SaveDataPlugin", "save", [key,value]);
};
 
SaveData.prototype.get = function(key,success, error){
    exec(success, error, "SaveDataPlugin", "get", [key]);
};
 
var woyuanyi = new SaveData();
module.exports = woyuanyi; 
 
});
 
6、测试没问题后，将java文件复制到插件的src/android目录下，将j下面的代码复制到插件的www目录下的js文件中
var exec = require('cordova/exec');
 
function SaveData(){};
 
SaveData.prototype.save = function(key,value,success, error){
    exec(success, error, "SaveDataPlugin", "save", [key,value]);
};
 
SaveData.prototype.get = function(key,success, error){
    exec(success, error, "SaveDataPlugin", "get", [key]);
};
 
var woyuanyi = new SaveData();
module.exports = woyuanyi; 
 
这样插件就写完了，如果想测试可以在index.html
<pre name="code" class="html"><html>
<head>
</head>
<!--cordova.js必须引入-->
<script type="text/javascript" src="cordova.js"></script>
<script>
    function save(){
        var key=document.getElementById("key").value;
        var value=document.getElementById("value").value;
        alert(key);
        alert(value);
        cordova.plugins.SaveDataPlugin.save(key,value,
                function(result){
                    console.log(result);
                },
                function(error){
                    console.log(error);
                }
        );
    };

    function get(){
        var key=document.getElementById("yourKey").value;
        cordova.plugins.SaveDataPlugin.get(key,
                function(result){
                    alert(result);
                },
                function(error){
                    console.log(error);
                }
        );
    }
</script>

<body>
key: <input id="key" type="text" /></br>
value:<input id="value" type="text" /></br>
<input type="button" onClick="save()" value="保存数据"/></br>
key:<input id="yourKey" type="text" /></br>
<input type="button" onClick="get()" value="获取数据"/></br>
</body>
</html>





7、上面的步骤完成，这个插件就可以通过命令安装到项目中了


如果先自己测试下，可以先通过命令将这个插件从项目中删除掉。


到cordova项目的跟目录




plugman uninstall --platform android --project platforms\android --plugin cordova-myplugin-savedata

然后执行prepare命令




cordova prepare android




然后再通过命令安装插件




plugman install --platform android --project platforms\android --plugin ../PluginsDIY/pluginb

（插件的位置在当前目录上一级目录下的PluginsDIY目录下）




cordova  prepare android 

回到eclipse中，刷新下项目就能看到插件已经安装


注意：指定了prepare后www目录下的文件都会被删除掉重新复制一遍，所以如果你在index.html里面写了测试代码，用命令重新安装后代码就没有了。








 


 


 


目标：写一个可以让别人通过命令安装的android平台的cordova插件


步骤：


1、准备一个cordova项目导入到eclipse中（为了方便安装插件可以把cordova项目中的platform做为eclipse的工作空间,如果不懂可以看这里  点击打开链接）




一、创建空白的cordova项目


1、到你想创建项目的目录下，打开黑窗口


 


cordova create hellocom.example.helloHelloWorld


hello：项目目录名


com.exmple.hello:项目包名


HelloWorld:应用的名字


2、cd到刚才创建的目录hello下，添加android平台


cd hello


cordova platform add android


 


 





2、准备一个干净的插件


plugman create --name pluginb --plugin_id cordova-myplugin-pluginb --plugin_version 1.0.0


PluginB:插件名


cordova-myplugin-pluginb：插件id


新插件的目录结构


PluginB


    |--src 


        |--


    |--www


        |--pluginb.js


    |--plugin.xml


plugin.xml代码




<?xml version='1.0' encoding='utf-8'?>
<plugin id="cordova-myplugin-savedata" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
    <!--插件名-->
	<name>SaveDataPlugin</name>
	<!--这里的js-module的name属性无所谓，起什么名字都可以，为了区别插件名，起一个其他名字。src属性是插件js文件所在的路径，-->
    <js-module name="MyPlugin_SaveData" src="www/SaveDataPlugin.js">
	<!--clobbers标签的target属性则对应您在js调用该插件所用到的名称，比如target名字为cordova.plugins.ExtraInfo，则后面肯定是cordova.plugins.SaveDataPlugin.js定义的方法名字
	 来进行调用-->
        <clobbers target="cordova.plugins.SaveDataPlugin" />
    </js-module>
</plugin>




3、在本地修改插件plugin.xml,以及添加java文件


修改插件plugin.xml




<?xml version='1.0' encoding='utf-8'?>


<plugin id="cordova-myplugin-savedata" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">


    <!--插件名-->


 <name>SaveDataPlugin</name>


 <!--这里的js-module的name属性无所谓，起什么名字都可以，为了区别插件名起一个其他名字,这个会决定cordova.define("cordova-myplugin-savedata.MyPlugin_SaveData"。src属性是插件js文件所在的路径，-->


    <js-module name="MyPlugin_SaveData" src="www/SaveDataPlugin.js">


 <!--clobbers标签的target属性则对应您在js调用该插件所用到的名称，比如target名字为cordova.plugins.SaveDataPlugin，则后面肯定是cordova.plugins.SaveDataPlugin.js定义的方法名字


  来进行调用-->


        <clobbers target="cordova.plugins.SaveDataPlugin" />


    </js-module>


 


 <platform name="android">


 <!--这里是插件的配置信息，最后会添加到 res/xml/config.xml 文件中--> 


        <config-file target="res/xml/config.xml" parent="/*"> 


 <!--注意这里的name要和插件js文件中调用exec方法中所调用的插件名字一致，不然肯定会出问题-->


            <feature name="SaveDataPlugin"> 


 <!--value:com.plugins.savedataplugin SaveDataPlugin 插件java文件名，插件的包名和插件的id不是一回事，虽然后有时候默认用插件id做包名-->  


                <param name="android-package" value="com.plugins.savedataplugin.SaveDataPlugin" />  


                <param name="onload" value="true" />  


            </feature>  


        </config-file>


 <!--将插件src/android目录下的PluginB复制到项目的src/com/plugins/savedataplugin目录下--> 


 <source-file src="src/android/SaveDataPlugin.java" target-dir="src/com/plugins/savedataplugin" />  


    </platform>  


</plugin>


 




添加插件的java文件


新建一个PluginB.java的文件放在插件的src目录下就可以，具体的代码可以在导入eclipse后再写。


4、将插件通过命令安装到项目中并执行prepare


plugman install --platform android --project platforms\android --plugin ../PluginsDIY/SaveDataPlugin、


对于项目来说的改变


改变1：项目中添加了插件的java文件


 


改变2：项目的platform_www目录下添加了插件的js文件


 


改变3：项目的platform_www目录下的cordova_plugin.js发生了改变


 


改变4：项目res目录下的xml目录下的config.xml文件发生了改变


cordova prepare android


对于项目来说的改变


只改变了一个地方，就是将assets目录下的www清空，重新将里面的文件从别的地方复制了一遍，两个地方：


1、cordova项目本地目录中的www文件下的所有文件


2、项目目录platform_www下的所有文件


这样就把刚才安装插件引起的plugins目录和corodova_plugin.js的变化都更新了


做完上面的操作，你的插件在项目中就可以看到了，只不过还没有任何用能，因为java代码和js代码 还没写


----------------------------------------------------------------------------------------------------------------------------------------------------


5、根据功能修改插件的java代码和js代码


java代码：








[java] view plain copy

 






    

  1. public class PluginB extends CordovaPlugin {  
    2. 

  2.     private Context context;  
    3. 

  3.   
    4. 

  4.     public void initialize(CordovaInterface cordova, CordovaWebView webView) {  
    5. 

  5.         super.initialize(cordova, webView);  
    6. 

  6.         //获取context  
    7. 

  7.         context = this.cordova.getActivity().getApplicationContext();  
    8. 

  8.     }  
    9. 

  9.   
    10. 

  10.     @Override  
    11. 

  11.     public boolean execute(String action, final CordovaArgs args,  
    12. 

  12.             CallbackContext callbackContext) throws JSONException {  
    13. 

  13.         //  
    14. 

  14.         if ("save".equals(action)) {  
    15. 

  15.             cordova.getThreadPool().execute(new Runnable() {  
    16. 

  16.                 public void run() {  
    17. 

  17.                     String key = args.optString(0);  
    18. 

  18.                     String value = args.optString(1);  
    19. 

  19.                     saveData(key, value);  
    20. 

  20.                 }  
    21. 

  21.             });  
    22. 

  22.         } else if ("get".equals(action)) {  
    23. 

  23.             String key = args.optString(0);  
    24. 

  24.             String values = this.getString(context, key, "");  
    25. 

  25.             callbackContext.success(values);  
    26. 

  26.         }  
    27. 

  27.         return true;  
    28. 

  28.     }  
    29. 

  29.   
    30. 

  30.     private void saveData(String key, String value) {  
    31. 

  31.         this.putString(context, key, value);  
    32. 

  32.     }  
    33. 

  33.   
    34. 

  34.     public static final String FILE_NAME = "share_data";  
    35. 

  35.     public static SharedPreferences sp;  
    36. 

  36.   
    37. 

  37.     /** 
    38. 

  38.      * 每次使用工具类的时候，首先判断是不是已经有sp对象了，如果有了就不用再次创建了。 
    39. 

  39.      *  
    40. 

  40.      * @param context 
    41. 

  41.      * @return 
    42. 

  42.      */  
    43. 

  43.     private static SharedPreferences getPreferences(Context context) {  
    44. 

  44.         if (sp == null) {  
    45. 

  45.             sp = context.getSharedPreferences(FILE_NAME, Context.MODE_PRIVATE);  
    46. 

  46.         }  
    47. 

  47.         return sp;  
    48. 

  48.     }  
    49. 

  49.   
    50. 

  50.     /** 
    51. 

  51.      * 保存key value值 
    52. 

  52.      *  
    53. 

  53.      * @param context 
    54. 

  54.      * @param key 
    55. 

  55.      * @param value 
    56. 

  56.      */  
    57. 

  57.     public static void putString(Context context, String key, String value) {  
    58. 

  58.         SharedPreferences sp = getPreferences(context);  
    59. 

  59.         sp.edit().putString(key, value).commit();  
    60. 

  60.     }  
    61. 

  61.   
    62. 

  62.     /** 
    63. 

  63.      * 根据key值获取value 
    64. 

  64.      *  
    65. 

  65.      * @param context 
    66. 

  66.      * @param key 
    67. 

  67.      * @param defValue 
    68. 

  68.      * @return 
    69. 

  69.      */  
    70. 

  70.     public static String getString(Context context, String key, String defValue) {  
    71. 

  71.         String value = getPreferences(context).getString(key, defValue);  
    72. 

  72.         return value;  
    73. 

  73.     }  
    74. 

  74. }  
    75. 






js代码：


//




cordova.define("cordova-myplugin-savedata.MyPlugin_SaveData", function(require, exports, module) {


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


 


function SaveData(){};


 


SaveData.prototype.save = function(key,value,success, error){


    exec(success, error, "SaveDataPlugin", "save", [key,value]);


};


 


SaveData.prototype.get = function(key,success, error){


    exec(success, error, "SaveDataPlugin", "get", [key]);


};


 


var woyuanyi = new SaveData();


module.exports = woyuanyi; 


 


});





6、测试没问题后，将java文件复制到插件的src/android目录下，将js文件复制到插件的www目录下




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


 


function SaveData(){};


 


SaveData.prototype.save = function(key,value,success, error){


    exec(success, error, "SaveDataPlugin", "save", [key,value]);


};


 


SaveData.prototype.get = function(key,success, error){


    exec(success, error, "SaveDataPlugin", "get", [key]);


};


 


var woyuanyi = new SaveData();


module.exports = woyuanyi; 







1、到你想创建项目的目录下，打开黑窗口


 


cordova create hello com.example.hello HelloWorld


hello：项目目录名


com.exmple.hello:项目包名


HelloWorld:应用的名字


2、cd到刚才创建的目录hello下，添加android平台


cd hello


cordova platform add android





这样插件就写完了，如果想测试可以在index.html写测试代码




<html>


    <head>


    </head>


    <!--cordova.js必须引入-->


    <script type="text/javascript" src="cordova.js"></script>


    <script>


    function save(){


    var key=document.getElementById("key").value;


    var value=document.getElementById("value").value;


    alert(key);


    alert(value);


        cordova.plugins.SaveDataPlugin.save(key,value,


            function(result){


                console.log(result);


            },


            function(error){


                console.log(error);


            }


        );        


    };


 


		function get(){


    var key=document.getElementById("yourKey").value;    


        cordova.plugins.SaveDataPlugin.get(key,


            function(result){


                alert(result);


            },


            function(error){


                console.log(error);


            }


        );


		}


    </script>


 


    <body>


       key: <input id="key" type="text" /></br>


       value:<input id="value" type="text" /></br>


       <input type="button" onClick="save()" value="保存数据"/></br>       


       key:<input id="yourKey" type="text" /></br>


       <input type="button" onClick="get()" value="获取数据"/></br>


    </body>


</html>





 


7、上面的步骤完成，这个插件就可以通过命令安装到项目中了


可以尝试一下


首先通过命令先把刚才写的插件删除掉


plugman uninstall --platform android --project platforms\android --plugin cordova-myplugin-pluginb


cordova prepare android


然后再通过命令安装插件


plugman install --platform android --project platforms\android --plugin ../PluginsDIY/pluginb（插件的位置在当前目录上一级目录下的PluginsDIY目录下）


cordova  prepare android 


 






            

            
posted @ 
2016-11-09 15:44 
itly 
阅读(425) 
评论(0) 
编辑 
收藏 
举报