PhoneGap中文网

 找回密码
 立即注册
查看: 27558|回复: 5

phonegap3.5插件开发教程

[复制链接]

493

主题

2035

帖子

6894

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6894
发表于 2014-8-24 16:53:08 | 显示全部楼层 |阅读模式
由于phonegap升级较快,在3.X之后改变了它的插件机制,所有调用手机原生的功能全部以外部插件的形式提供,创建phonegap项目之后不再能够直接调用系统功能API如camera,device等,所以必须以插件的形式引入到项目中来,才能够使用。     这里主要讲的是自定义插件的开发及在项目中调用,关于怎么使用别人已经写好的插件请参考官网http://docs.phonegap.com/en/3.3. ... Development%20Guide
首先看一下我们项目的一个目录结构
031443122741335.jpg
说实话,使用命令行方式创建并导入到eclipse里面之后这个目录结构并不是很清晰,变化较大。

接着,我们来创建一个自定义的插件,在你的硬盘中如我的G盘创建一个目录如

031447391024019.jpg
org.apache.cordova.echo,这个目录就是存放你自定义插件的根目录,这个目录下首先要创建一个Java文件,既是你需要扩展的插件的Java代码,将其放置在org.apache.cordova.echo目录下的src下面的android目录下,代表的是在安卓平台下的代码,在这个目录下创建一个Echo.java文件,代码如下:

031450576655682.jpg

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

至此,我们的文件夹下面的代码结构为

031454024154991.jpg

这是第一步,Java代码已经完成,
第二步需要在org.apache.cordova.echo目录下创建一个www目录,并在这个目录下创建一个js文件,取名叫echo.js,用来提供客户端调用java代码的桥梁,这个js代码如下所示:

031500396185872.jpg

其中Echo.prototype.echo=function(success,error,str){
cordova.exec(sucess,error,'Echo','echo',str)//'Echo'对应我们在java文件中定义的类名,echo对应我们在这个类中调用的自定义方法,str是我们客户端传递给这个方法的参数,是个数组
}
至于其他的图function变量,我们完全可以自己定义。
至此,第二步已经完成,下一步是要写一个plugin.xml文件,用于命令行去进行插件的注册,在org.apache.cordova.echo文件夹下建立一个plugin.xml文件,代码如下:

031507449621617.jpg


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

031510200551332.jpg
下面使用命令行将这个插件添加到你的项目中去
在nodejs下面切换到你的项目目录中去
如下所示:

031513040553568.jpg
表示插件已经加入到了你的项目当中,再看看我们的项目结构,你会发现src下面多了我们刚才写的源码,以及config.xml和cordova_plugin.js的变化
031514443052328.jpg
在assets的www目录下的plugins多出了我们刚才写的js文件
031517301026380.jpg
在cordova_plugins.js中多了一段关于插件注册的代码
031535494308397.jpg
这些都是命令行cordova plugin add自动生成的,不用管,当然如果你不想使用命令行方式或者不具备命令行环境,你也可以手动修改以上文件
至此,我们的项目中可以调用自定义代码了
在index.html中写入以下代码
031527393838019.jpg
其中onsuccess代表成功执行的回调,onfailure代表失败执行的回调,result参数代表java代码返回的结果,["send to native"]是我们客户端调用的时候给java代码传递的参数,将这个事件在deviceReady中注册给一个按钮,点击这个按钮,结果如下:

这代表我们传递给java代码的参数被它传回给客户端,实现了js对于Java原生代码的调用。至此,我们一个小的自定义插件就完成了,对于复杂的插件功能需要Java代码去支持,这里就不赘述了,原理都是一样的。
以上文章主要参考了以下资料:
1.csdn网友的博客:http://blog.csdn.net/newborn2012/article/details/26258803
2.官网资料:http://docs.phonegap.com/en/3.3. ... Development%20Guide
3.iteye网友博客:http://rensanning.iteye.com/blog/2029362


本文来自:http://www.cnblogs.com/myzhibie/p/3888436.html


回复

使用道具 举报

0

主题

17

帖子

52

积分

注册会员

Rank: 2

积分
52
发表于 2015-5-7 15:30:16 | 显示全部楼层
很不错,不错,学习学习。跨平台得顶起
回复 支持 反对

使用道具 举报

0

主题

16

帖子

50

积分

注册会员

Rank: 2

积分
50
发表于 2015-5-7 15:24:49 | 显示全部楼层
人不错,学习学习 感觉phonegap+html越来越火了。
回复 支持 反对

使用道具 举报

0

主题

3

帖子

20

积分

新手上路

Rank: 1

积分
20
发表于 2015-8-7 14:56:17 | 显示全部楼层
这东西,官方文档自己都不清不楚的,如果开发?
回复 支持 反对

使用道具 举报

1

主题

9

帖子

36

积分

新手上路

Rank: 1

积分
36
发表于 2015-8-31 16:50:17 | 显示全部楼层
不错,值得学习,www.leixuesong.cn
回复 支持 反对

使用道具 举报

0

主题

54

帖子

304

积分

中级会员

Rank: 3Rank: 3

积分
304
发表于 2015-12-1 16:44:49 | 显示全部楼层
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-3-28 22:09 , Processed in 0.057075 second(s), 40 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表