设为首页
加入收藏
绿

android phonegap插件开发方法 plugin

[日期:2015/5/27 20:33:09] [字体: ]

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 plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. phonegap create my-app  
  2. cd my-app  
  3. phonegap run android  


<2> 将工程导入 eclipse

 


<3> 配置 cordova _plugins.js 文件

 

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

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

[javascript] view plaincopyprint?
以下是引用片段:
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
});

以下是引用片段:
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 的花括号里面配置

[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
以下是引用片段:
{
"file": "plugins/intent.js",
"id": "org.apache.cordova.intent",
"merges": [
"navigator.intent"
]
},

以下是引用片段:
{
"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的接口代码

[javascript] view plaincopyprint?在CODE上查看代码片

以下是引用片段:
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中的 调用语句是

[javascript] view plaincopyprint?
以下是引用片段:
navigator.intent.demo(1);
navigator.intent.demo(1);

贴上整的javascript

 


 

[javascript] view plaincopyprint?
以下是引用片段:
<!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>
<!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配置 加上 如下

[html] view plaincopyprint?
以下是引用片段:
<feature name="Demo">
<param name="android-package" value="plugins.Plugin_intent" />
</feature>
<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

阅读:3334次  
收藏到:新浪VIVI  和讯网摘  博彩中心  365Key网摘  poco网摘  加入狐摘  天极网摘  亿友响享Yeeyoo  网摘中国  加加文摘  igooi-it网摘  5seek网摘  收藏到I2Key  我摘网摘  天下图摘  YouNote  百特门
打印
·《关于 Windows 7 停止技术支持和免费安全更新的说明》微软官文 2019/5/15 8:39:26
·春季预防毒蘑菇中毒提示 2019/3/11 15:33:10
·懂电脑先认识病毒命名规则,病毒是怎么命名的 2017/7/27 11:50:22
·企业公司局域网如何组建 局域网搭建方法 2016/1/10 16:26:06
·JDK如何配置环境变量 2015/5/27 20:28:08
声明:本站部分资料来自网上收集,其版权归作者本人所有,如果有任何侵犯您权益的地方,请联系我们,我们将马上进行整理,谢谢。
当前没有评论
查看全部评论  

   字数:≤500
点评:
邮箱: 姓名:
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款