最新版本号[免费下载]

phonegap4.0自定义插件_适合3.0以上插件制作

作者:本站编辑 发布时间:2015-11-24 来源:本站原创 点击数:

下面是安装phoengap自带的插件

  cordova plugin add  org.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方法是必须的,供客户端调用。


 

 package  org.apache.cordova.echo;
   
  import  org.apache.cordova.api.CallbackContext;
   
  import  org.apache.cordova.api.CordovaPlugin;
  import  org.apache.cordova.api.PluginResult;
  import  org.json.JSONArray;
  import  org.json.JSONException;
  import  org.json.JSONObject;
   
  public  class 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操作");
                           return  false;
          }
          
      }
      private void echo(String message,  CallbackContext callbackContext) {
          if (message != null &&  message.length() > 0) {
              callbackContext.success(message);
          } else {
               callbackContext.error("Expected one non-empty string  argument.");
          }
      }
  }

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


 


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

  var cordova=require('cordova');
   
  var  Echo =function(){
   
           Echo.prototype.echo=function(success,error,str){
   
                     cordova.exec(sucess,error,'Echo','echo',str)//'Echo'对应我们在java文件中定义的类名,echo对应我们在这个类中调用的自定义方法,str是我们客户端传递给这个方法的参数,是个数组
   
           }
   
  }
  var  echo=new Echo();
   
  module.exports=echo;


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


 


 <?xml  version="1.0" encoding="UTF-8"?>
   
  <plugin  xmlns="http://apache.org/cordova/ns/plugins/1.0"    
      id="org.apache.cordova.echo"
      version="0.0.1">
      <name>Echo</name>
      <description>Echo  Plugin</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-file  src="src/android/Echo.java"  target-dir="src/org/apache/cordova/echo" />
   
          <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-file  target="AndroidManifest.xml" parent="/*">
              <uses-permission  android: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.xmlcordova_plugin.js的变化


 



assetswww目录下的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']);
                                                 }  
                                                 
                                                 function  test(success,error,option){
                                                          alert('执行test');
                                                          cordova.exec(success,  error, "Echo", "echo", option);
                                                 }
                                                 
                                                 
           
           </script>


本文责任编辑: 加入会员收藏夹 点此参与评论>>
复制本网址-发给QQ/微信上的朋友
AI智能听书
选取音色