admin 发表于 2014-10-27 20:32:39

phonegap插件-cordova插件开发_适合3.0以上插件制作


phonegap3.0-4.0自定义插件文档以及案例包下载:






由于phonegap升级较快,在3.X之后改变了它的插件机制,所有调用手机原生的功能全部以外部插件的形式提供,创建phonegap项目之后不再能够直接调用系统功能API如camera,device等,所以必须以插件的形式引入到项目中来,才能够使用。


下面是安装phoengap自带的插件


cordova plugin addorg.apache.cordova.device 安装对应的device插件
cordova plugin list 列出已经安装的插件   
cordova plugin remove org.apache.cordova.device 删除 device插件


在phoengap2.9中我们已经讲过了phonegap自定义插件,但是3.0以后有一些区别
下面主要给大家讲讲 phoengap3.0以上如何自定义插件
                                             

首先我们看看安装完成的默认目录结构:



说实话,使用命令行方式创建并导入到eclipse里面之后这个目录结构并不是很清晰,变化较大。


下面我们正式进入插件开发:

1.我们来创建一个自定义的插件,在你的硬盘中如我的G盘创建一个目录如下(说明:可以任意盘)   这里我们新建了一个 org.apache.cordova.echo的文件夹当然这个名字可以随意,不过我们可以仿照他的默认的插件命名规则来





2. org.apache.cordova.echo,这个目录就是存放你自定义插件的根目录,在这个目录下面我们先新建这么几个文件src文件www 文件和 plugin.xml如下图



3.新建完成以后我们打开 src目录,然后在下面新建 android 目录如下图




4.新建完成android目录以后我们打开 在里面新建一个 Echo.java   如下图(注意java类名的命名规则)Echo.java里面的代码如下一个简单的调用返回代码,和以前开发中写法一样的

这里的代码就是需要执行的插件代码,作用是通过客户端传递的参数再返回给客户端,其中execute方法是必须的,供客户端调用。






packageorg.apache.cordova.echo;

importorg.apache.cordova.api.CallbackContext;

importorg.apache.cordova.api.CordovaPlugin;
importorg.apache.cordova.api.PluginResult;
importorg.json.JSONArray;
importorg.json.JSONException;
importorg.json.JSONObject;

publicclass Echo extends CordovaPlugin {
    @Override
    public boolean execute(String action,JSONArray args, CallbackContext callbackContext) throws JSONException {
      if (action.equals("echo")){   //action=echo
            String message = args.getString(0);//HelloMobileWorld            
            message=message+"这是原生代码";            
            this.echo(message,callbackContext);
            return true;
      }else{
                         callbackContext.error("这不是一个echo操作");
                         returnfalse;
      }
      
    }
    private void echo(String message,CallbackContext callbackContext) {
      if (message != null &&message.length() > 0) {
            callbackContext.success(message);
      } else {
             callbackContext.error("Expected one non-empty stringargument.");
      }
    }
}

5.找到org.apache.cordova.echo目录下刚才创建一个www目录,并在这个目录下创建一个js文件,取名叫echo.js,用来提供客户端调用java代码的桥梁,这个js代码如下所示:




至于其他的图function变量,我们完全可以自己定义


var cordova=require('cordova');

varEcho =function(){

         Echo.prototype.echo=function(success,error,str){

                   cordova.exec(sucess,error,'Echo','echo',str)//'Echo'对应我们在java文件中定义的类名,echo对应我们在这个类中调用的自定义方法,str是我们客户端传递给这个方法的参数,是个数组

         }

}
varecho=new Echo();

module.exports=echo;


6. 下一步是要写一个plugin.xml文件,用于命令行去进行插件的注册,在org.apache.cordova.echo文件夹下建立一个plugin.xml文件,刚才我们已经新建好了,代码如下:







<?xmlversion="1.0" encoding="UTF-8"?>

<pluginxmlns="http://apache.org/cordova/ns/plugins/1.0"   
    id="org.apache.cordova.echo"
    version="0.0.1">
    <name>Echo</name>
    <description>EchoPlugin</description>
    <license>Apache 2.0</license>
   <keywords>cordova,echo</keywords>
   

    <js-module src="www/echo.js"name="echo">
      <clobbers target="echo"/>
    </js-module>

      

    <!-- android -->
    <platform name="android">
                  
                   <source-filesrc="src/android/Echo.java"target-dir="src/org/apache/cordova/echo" />

      <config-filetarget="res/xml/config.xml" parent="/*">
            <featurename="Echo">
                <paramname="android-package"value="org.apache.cordova.echo.Echo"/>
            </feature>
      </config-file>

      <config-filetarget="AndroidManifest.xml" parent="/*">
            <uses-permissionandroid:name="android.permission.WRITE_EXTERNAL_STORAGE" />
      </config-file>

      
      

   </platform>   

</plugin>




其中js-module指向的就是我们刚才所写的js文件的路径,src指向www/echo.js,name属性自己定义,clobbers代表我们在客户端调用的时候的实例名。
下面最重要的platform节点代表每个平台下的配置,
<source-filesrc="src/android/Echo.java"target-dir="src/org/apache/cordova/echo" />
src代表Java源文件的地址,target-dir代表你要拷贝到项目中的地址
<config-file target="res/xml/config.xml"parent="/*">
<feature name="Echo">
<param name="android-package" value="org.apache.cordova.echo.Echo"/>
</feature>
</config-file>
这个是使用命令行之后添加到config文件中的节点,其中<param name="android-package"value="org.apache.cordova.echo.Echo"/>中的value代表从插件中Java文件的路径及类名
以上就是plugin.xml文件,至此,我们已经完成了一个自定义插件的编写,整个插件文件夹下面的目录结构如下:
7. 下面使用命令行将这个插件添加到你的项目中去在nodejs下面切换到你的项目目录中去

注意一定要写您的org.apache.cordova.echo对应目录





8. 表示插件已经加入到了你的项目当中,再看看我们的项目结构,你会发现src下面多了我们刚才写的源码,以及config.xml和cordova_plugin.js的变化






在assets的www目录下的plugins多出了我们刚才写的js文件





在cordova_plugins.js中多了一段关于插件注册的代码






这些都是命令行cordova plugin add自动生成的,不用管,当然如果你不想使用命令行方式或者不具备命令行环境,你也可以手动修改以上文件
至此,我们的项目中可以调用自定义代码了
在index.html中写入以下代码

<script>
         function onDeviceReady(){   
                                                       alert('执行');      
                                                       /*
                                                                           window.echo("echo1111",function(echoValue) {
                                                                            alert(echoValue);               
                                                                           });               
                                                               */
                                                      test(function(succ){
                                                               alert('成功'+succ);            
                                                      },function(err){
                                                               alert('失败'+err);
                                                      },['HelloMobileWorld','testWorld']);
                                             }
                                             
                                             functiontest(success,error,option){
                                                      alert('执行test');
                                                      cordova.exec(success,error, "Echo", "echo", option);
                                             }
                                             
                                             
         
         </script>

                                          



admin 发表于 2015-5-2 12:08:26

很不错的

admin 发表于 2015-5-2 12:09:24

{:4_86:}{:4_86:}{:4_86:}{:4_86:}{:4_86:}

session123 发表于 2015-5-4 19:48:07

学习 uexi。 。 。 。 。

dsm0217 发表于 2015-7-15 09:14:20

如果带jar包的自定义插件该怎么添加呢??

lijixiang 发表于 2015-11-18 15:30:59

我这样导入了    但是报错少了一个jar包报这个错误 org.apache.cordova.api但是我导入了 cordova这个jar包啊

lijixiang 发表于 2015-11-18 15:35:01

知道了   是我写的时候导入包多谢了一个api去掉这个api就可以了

cswisodmliu 发表于 2015-12-1 16:45:38

http://www.ionic.ren/2015/11/26/ionic%E5%AE%9E%E7%94%A8%E5%8A%9F%E8%83%BD%E4%B8%89-%E7%BC%96%E5%86%99cordova%E6%8F%92%E4%BB%B6plugin/

free_chenwei 发表于 2016-1-2 00:37:19

占位mark

OpenVV 发表于 2016-8-18 16:51:12

楼主,在新的webview中调cordova插件,应该怎么搞呢
页: [1] 2
查看完整版本: phonegap插件-cordova插件开发_适合3.0以上插件制作