android-phonegap3.5插件开发方法教程

此篇文章以cordova 3.5版本编写

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>