文档章节

android phonegap插件开发方法 plugin

j
 james_laughing
发布于 2014/12/17 16:16
字数 1069
阅读 109
收藏 0
分类: phonegap 2014-03-03 22:41  5951人阅读  评论(2)  收藏  举报

此篇文章以cordova 3.4版本编写

phonegap的插件开发   与javascript调用android的Activity功能,以及相互传递数据.

本节讲的是 自主编写 phonegap插件提供下载

据我总结核心步骤:  创建工程 ; 编写插件 ;编译工程; 调用插件;

 

        按照如下步骤就能生产出代码:

打开cmd 控制台

1 使用命令行 建立phonegap工程

2 将工程导入 eclipse

3 在assents 目录下的  cordova-plugins.js文件添加配置

4 在plugin目录下编写javascript接口

5 在res/xml 目录下配置  config.xml 文件

6 在src目录下编写java文件

 

最后在javascript文件中调用接口

 

总体说 主要是后4个步骤详细分解讲解

 

 

接下来给大家分解演示:

目测大家都是已经安装好环境的,如果没有搭好环境 可以查看我的phonegap配置文章点击打开链接

调用系统的API 官方文档地址   点击打开链接

<1> 在控制台    创建一个phonegap工程  命令如下

[java]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. phonegap create my-app  
  2. cd my-app  
  3. phonegap run android  


<2> 将工程导入 eclipse

 


<3> 配置 cordova _plugins.js 文件

 

首先给大家看看cordova _plugins.js 文件:

 

[javascript]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. cordova.define('cordova/plugin_list'function(require, exports, module) {  
  2. module.exports = [  
  3.     {  
  4.         "file""plugins/org.apache.cordova.camera/www/CameraConstants.js",  
  5.         "id""org.apache.cordova.camera.Camera",  
  6.         "clobbers": [  
  7.             "Camera"  
  8.         ]  
  9.     },  
  10.     {  
  11.         "file""plugins/org.apache.cordova.camera/www/CameraPopoverOptions.js",  
  12.         "id""org.apache.cordova.camera.CameraPopoverOptions",  
  13.         "clobbers": [  
  14.             "CameraPopoverOptions"  
  15.         ]  
  16.     },  
  17.     {  
  18.         "file""plugins/org.apache.cordova.camera/www/Camera.js",  
  19.         "id""org.apache.cordova.camera.camera",  
  20.         "clobbers": [  
  21.             "navigator.camera"  
  22.         ]  
  23.     },  
  24.     {  
  25.         "file""plugins/org.apache.cordova.camera/www/CameraPopoverHandle.js",  
  26.         "id""org.apache.cordova.camera.CameraPopoverHandle",  
  27.         "clobbers": [  
  28.             "CameraPopoverHandle"  
  29.         ]  
  30.     },  
  31.     {  
  32.         "file""plugins/org.apache.cordova.dialogs/www/notification.js",  
  33.         "id""org.apache.cordova.dialogs.notification",  
  34.         "merges": [  
  35.             "navigator.notification"  
  36.         ]  
  37.     },  
  38.     {  
  39.         "file""plugins/org.apache.cordova.dialogs/www/android/notification.js",  
  40.         "id""org.apache.cordova.dialogs.notification_android",  
  41.         "merges": [  
  42.             "navigator.notification"  
  43.         ]  
  44.     },  
  45.     {  
  46.         "file""plugins/org.apache.cordova.vibration/www/vibration.js",  
  47.         "id""org.apache.cordova.vibration.notification",  
  48.         "merges": [  
  49.             "navigator.notification"  
  50.         ]  
  51.     },  
  52.     {  
  53.         "file""plugins/intent.js",  
  54.         "id""org.apache.cordova.intent",  
  55.         "merges": [  
  56.             "navigator.intent"  
  57.         ]  
  58.     },  
  59. ];  
  60. module.exports.metadata =   
  61. // TOP OF METADATA  
  62. {  
  63.     "org.apache.cordova.camera""0.2.7",  
  64.     "org.apache.cordova.dialogs""0.2.6",  
  65.     "org.apache.cordova.vibration""0.3.7",  
  66.     "org.apache.cordova.intent" :"0.0.1",  
  67.   
  68. }  
  69. // BOTTOM OF METADATA  
  70. });  


我之前配置了camera  ,dialog , vibration   ,大家可以参考

现在来分解  ,这里要配置2个地方

module.exports= [{}];

module.exports.metadata = { }

 

在module.exports 的花括号里面配置

[javascript]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. {  
  2.         "file""plugins/intent.js",  
  3.         "id""org.apache.cordova.intent",  
  4.         "merges": [  
  5.             "navigator.intent"  
  6.         ]  
  7.     },  

 

file 代表  javascript写的接口位置

id   代表  唯一

merges   代表你在 javascript中调用该接口的语句    (类似activity中的 getApplication() 等等 ;就是个调用语句)

 

在module.exports.metadata 中配置id  

标号随意 

 

<4> 在plugin目录下编写javascript接口
 

 

贴上intent.js的接口代码

[javascript]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. cordova.define("org.apache.cordova.intent"function(require, exports, module) {   
  2.   
  3. var exec = require('cordova/exec');  
  4.   
  5.   
  6.   
  7. module.exports = {  
  8.   
  9.     /** 
  10.      * 一共5个参数 
  11.        第一个 :成功会掉 
  12.        第二个 :失败回调 
  13.        第三个 :将要调用的类的配置名字(在config.xml中配置 稍后在下面会讲解) 
  14.        第四个 :调用的方法名(一个类里可能有多个方法 靠这个参数区分) 
  15.        第五个 :传递的参数  以json的格式 
  16.      */  
  17.     demo: function(mills) {  
  18.         exec(function(winParam){  
  19.             alert(winParam);  
  20.         }, null"Demo""intent", [mills]);  
  21.     },  
  22. };  
  23.   
  24. });  


Demo中成功返回 会弹出一个Alert();

 

在javascript中的 调用语句是

[javascript]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. navigator.intent.demo(1);      

 

 

贴上整的javascript

 


[javascript]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>    
  3. <head>     
  4.   <title>Notification Example</title>   
  5.   <script type="text/javascript" charset="utf-8" src="cordova.js"></script>      
  6.   <script type="text/javascript" charset="utf-8">      
  7.    // Wait for device API libraries to load      
  8.    //      
  9.    document.addEventListener("deviceready", onDeviceReady, false);      
  10.    // device APIs are available      
  11.    //      
  12.    function onDeviceReady() {          
  13.      // Empty      
  14.     }      
  15.     // Show a custom alert      
  16.       
  17.     //    native的 Dialog 对话框  
  18.     function showAlert() {        navigator.notification.alert(            'You are the winner!',  // message              
  19.       'Game Over',              
  20.     // title              
  21.     'Done'                    
  22.     // buttonName          
  23.     );    }      
  24.     // Beep three times      
  25.     //    响铃3声  
  26.     function playBeep() {        navigator.notification.beep(3);    }      
  27.     // Vibrate for 2 seconds      
  28.     //    振动  
  29.     function vibrate() {         navigator.notification.vibrate(100000);    }      
  30.     //       跳转  
  31.     function intent() {          navigator.intent.demo(1);          }      
  32.   
  33.     </script>    
  34.     </head>    
  35.     <body>      
  36.     <p><a href="#" onclick="showAlert(); return false;">Show Alert</a></p>      
  37.     <p><a href="#" onclick="playBeep(); return false;">Play Beep</a></p>      
  38.     <p><a href="#" onclick="vibrate(); return false;">Vibrate</a></p>    
  39.     <p><a href="#" onclick="intent(); return false;">Html跳转到android界面</a></p>    
  40.     </body>  
  41.     </html>  


 

 

 

 

 

 

<5> 在res/xml 目录下配置  config.xml 文件 

 

config.xml配置 加上 如下

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <feature name="Demo">  
  2.     <param name="android-package" value="plugins.Plugin_intent" />  
  3. </feature>  


feature的name属性   非常重要 

name必须是步骤< 4 >中   function中调用的类名

value属性指定插件在src目录下的java文件  (命名空间)

 

 

今天就写到这里 

 

 

 example:

      明天整理后提交  今晚先睡了 ~~~谢谢 

      插件Demo下载地址: http://download.csdn.net/detail/aaawqqq/6992627

           

工程下载    将phonegap的platforms导入到eclipse中  

如果报错clear一下  查看导的lib包 有没有报错

如果还有错  那么就是您选用了  google的API   改成最新版的android  API 就好了

具体排查错误  可以看我的这一篇Blog:  http://blog.csdn.net/aaawqqq/article/details/20463183

 

 

本文转载自:http://blog.csdn.net/aaawqqq/article/details/20401111

j
粉丝 29
博文 455
码字总数 22188
作品 0
广州
私信 提问
phoneGap3.0安装步骤(以windows下的android环境为例):

phoneGap3.0安装步骤(以windows下的android环境为例): 环境: WIN系统,JDK,Android,Eclipse,Ant,Git,PhoneGap3.x (Cordova) 1. 安装JRE,设置JAVAHOME,比如JAVAHOME=C:programJavaj...

kisshua
2014/03/05
106
0
PhoneGap 在 Android 上的插件开发方法介绍

简介: 移动应用开发已经成为软件开发的一个重要方向,但是移动开发面临的一个重要问题就是跨平台的问题。 PhoneGap 作为一个多平台的软件开发框架,提供了一次编写多个平台的运行。目前已经...

IBMdW
2012/04/27
2.9K
0
PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码

按照我一惯得套路,我会先说一点废话。PhoneGap和Cordova什么关系?为什么有的地方叫Cordova而有的地方叫PhoneGap ?PhoneGap是一款HTML5平台,通过它,开发商可以使用HTML、CSS及JavaScript来...

Java编程思想
2014/07/21
8.7K
0
PhoneGap 插件简介

一、PhoneGap平台 前不久PhoneGap发布了1.0版本,这为移动开发大家族提供了又一个跨平台的解决方案。开发者只要有JavaScript、CSS3、Html5的基础就可以快速开发移动应用,并且一次开发支持i...

无鸯
2011/09/06
6.8K
2
基于PhoneGap的Android应用开发-Get started

PhoneGap是一款开源的手机应用开发平台,它仅仅只用HTML和JavaScript语言就可以制作出能在多个移动设备上运行的应用。 PhoneGap将移动设备本身提供的复杂的API进行了抽象和简化,提供了一系列...

无鸯
2011/09/09
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

IT兄弟连 HTML5教程 HTML5表单 小结及习题

小结 HTML表单提交的方法有get方法和post方法,get方法的作用是从指定的资源请求数据,post方法的作用是向指定的资源提交要被处理的数据。HTML表单一直都是Web的核心技术之一,有了它我们才能...

老码农的一亩三分地
21分钟前
13
0
向maven工程中导入自己封装好的jar包方法

1.打开cmd窗口 输入并执行:mvn install:install-file -DgroupId=com.test   -DartifactId=ptest -Dversion=0.1  -Dfile=E:\test\test-0.1.0.jar    -Dpackaging=jar注:Dgr......

gantaos
23分钟前
3
0
【jQuery基础学习】09 jQuery与前端(这章很水)

本文转载于:专业的前端网站➨【jQuery基础学习】09 jQuery与前端(这章很水) 这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的...

前端老手
34分钟前
11
0
深度科技与金山云完成兼容互认证 共同促进我国软件生态发展

近日,深度科技与金山云完成兼容互认证工作,经双方共同严格测试,深度操作系统ARM服务器版软件V15与金山云分布式数据库软件DragonBase V1.0相互兼容、稳定运行,可以为企业级应用提供全面保...

后浪涛涛
35分钟前
7
0
Less导入选项

Less 提供了CSS @import CSS规则的几个扩展,以提供更多的灵活性来处理外部文件。 语法: @import (keyword) "filename"; 以下是导入指令的相关详情: reference,使用较少的文件但不输出。 ...

凌兮洛
51分钟前
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部