码迷,mamicode.com
首页 > Windows程序 > 详细

PhoneGap配置说明&&PhoneGap API 应用示例&&插件应用示例

时间:2014-12-02 17:13:46      阅读:270      评论:0      收藏:0      [点我收藏+]

标签:des   android   style   blog   http   io   ar   color   使用   

1、PhoneGap配置说明:
  • 下载PhoneGap源码,然后直接解压。我下载的版本是PhoneGap2.9.0版本,以下步骤也是按照这个版本进行,对其他版本可能有些许不同。
  •   在安卓工程目录asserts下新建一个文件夹www,如图所示。然后把phonegap/lib/android目录下的cordova1.js(下载的phonegap版本为准)文件拷贝到刚刚创建的www目录下。
bubuko.com,布布扣
bubuko.com,布布扣
  • 把cordova-2.9.0.jar文件拷贝到libs文件夹里。如图所示:
    bubuko.com,布布扣
bubuko.com,布布扣
  • phonegap里的xml文件夹拷贝到项目目录下的res文件夹里。
    bubuko.com,布布扣
bubuko.com,布布扣
  • 在/assets/www下建立index.html文件(此文件在phonegap解压文件asserts里有html示例文件),并链接上phonegap的js文件,如:
bubuko.com,布布扣
 bubuko.com,布布扣
  • 对src文件夹下的XXX.java文件作如下修改(这个不一定准,有错误就点击左侧的红叉):

  1)修改类的继承   将Activity 修改为 DroidGap;
  2)把setContentView()这行替换为super.loadUrl("file:///android_asset/www/index.html");

      3)将onCreate类从protected变为public属性;
  4)需要添加import org.apache.cordova.DroidGap;        
        以我的文件为例,具体如下:
bubuko.com,布布扣
bubuko.com,布布扣
  • 在项目根目录下右键点击AndroidManifest.xml文件,选择Open With > Text Editor(打开方式->文本编辑器),添加如下内容,具体添加为止请参考PhoneGap-2.9.0文件夹下androidmanifest.xml文件。
<supports-screens  
android:largeScreens="true"  
android:normalScreens="true"  
android:smallScreens="true"  
android:resizeable="true"  
android:anyDensity="true"  
/>  
<uses-permission android:name="android.permission.CAMERA" />  
<uses-permission android:name="android.permission.VIBRATE" />  
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />  
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />  
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />  
<uses-permission android:name="android.permission.READ_PHONE_STATE" />  
<uses-permission android:name="android.permission.INTERNET" />  
<uses-permission android:name="android.permission.RECEIVE_SMS" />  
<uses-permission android:name="android.permission.RECORD_AUDIO" />  
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />  
<uses-permission android:name="android.permission.READ_CONTACTS" />  
<uses-permission android:name="android.permission.WRITE_CONTACTS" />  
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />  
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 
bubuko.com,布布扣
        以android application方式运行,结果如下 : 
bubuko.com,布布扣
bubuko.com,布布扣
至此,phonegap配置完成,这是实现了一个小小的应用。
 bubuko.com,布布扣
 

2、phonegap自带API应用实例:

 
在此,以PhoneGap自带的camera对象提供对设备默认摄像头应用程序的访问。方法是amera.getPicture
 
详细代码如下:
    文件index.html
<!DOCTYPE html>
<html>
<head>
<title>Capture Photo</title>
 
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
 
 var pictureSource; //图片来源
 var destinationType; //设置返回值的格式
 
 // 等待PhoneGap连接设备
 document.addEventListener("deviceready",onDeviceReady,false);
 
 // PhoneGap准备就绪,可以使用!
 function onDeviceReady() {
  pictureSource=navigator.camera.PictureSourceType;
  destinationType=navigator.camera.DestinationType;
 }
 
 // 当成功获得一张照片的Base64编码数据后被调用
 function onPhotoDataSuccess(imageData) {
 
  // 取消注释以查看Base64编码的图像数据
  // console.log(imageData);
  // 获取图像句柄
  var smallImage = document.getElementById(‘smallImage‘);
   
  // 取消隐藏的图像元素
  smallImage.style.display = ‘block‘;
 
  // 显示拍摄的照片
  // 使用内嵌CSS规则来缩放图片
  smallImage.src = "data:image/jpeg;base64," + imageData;
 }
   
   // 当成功得到一张照片的URI后被调用
   function onPhotoURISuccess(imageURI) {
 
  // 取消注释以查看图片文件的URI
  // console.log(imageURI);
  // 获取图片句柄
  var largeImage = document.getElementById(‘largeImage‘);
   
  // 取消隐藏的图像元素
  largeImage.style.display = ‘block‘;
 
  // 显示拍摄的照片
  // 使用内嵌CSS规则来缩放图片
  largeImage.src = imageURI;
 }
   
   // “Capture Photo”按钮点击事件触发函数
   function capturePhoto() {
 
  // 使用设备上的摄像头拍照,并获得Base64编码字符串格式的图像
  navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });
   }
   
   // “Capture Editable Photo”按钮点击事件触发函数
   function capturePhotoEdit() {
 
  // 使用设备上的摄像头拍照,并获得Base64编码字符串格式的可编辑图像
  navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true });
   }
   
   //“From Photo Library”/“From Photo Album”按钮点击事件触发函数
   function getPhoto(source) {
   
     // 从设定的来源处获取图像文件URI
  navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
  destinationType: destinationType.FILE_URI,sourceType: source });
   }
 
   // 当有错误发生时触发此函数
   function onFail(mesage) {
  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>
 
只需修改index.html代码即可运行。
 
 
3、插件应用示例
 
待续

PhoneGap配置说明&&PhoneGap API 应用示例&&插件应用示例

标签:des   android   style   blog   http   io   ar   color   使用   

原文地址:http://www.cnblogs.com/fangxupeng/p/4137897.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!