您的位置：首页 > 移动开发 > Android开发

android phonegap插件开发方法 plugin

2014-03-03 22:41 447 查看
此篇文章以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工程 命令如下

phonegap create my-app
 cd my-app
 phonegap run android




<2> 将工程导入 eclipse





<3> 配置 cordova _plugins.js 文件



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



cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
    {
        "file": "plugins/org.apache.cordova.camera/www/CameraConstants.js",
        "id": "org.apache.cordova.camera.Camera",
        "clobbers": [
            "Camera"
        ]
    },
    {
        "file": "plugins/org.apache.cordova.camera/www/CameraPopoverOptions.js",
        "id": "org.apache.cordova.camera.CameraPopoverOptions",
        "clobbers": [
            "CameraPopoverOptions"
        ]
    },
    {
        "file": "plugins/org.apache.cordova.camera/www/Camera.js",
        "id": "org.apache.cordova.camera.camera",
        "clobbers": [
            "navigator.camera"
        ]
    },
    {
        "file": "plugins/org.apache.cordova.camera/www/CameraPopoverHandle.js",
        "id": "org.apache.cordova.camera.CameraPopoverHandle",
        "clobbers": [
            "CameraPopoverHandle"
        ]
    },
    {
        "file": "plugins/org.apache.cordova.dialogs/www/notification.js",
        "id": "org.apache.cordova.dialogs.notification",
        "merges": [
            "navigator.notification"
        ]
    },
    {
        "file": "plugins/org.apache.cordova.dialogs/www/android/notification.js",
        "id": "org.apache.cordova.dialogs.notification_android",
        "merges": [
            "navigator.notification"
        ]
    },
    {
        "file": "plugins/org.apache.cordova.vibration/www/vibration.js",
        "id": "org.apache.cordova.vibration.notification",
        "merges": [
            "navigator.notification"
        ]
    },
    {
        "file": "plugins/intent.js",
        "id": "org.apache.cordova.intent",
        "merges": [
            "navigator.intent"
        ]
    },
];
module.exports.metadata = 
// TOP OF METADATA
{
    "org.apache.cordova.camera": "0.2.7",
    "org.apache.cordova.dialogs": "0.2.6",
    "org.apache.cordova.vibration": "0.3.7",
    "org.apache.cordova.intent" :"0.0.1",

}
// BOTTOM OF METADATA
});


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

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

module.exports= [{}];

module.exports.metadata = { }



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

{
        "file": "plugins/intent.js",
        "id": "org.apache.cordova.intent",
        "merges": [
            "navigator.intent"
        ]
    },



file 代表 javascript写的接口位置

id 代表 唯一

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



在module.exports.metadata 中配置id

标号随意



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






贴上intent.js的接口代码

cordova.define("org.apache.cordova.intent", function(require, exports, module) { 

var exec = require('cordova/exec');

module.exports = {

    /**
     * 一共5个参数
       第一个 :成功会掉
       第二个 :失败回调
       第三个 :将要调用的类的配置名字(在config.xml中配置 稍后在下面会讲解)
       第四个 :调用的方法名(一个类里可能有多个方法 靠这个参数区分)
       第五个 :传递的参数  以json的格式
     */
    demo: function(mills) {
        exec(function(winParam){
        	alert(winParam);
        }, null, "Demo", "intent", [mills]);
    },
};

});


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



在javascript中的 调用语句是 

navigator.intent.demo(1);





贴上整的javascript



<!DOCTYPE html>
<html>  
<head>   
  <title>Notification Example</title> 
  <script type="text/javascript" charset="utf-8" src="cordova.js"></script>    
  <script type="text/javascript" charset="utf-8">    
   // Wait for device API libraries to load    
   //    
   document.addEventListener("deviceready", onDeviceReady, false);    
   // device APIs are available    
   //    
   function onDeviceReady() {        
   	 // Empty    
  	}    
    // Show a custom alert    
    
    //    native的 Dialog 对话框
    function showAlert() {        navigator.notification.alert(            'You are the winner!',  // message            
      'Game Over',            
    // title            
    'Done'                  
    // buttonName        
    );    }    
    // Beep three times    
    //    响铃3声
    function playBeep() {        navigator.notification.beep(3);    }    
    // Vibrate for 2 seconds    
    //    振动
    function vibrate() {         navigator.notification.vibrate(100000);    }    
	//	     跳转
    function intent() {        navigator.intent.demo(1);		}    

    </script>  
    </head>  
    <body>    
    <p><a href="#" onclick="showAlert(); return false;">Show Alert</a></p>    
    <p><a href="#" onclick="playBeep(); return false;">Play Beep</a></p>    
    <p><a href="#" onclick="vibrate(); return false;">Vibrate</a></p>  
    <p><a href="#" onclick="intent(); return false;">Html跳转到android界面</a></p>  
    </body>
    </html>














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





config.xml配置 加上 如下

<feature name="Demo">
        <param name="android-package" value="plugins.Plugin_intent" />
    </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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航