PhoneGap配置说明&&PhoneGap API 应用示例&&插件应用示例
Posted on 2014-12-02 16:46 fangxupeng 阅读(242) 评论(0) 编辑 收藏 举报1、PhoneGap配置说明：
- 下载PhoneGap源码，然后直接解压。我下载的版本是PhoneGap2.9.0版本，以下步骤也是按照这个版本进行，对其他版本可能有些许不同。
- 在安卓工程目录asserts下新建一个文件夹www，如图所示。然后把phonegap/lib/android目录下的cordova1.js（下载的phonegap版本为准）文件拷贝到刚刚创建的www目录下。
- 把cordova-2.9.0.jar文件拷贝到libs文件夹里。如图所示：
- phonegap里的xml文件夹拷贝到项目目录下的res文件夹里。
- 在/assets/www下建立index.html文件（此文件在phonegap解压文件asserts里有html示例文件），并链接上phonegap的js文件，如：
- 对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；
4)需要添加import org.apache.cordova.DroidGap；
以我的文件为例，具体如下：
- 在项目根目录下右键点击AndroidManifest.xml文件，选择Open With > Text Editor(打开方式->文本编辑器)，添加如下内容，具体添加为止请参考PhoneGap-2.9.0文件夹下androidmanifest.xml文件。
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" />
以android application方式运行，结果如下 :
至此，phonegap配置完成，这是实现了一个小小的应用。
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、插件应用示例
待续
