自己写一个简单的cordova插件

来源：互联网发布：双色球公式计算法编辑：程序博客网时间：2024/05/17 02:20

目标：写一个可以让别人通过命令安装的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 copypublic 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里面写了测试代码，用命令重新安装后代码就没有了。

0 0