phonegap的振动响铃和弹窗

时间：2014-03-01 06:02:08 阅读：549 评论：0 收藏：0 [点我收藏+]

phonegap的API提供震动响铃调用原生弹窗功能.

此篇文章以cordova 3.3版本编写

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

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

打开cmd 控制台

1 使用命令行建立phonegap工程

2 进入到phonegap工程下的plugins 文件夹当中 ,使用命令行下载官方插件 ;(输入命令: cordova plugin add org.apache.cordova.vibration)

4 添加生成 android或者IOS 工程 ;android命令如下cordova platform add android (注:oc的把android换成ios)

5 在命令行输入cordova build

6 最后将生成的工程导入编辑器(我用的eclipse)

在assets/www目录下在index.html中添加 javascript 调用语句

接下来给大家演示:

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

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

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

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

bubuko.com,布布扣

<2> 我们从命令行进入到工程目录下的 plugins文件夹

cd my-app cd plugins

bubuko.com,布布扣

<3> 现在开始下载插件本篇讲述camera :

输入:

cordova plugin add org.apache.cordova.dialogs cordova 

plugin add org.apache.cordova.vibration

cordova plugin add org.apache.cordova.camera

bubuko.com,布布扣

插件下载完毕

<4> 添加android 平台工程 (ios把 "android" 替换)

cordova platform add android

bubuko.com,布布扣

<5> 编译android工程

bubuko.com,布布扣

cordova build

至此 Notification 已经生成...

检查下配置文件有没有生成如果没有生成就再次 cordova.build 编译一次

(in app/res/xml/config.xml)
<feature name="Notification">    
<param name="android-package" value="org.apache.cordova.dialogs.Notification" />
</feature>
<feature name="Vibration">    
<param name="android-package" value="org.apache.cordova.vibration.Vibration" />
</feature> 
(in app/AndroidManifest.xml)
<uses-permission android:name="android.permission.VIBRATE" />

现在大家只需要将工程导入到eclipse当中使用官方APi语句在javascript中调用

将下方语句考到 assets目录下 www/index.html 当中完全复制过去;

example:

<!DOCTYPE html>
<html>  
<head>   
 <title>Capture Photo</title>  
 <script type="text/javascript" charset="utf-8" src="cordova.js"></script>   
 <script type="text/javascript" charset="utf-8">    
    var pictureSource;   // picture source 
    var destinationType; // sets the format of returned value    
    // Wait for device API libraries to load    //   
    document.addEventListener("deviceready",onDeviceReady,false);    
        // device APIs are available    //    
        function onDeviceReady() {        pictureSource=navigator.camera.PictureSourceType;        destinationType=navigator.camera.DestinationType;    }   
        // Called when a photo is successfully retrieved    //   
        function onPhotoDataSuccess(imageData) {      
        // Uncomment to view the base64-encoded image data      // 
        console.log(imageData);      
        // Get image handle      //      
        var smallImage = document.getElementById(‘smallImage‘);      
        // Unhide image elements      //     
        smallImage.style.display = ‘block‘;      
        // Show the captured photo      // The in-line CSS rules are used to resize the image      //     
        smallImage.src = "data:image/jpeg;base64," + imageData;    }    
        // Called when a photo is successfully retrieved    //   
        function onPhotoURISuccess(imageURI) {      
        // Uncomment to view the image file URI      // 
        console.log(imageURI);      
        // Get image handle      //     
        var largeImage = document.getElementById(‘largeImage‘);      
        // Unhide image elements      //    
        largeImage.style.display = ‘block‘;      
        // Show the captured photo      // The in-line CSS rules are used to resize the image      //    
        largeImage.src = imageURI;    }    
        // A button will call this function    //    
        function capturePhoto() {      
        // Take picture using device camera and retrieve image as base64-encoded string     
        navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,        destinationType: destinationType.DATA_URL });    }    
        // A button will call this function    //   
        function capturePhotoEdit() {      
        // Take picture using device camera, allow edit, and retrieve image as base64-encoded string    
        navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,        destinationType: destinationType.DATA_URL });    }    
        // A button will call this function    //    
        function getPhoto(source) {      
        // Retrieve image file location from specified source  
        navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,        destinationType: destinationType.FILE_URI,        sourceType: source });    }    
        // Called if something bad happens.    //   
        function onFail(message) {      alert(‘Failed because: ‘ + message);    }   
    </script>
</head> 
<body>  
    <button onclick="capturePhoto();">Capture Photo</button> <br>
    <button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>  
    <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>  
    <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br> 
    <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />  
    <img style="display:none;" id="largeImage" src="" />  

</body>
</html>

3个按钮

show alert 按钮调用 Dialog

play Beep 按钮调用声音提示

Vibrate 按钮调用震动

参数详解:

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

phonegap的工程:

bubuko.com,布布扣