现在的位置: 首页 > 综合 > 正文

PhoneGap 插件简介

2017年11月25日 ⁄ 综合 ⁄ 共 6996字 ⁄ 字号 小 中 大 ⁄ 评论关闭

http://www.oschina.net/question/163910_27119

一、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工程

如下图所示： 
step1 

 


3.包含PhoneGap依赖

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

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

4.实现插件类


 

代码：

001 /**
002  *
Example of Android PhoneGap Plugin
003  */
004 package com.trial.phonegap.plugin.directorylisting;
005  
006  
007 import java.io.File;
008  
009  
010 import org.json.JSONArray;
011 import org.json.JSONException;
012 import org.json.JSONObject;
013  
014  
015 import android.util.Log;
016  
017  
018 import com.phonegap.api.Plugin;
019 import com.phonegap.api.PluginResult;
020 import com.phonegap.api.PluginResult.Status;
021  
022  
023 /**
024  *
PhoneGap plugin which can be involved in following manner from javascript
025  *
<p>
026  *
result example -
027  *
{"filename":"/sdcard","isdir":true,"children":[{"filename":"a.txt"
028  *
,"isdir":false},{..}]}
029  *
</p>
030  *
031  *
<pre>
032  *
{@code
033  *
successCallback = function(result){
034  *    
//result is a json
035  * 
036  *
}
037  *
failureCallback = function(error){
038  *    
//error is error message
039  *
}
040  *
041  *
DirectoryListing.list("/sdcard",
042  *       
successCallback
043  *       
failureCallback);
044  *                                
045  *
}
046  *
</pre>
047  *
048  *
@author Rohit Ghatol
049  *
050  */
051 public class DirectoryListPlugin extends Plugin
{
052     /**
List Action */
053     public static final String
ACTION = "list";
054  
055  
056     /*
057      *
(non-Javadoc)
058      *
059      *
@see com.phonegap.api.Plugin#execute(java.lang.String,
060      *
org.json.JSONArray, java.lang.String)
061      */
062     @Override
063     public
PluginResult execute(String action, JSONArray data, String callbackId) {
064         Log.d("DirectoryListPlugin",
"Plugin Called");
065         PluginResult
result = null;
066         if
(ACTION.equals(action)) {
067             try
{
068                 String
fileName = data.getString(0);
069                 JSONObject
fileInfo = getDirectoryListing(new File(fileName));
070                 Log
071                         .d("DirectoryListPlugin",
"Returning "
072                                 +
fileInfo.toString());
073                 result
= new PluginResult(Status.OK, fileInfo);
074             }
catch (JSONException jsonEx) {
075                 Log.d("DirectoryListPlugin",
"Got JSON Exception "
076                         +
jsonEx.getMessage());
077                 result
= new PluginResult(Status.JSON_EXCEPTION);
078             }
079         }
else {
080             result
= new PluginResult(Status.INVALID_ACTION);
081             Log.d("DirectoryListPlugin",
"Invalid action : " + action
082                     +
" passed");
083         }
084         return
result;
085     }
086  
087  
088     /**
089      *
Gets the Directory listing for file, in JSON format
090      *
091      *
@param file
092      *           
The file for which we want to do directory listing
093      *
@return JSONObject representation of directory list. e.g
094      *        
{"filename":"/sdcard"
095      *        
,"isdir":true,"children":[{"filename":"a.txt"
096      *        
,"isdir":false},{..}]}
097      *
@throws JSONException
098      */
099     private JSONObject
getDirectoryListing(File file) throwsJSONException
{
100         JSONObject
fileInfo = new JSONObject();
101         fileInfo.put("filename",
file.getName());
102         fileInfo.put("isdir",
file.isDirectory());
103         if (file.isDirectory())
{
104             JSONArray
children = new JSONArray();
105             fileInfo.put("children",
children);
106             if (null !=
file.listFiles()) {
107                 for (File
child : file.listFiles()) {
108                     children.put(getDirectoryListing(child));
109                 }
110             }
111         }
112         return fileInfo;
113     }
114 }
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

代码：

01 /**
02  * 
03  *
@return Object literal singleton instance of DirectoryListing
04  */
05 var
DirectoryListing = {
06 /**
07  *
@param directory The directory for which we want the listing
08  *
@param successCallback The callback which will be called when directory listing is successful
09  *
@param failureCallback The callback which will be called when directory listing encouters an error
10  */
11     list:
function(directory,successCallback, failureCallback) {
12         return PhoneGap.exec(successCallback,       //Success
callback from the plugin
13          failureCallback,        //Error
callback from the plugin
14          'DirectoryListPlugin',  //Tell
PhoneGap to run "DirectoryListingPlugin" Plugin
15          'list',                 //Tell
plugin, which action we want to perform
16          [directory]);           //Passing
list of args to the plugin
17     }
18 };

三、测试

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

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

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

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

1 <plugin name="DirectoryListPlugin"
2     value="com.trial.phonegap.plugin.directorylisting.DirectoryListPlugin" />

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

代码：

view
source

print?

01 <!DOCTYPE
HTML>
02 <html>
03      <head>
04           <title>PhoneGap</title>
05      </head>
06      <body>
07           <!--
Button -->
08           <input
disabled id="list-sdcard" type="button"value="List
SDCard Contents"  />
09           <hr>
10   
11           <!--
Place Holder for placing
the SD Card Listing -->
12           <div
id="result"></div>
13   
14           <hr>
15   
16           <script
type="text/javascript" src="phonegap-1.0.0.js"></script>
17           <script
type="text/javascript"src="directorylisting.js"></script>
18           <script
type="text/javascript" >
19    document.addEventListener('deviceready', function()
{
20    var btn
= document.getElementById("list-sdcard");
21    btn.onclick
= function()
{
22     DirectoryListing.list(    "/sdcard",
23 function(r){printResult(r)},
24 function(e){log(e)}
25 );
26     }
27     btn.disabled=false;
28   }, true);
29   
30   
31  function printResult(fileInfo){
32   var innerHtmlText=getHtml(fileInfo);   
33   document.getElementById("result").innerHTML=innerHtmlText;
34  }
35   
36  function getHtml(fileInfo){
37  var htmlText="<ul><li>"+fileInfo.filename;
38  if(fileInfo.children){
39   
40  for(var index=0;index<fileInfo.children.length;index++){
41  htmlText=htmlText+getHtml(fileInfo.children[index]);
42  }
43  }
44  htmlText=htmlText+"</li></ul>";
45  return htmlText;
46   
47  }
48           </script>
49   
50      </body>
51 </html>

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

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

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞