欢迎访问 夜阑小雨 我的学习碎片档案,这里记录了我的学习内容和工作中经验,希望给您带去帮助。

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

Android开发 夜阑小雨 1169℃ 0评论

 

此篇文章以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

  1. cd my-app  
  2. 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 的花括号里面配置

     

    1. "file": "plugins/intent.js", 
    2. "id": "org.apache.cordova.intent", 
    3. "merges": [ 
    4. "navigator.intent"
    5.         ] 
    6.     }, 

    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中的 调用语句是

     

    1. 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文件  (命名空间)

    转载请注明:夜阑小雨 » android-phonegap3.5插件开发方法教程

    喜欢 (0)or分享 (0)
    发表我的评论
    取消评论

    表情

    Hi,您需要填写昵称和邮箱!

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址