PhoneGap 插件简介

PhoneGap 插件简介

#广州# OSC源创会第31期（12月27日）开始报名，OSC自曝家丑！

一、PhoneGap平台

前不久PhoneGap发布了1.0版本，这为移动开发大家族提供了又一个跨平台的解决方案。开发者只要有JavaScript、CSS3、Html5的基础就可以快速开发移动应用，并且一次开发支持iOS、iOS(xcode 4)、Android、WebOS、Blackberry、Symbian 六大平台。不过，JavaScript的速度虽然在近些年提高了100倍，其速度还是无法和原生代码相比。在编写复杂的业务逻辑时JavaScript显得力不从心。那么PhoneGap有没有办法解决这个问题呢？答案是肯定的。PhoneGap平台提供了插件功能，开发者可以将重量级的功能封装在原生代码开发的插件中，并将接口暴露给JavaScript，JavaScript在调用插件功能时都是非阻塞的，所以并不影响JavaScript层的性能。下面我们就看看如何编写和调用一个PhoneGap插件吧。

二、编写插件

由于要写原生代码，所以各个平台插件的编写略有不同。我们以Android为例吧。这个是PhoneGap官方的例子，原文网址：
http://wiki.phonegap.com/w/page/36753494/How%20to%20Create%20a%20PhoneGap%20Plugin%20for%20Android 需要翻*墙。

1.插件功能

PhoneGap提供了文件读写的Api，但没有提供列出文件清单的功能。我们编写一个名为 DirectoryListingPlugin 的插件来实现列表SDCARD上文件的功能吧。

2.创建一个Android工程

如下图所示：

3.包含PhoneGap依赖

  • 下载PhoneGap并解压
  • 在工程根目录新建目录/libs
  • 拷贝 phonegap.jar 到 /libs

注：由于是写插件，所以只有phonegap.jar就够了。要建立完整的PhoneGap应用，可参考http://www.phonegap.com/start/#android

4.实现插件类

代码：

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

/**

* Example of Android PhoneGap Plugin

*/

packagecom.trial.phonegap.plugin.directorylisting;

importjava.io.File;

importorg.json.JSONArray;

importorg.json.JSONException;

importorg.json.JSONObject;

importandroid.util.Log;

importcom.phonegap.api.Plugin;

importcom.phonegap.api.PluginResult;

importcom.phonegap.api.PluginResult.Status;

/**

* PhoneGap plugin which can be involved in following manner from javascript

* <p>

* result example -

* {"filename":"/sdcard","isdir":true,"children":[{"filename":"a.txt"

* ,"isdir":false},{..}]}

* </p>

*

* <pre>

* {
@code

* successCallback = function(result){

*     //result is a json

*

* }

* failureCallback = function(error){

*     //error is error message

* }

*

* DirectoryListing.list("/sdcard",

*        successCallback

*        failureCallback);

*

* }

* </pre>

*

*
@author Rohit Ghatol

*

*/

publicclassDirectoryListPluginextendsPlugin {

/** List Action */

publicstaticfinalString ACTION ="list";

/*

* (non-Javadoc)

*

*
@see com.phonegap.api.Plugin#execute(java.lang.String,

* org.json.JSONArray, java.lang.String)

*/

@Override

publicPluginResult execute(String action, JSONArray data, String callbackId) {

Log.d("DirectoryListPlugin","Plugin Called");

PluginResult result =null;

if(ACTION.equals(action)) {

try{

String fileName = data.getString(0);

JSONObject fileInfo = getDirectoryListing(newFile(fileName));

Log

.d("DirectoryListPlugin","Returning "

+ fileInfo.toString());

result =newPluginResult(Status.OK, fileInfo);

}catch(JSONException jsonEx) {

Log.d("DirectoryListPlugin","Got JSON Exception "

+ jsonEx.getMessage());

result =newPluginResult(Status.JSON_EXCEPTION);

}

}else{

result =newPluginResult(Status.INVALID_ACTION);

Log.d("DirectoryListPlugin","Invalid action : "+ action

+" passed");

}

returnresult;

}

/**

* Gets the Directory listing for file, in JSON format

*

*
@param file

*            The file for which we want to do directory listing

* @return JSONObject representation of directory list. e.g

*         {"filename":"/sdcard"

*         ,"isdir":true,"children":[{"filename":"a.txt"

*         ,"isdir":false},{..}]}

* @throws JSONException

*/

privateJSONObject getDirectoryListing(File file)throwsJSONException {

JSONObject fileInfo =newJSONObject();

fileInfo.put("filename", file.getName());

fileInfo.put("isdir", file.isDirectory());

if(file.isDirectory()) {

JSONArray children =newJSONArray();

fileInfo.put("children", children);

if(null!= file.listFiles()) {

for(File child : file.listFiles()) {

children.put(getDirectoryListing(child));

}

}

}

returnfileInfo;

}

}

5.将插件类导出成jar 包

Eclipse中如下操作：

  • 在要生成jar的项目上右击，选择菜单上的Export(导出)
  • 导出类型选择Jar File
  • 选择或者输入生成路径
  • 选择要导出的类

我们导出成directorylist.jar

6.实现JavaScript插件

  • 创建一个名为DirectoryListing的类
  • 创建一个成员函数list()
  • 在成员函数中调用PhoneGap.exec(<<successCallback>>,<<failureCallback>>,<<Plugin Name>>,<<Action Name>>,<<Arguments Array>>);
  • 将js文件保存为directorylisting.js

代码：

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

/**

*

* @return Object literal singleton instance of DirectoryListing

*/

var DirectoryListing = {

/**

* @param directory The directory for which we want the listing

* @param successCallback The callback which will be called when directory listing is successful

* @param failureCallback The callback which will be called when directory listing encouters an error

*/

list: function(directory,successCallback, failureCallback) {

returnPhoneGap.exec(successCallback,       //Success callback from the plugin

failureCallback,       //Error callback from the plugin

‘DirectoryListPlugin‘, //Tell PhoneGap to run "DirectoryListingPlugin" Plugin

‘list‘,                //Tell plugin, which action we want to perform

[directory]);          //Passing list of args to the plugin

}

};

三、测试

1.创建一个PhoneGap应用 http://www.phonegap.com/start/#android

2.将 directorylisting.jar 加入工程依赖

3.将directorylisting.js放入到 /assets/www 目录下。

4.在 /res/xml/plugins.xml 文件中添加

?


1

2

<pluginname="DirectoryListPlugin"

value="com.trial.phonegap.plugin.directorylisting.DirectoryListPlugin"/>

5.在index.html中调用DirectoryListing.list

代码：

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

<!DOCTYPE HTML>

<html>

<head>

<title>PhoneGap</title>

</head>

<body>

<!-- Button -->

<input disabled id="list-sdcard"type="button"value="List SDCard Contents" />

<hr>

<!-- Place Holderforplacing the SD Card Listing -->

<div id="result"></div>

<hr>

<script type="text/javascript"src="phonegap-1.0.0.js"></script>

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

<script type="text/javascript">

document.addEventListener(‘deviceready‘,function() {

varbtn = document.getElementById("list-sdcard");

btn.onclick =function() {

DirectoryListing.list(   "/sdcard",

function(r){printResult(r)},

function(e){log(e)}

);

}

btn.disabled=false;

},true);

functionprintResult(fileInfo){

varinnerHtmlText=getHtml(fileInfo);

document.getElementById("result").innerHTML=innerHtmlText;

}

functiongetHtml(fileInfo){

varhtmlText="<ul><li>"+fileInfo.filename;

if(fileInfo.children){

for(varindex=0;index<fileInfo.children.length;index++){

htmlText=htmlText+getHtml(fileInfo.children[index]);

}

}

htmlText=htmlText+"</li></ul>";

returnhtmlText;

}

</script>

</body>

</html>

至此，一个PhoneGap Android插件就成完了。

文章转自 : http://blog.csdn.net/yyan/article/details/6664863

时间： 2024-11-12 20:35:00

PhoneGap 插件简介的相关文章

Sublime 常用插件简介

Sublime   常用插件简介 emmet: 前端必备神器.花个十几分钟学下Emmet语法 ,就可以极大提高web开发者HTML和CSS工作效率啦.一句话,牛逼---必备 CSS3: CSS3语法高亮.CSS语法提示,但是浏览器的私有属性不会高亮.     -----必备 CSS Extended Completions: 提示css文件(包括关联进来的)中的类名,非常好用. JavaScript Completions javascript原生语法提示, jQuery 提供了jQuery的A

十分钟开发一个调用Activity的PhoneGap插件

在HybridApp开发中,非常多业务我们是没有办法通过HTML5+js实现的,比方调用第三方的包括Activity的jar包,一些必须使用原生代码才干实现的功能,比方复杂的UI的效果,调用通讯相关的协议栈,第三方支付sdk等.这样的情况我们须要通过写cordova插件的方式,包装android原生代码为插件,供上层javascript调用.本文解说一个调用Activity并返回Activity结果的cordova插件样例,帮助大家掌握cordova plugin的开发 . Cordova插件是

百度广告cordova/phonegap插件使用教程

百度联盟cordova/phonegap插件,是一个方便html5开发着使用的百度广告插件,能很方便的在html5混合应用如cordova,xdk,appcan,webx5,jqmobile.sencha touch,ionic中接入百度ssp联盟广告, ios和android应用都支持,代码完全一样无需修改. 使用过程如下 安装cordova/phonegap百度广告插件 我最开始是使用的cordova命令行直接通过github远程的方式安装,在命令行中输入 cordova plugin ad

Android插件简介

/** * @actor Stafen.D * @time 2015.02.06 * @blog http://www.cnblogs.com/stafen */ Android插件简介 Android下,默认的情况是,每个apk相互独立的,基本上每个应用都是一个dalvik虚拟机,都有一个uid,再配合上linux本身的权限机制,使得apk互通很难直接进行.但作为一个独立应用的集成,不管多少个apk,都可以并为一个单独的dalvik虚拟机,直观的反映给开发人员就是在shell下列出进程,那几个

phoneGap的Android下编写phonegap 插件

一. javascript 端的编写  第一个参数 成功的回调函数 第二个参数 失败的回调函数 第三个参数 是插件的类名称,也就是后台java文件的类名 第四个参数 执行的 action 名称    对应的是后台java代码中的action名称 第五个参数 传递的参数是一个数组 function helloworld(success,error,option){ cordova.exec(success, error, "HelloWorld", "echo", o

Highchart插件简介和引入方式

一.Highchart简介: Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表. Highcharts 支持的图表类型有直线图.曲线图.区域图.柱状图.饼状图.散状点图.仪表图.气泡图.瀑布流图等多达 20 种图表,其中很多图表可以集成在同一个图形中形成混合图. http://www.hcharts.cn/products/highcharts http://www.hcharts.cn/docs

phonegap插件加载与使用

有朋友问能不能在CanTK和AppBuilder开发的APP里发送UDP数据,HTML5里只能用HTTPS/HTTP/WebSocket几种通讯方式,要使用UDP需要通过phonegap打包成APK等特定平台的安装包.为此我写了一个UDP的例子,但是运行时遇到的问题,所以花了些时间去研究phonegap加载udp插件的过程. 1.添加需要的插件 在cordova_plugins.js中存放了APP引用的插件列表,可以用phonegap plugin add添加,如: phonegap plugi

iOS8扩展插件简介

一．iOS8扩展插件概述 WWDC14除了发布了OS X v10.10和switf外,iOS8.0也开始变得更加开放了.说到开放,当然要数应用扩展(App Extension)了.顾名思义,应用扩展允许开发者扩展应用的自定义功能和内容,能够让用户在使用其他应用程序时使用该项功能,从而实现各个应用程序间的功能和资源共享.可以将扩展理解为一个轻量级(nimble and lightweight)的分身. 以下为常见的三类插件: Target Type Extension point identifi

第九章 jQuery验证插件简介

1. 表单验证插件-----Validation <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content=&qu