快速搭建android环境
1.安装java jdk
1.1 1.8.3以上版本----请记住安装路径
1.2 配置环境变量
系统变量里面新增,设置值为java sdk 根目录:
C:\Program Files (x86)\Java\jdk1.6.0_10\
系统变量找到Path 在Path环境变量里面增加 注意环境变量之间的;
2.安装android sdk/ adt
2.1 解压adt,放在D:\ProgramFiles目录下
2.2 配置环境变量
D:\Program Files\ADT\sdk\tools;
D:\Program Files\ADT\sdk\platform-tools;
D:\Program Files\ADT\eclipse\plugins\org.apache.ant_1.8.3.v201301120609\bin
运行java javac ant android出来内容结果表示成功
3.安装配置nodejs
3.1 确认安装nodejs--命令node-v
3.2 把nodejs加入环境变量
4.通过npm安装cordova
npm install cordova -g
5.新建cordova项目
cordova create myApp
创建项目 基础是安装了cordova
cd myApp
cordova build
6、使用ADT工具打开并编辑该项目
File>New>Project>Android>AndroidProject from Existing Code
选择则刚才建立项目所在路径,即可使用ADT打开进行编辑。
打开的时候如果出现两个选项全选,如果出现很多,那么debug和build相关字眼的不选,最后也是剩余两个,然后点击完成
7、项目的结构
主要编辑 assets/www 目录下的 html css js 文件。
1.C:\cordova\myApp\platforms\android\assets\www
2.C:\cordova\myApp\www
cordova prepare 2下面的文件复制到1里面了
用cordova的插件访问原生api
所有的核心API在3.0版本之后都从Cordova容器中移除并以插件的形式实现。因此需要在项目中使用如下命令关联插件
安装插件的命令:
cordova plugin add cordova-plugin-network-information
卸载插件:
cordova plugin remove cordova-plugin-network-information
使用API的Cordova文档:
http://cordova.apache.org/plugins/
Cordova核心API:
加速度计(Accelerometer)
相机(Camera)
录制(Capture)
指南针(Compass)
网络连接(Connection)
联系人(Contacts)
设备(Device)
事件(Events)
文件(File)
地理定位(Geolocation)
全球化(Globalization)
内置浏览器(InAppBrowser)
多媒体(Media)
消息提醒(Notification)
闪屏(Splashscreen)
存储(Storage)
Connection类型
移动应用时常需要知道可用网络连接的类型。因为网络服务商在对超出的数据流量要收取费用,应用在进行数据量大的升级时建议使用收费低的Wifi而不要使用蜂窝移动网络。通过Connection接口可以获取网络类型及连网状态。
安装命令:
cordova plugin addcordova-plugin-network-information
function checkConnection() {
var networkState = navigator.connection.type;
var states = {};
states[Connection.UNKNOWN] ='Unknown connection';
states[Connection.ETHERNET] = 'Ethernet connection';
states[Connection.WIFI] ='WiFi connection';
states[Connection.CELL_2G] ='Cell 2G connection';
states[Connection.CELL_3G] ='Cell 3G connection';
states[Connection.CELL_4G] ='Cell 4G connection';
states[Connection.CELL] ='Cell generic connection';
states[Connection.NONE] = 'Nonetwork connection';
alert('Connectiontype: ' + states[networkState]);
}
document.addEventListener("offline",yourCallbackFunction, false);
document.addEventListener("online",yourCallbackFunction, false);
Device
device对象可以用来确定设备的有限数量的信息。
安装命令:
cordova plugin add cordova-plugin-device
可用的设备属性如下:
device.name 设备名称
device.cordova cordova版本
device.platform 平台(android or ios)
device.uuid 全球唯一标识符(UniversallyUnique Identifier)
device.verson 操作系统版本号
device.model 设备型号
device.serial 设备序列号
device. manufacturer 设备制造商
警告用户
开发者经常要通知用户一些活动的情况。web应用可以在页面内部或以HTML弹出框显示这些信息。但有时候需要开发者管理这种提示。有两种类型的提示,姑且称之为hardware notifications和visual notifications,下面分别说明。
Hardware Nofifications
大多数智能手机为开发者提供了让设备蜂鸣或振动的API,Cordova也提供了相同的调用接口。使用前要安装,命令如下:
cordova plugin add cordova-plugin-vibration
Beep (嘟嘟响、蜂鸣)
要使用设备的蜂鸣,应用要调用navigator.notification.beep方法,振动要调用navigator.notification.vibrate方法。每个都带一个参数,用来控制提示要持续多久或发生多少次。beep方法的参数用来控制方法调用时设备蜂鸣多少次:
navigator.notification.beep(quantity);
Vibrate (震动)
vibrate方法接受一个持续时间参数,单位是毫秒:
navigator.vibrate([time])
例:
// Vibrate for 3 seconds
navigator.vibrate(3000);
// Vibrate for 3 seconds
navigator.vibrate([3000]);
Visual Notification
web应用可以调用Cordova的一些方法与用户交互,当然可以使用js的alert()、confirm()和prompt()方法,但是Cordova的方法是异步的,并且对显示内容有更大的控制权限。
安装命令:
cordova plugin add cordova-plugin-dialogs
Alert()
不同于js中的alert()方法,Cordova的alert()方法如下:
naviator.notification.alert(message,callback, [title], [buttonLabel]);
callback参数定义了点击对话框中按钮时调用的函数,应用在用户点击按钮之前是空闲状态,点击执行回调函数。如果把callback参数设为null,则应用在警告弹出之后继续执行而不会等用户点击按钮。
title和buttonLabel参数都是可选的。
Confirm
confirm方法与alert方法相似,但它可以指定多个按钮的标签,并且callback方法传入了几个值用来指明点击了哪个按钮。方法声明如下:
navigator.notification.confirm(message, callback,[title],[buttonLabels]);
以下代码段说明了怎样使用confirm方法:
navigator.notification.confirm('Do you wantto continue?', doContinue, 'Please confirm', 'Yes, No');
function doContinue(buttonNum) {
navigator.nofication.alert('You chose option #' + 'buttonNum + '?',null, 'Really?', 'Yes');
};
传递给回调函数的参数是数值型,指出点击了哪个按钮,如果点击第1个按钮回调函数接受1,点击第2个则接受2,依次类推。
Prompt
Prompt收集来自表单外部的用户信息。调用函数声明如下:
navigator.notification.prompt(message,callback, [title], [buutonLabels], [defaultText]);
同样中括号中的参数是可选的。调用prompt方法并定义处理用户输入的回调函数。
Cordova事件
Cordova框架定义了一组事件,开发者用来对某些运行Cordova应用的设备上的事件作出反应。事件处理的一种情况是硬件相关活动,如电池状态变化或用户按了某个物理按钮;另一种情况是应用程序状态的变化,如应用被中止或恢复。这些web应用使用的事件同Native应用使用的是一样的。
完整的支持的事件列表如下:
Cordova 事件 描述
backbutton 用户按设备后退键时触发
batterycritical 电池达到关键状态时触发。关键状态的定义因平台而异
batterylow 电池低电量状态时触发。低电量状态的定义因平台而异
batterystatus 电池状态至少改变1%时时触发(增加或减少)
deviceready cordova容器完成初始化时触发
endcallbutton 在用户按手机的结束通话键时触发
menubutton 在用户按手机的菜单键时触发
offline 在设备失去网络连接时触发
online 在设备由没有网络连接转换到连接状态时触发
pause Cordova应用被挂起时触发。一般发生在用户跳转到另一个应用,系统把当前应用放在后台时
resume 在被挂起的应用转到前台时触发
searchbutton 在用户按查找键时触发
startcallbutton 在用户按通话键时触发
volumedownbutton 用户按音量减少键时触发
volumnupbutton 用户按音量键增加时触发
大多数的列出的事件都在Cordova容器中实现了。只有电池状态以插件形式实现了。要使应用能够监视电池事件必须首先添加电池状态插件:
cordova plugin add cordova-plugin-battery-status
InAppBrowser
允许在在单独的窗口中加载网页。例如要向应用用户展示其他网页。当然可以很容易地在应用中加载网页内容并管理,但有时候需要不同的用户体验,InAppBrowser加载网页内容,应用用户可以更方便的直接返回到主应用。
安装命令:
cordovaplugin add cordova-plugin-inappbrowser
语法:
var ref =cordova.InAppBrowser.open(url, target, options);
target: 在哪里打开页面
l _blank告诉应用在自已的窗口中打开内容;
l _self,即在当前窗口中打开页面;
l _system在默认的网页浏览器打开内容。
l 使用_self的问题是加载的网页替换了当前应用的网页内容,对于用户没法回退。
Options:选项
location:(yes/no) 是否显示地址栏(仅android有效)
hidden: (yes/no)设为yes会打开浏览器并加载页面,但不显示。要想显示使用ref.show()
Clearcache:(yes/no) 设为yes在浏览器打开前清空cookie缓存
想关闭网页只需要调用close方法:
ref.close();
浏览器窗口事件
应用在很多场景下需要知道在InAppBrowser窗口中进行的情况。为此InAppBrowser API在窗口生命周期的不同时期触发不同事件。支持的事件有:
loadstart:在InAppBrowser开始加载一个URL时触发。
loadstop:在InAppBrowser完成加载URL时触发。
loaderror:在InAppBrowser加载URL遇到错误时触发。
exit: 在InAppBrowser窗口被关闭时触发(由用户或应用调用close方法)。
以下是一些代码段,用InAppBrowser打开一个本地HTML文件,然后为每个窗口事件定义了事件监听器:
var ref =window.open('help.html', '_blank');
ref.addEventListener('loadstart',onEvent);
ref.addEventListener('loadstop',onEvent);
ref.addEventListener('loaderror',onLoadError);
ref.addEventListener('exit',onEvent);
functiononEvent(event) {
console.log('Type: ' + event.type);
console.log('URL: ' + event.url);
// Do something based on event.type
}
functiononLoadError(event) {
console.log('onLoadError: ' + event.code +'-' + event.message));
}
执行脚本
InAppBrowser有让应用在窗口执行js代码的方法executeScript,如下:
ref.executeScript(scriptInfo,onSucess);
例:
var ref =window.open('help.html', '_blank', 'loaction=no');
ref.addEventListener('loadstop',function() {
ref.executeScript({
code:"$(#heading').replaceWith('<h2>This is some injectedtext</h2>');"
//file: "myscript.js"
}, onSuccess);
});
插入CSS
可以使用方法向窗口中插入CSS。比如像网页来源于外部,想要改变它的样式来匹配应用的其他部分。
ref.insertCSS(cssInfo,onSuccess);
var ref =window.open('help.html', '_blank', 'location=no');
ref.addEventListener('loadstop',function() {
ref.insertCSS({
code: "body {background:black;color:white}"
//file: "mystuff.css"
}, onSuccess);
});
播放/记录媒体文件
Cordova API包括一个Media API让应用能记录或播放媒体文件。用它可以在手机后台播放音频文件或玩桌面视频游戏。
安装:
cordova plugin add cordova-plugin-media
语法:
var mediaObj = new Media(srcFile,onSuccess, onError, onStatus);
这样创建了一个mediaObj对象,它指向一个由srcFile参数指定的媒体文件。应用还没有打开或连接文件,只是创建了一个引用文件的对象。
onSuccess和onFailure函数并不像以前的一样触发。上面代码中的回调函数实际上在media对象创建后以下方法调用时调用:
l getCurrentPosition 当前播放的位置
l getDuration 总时长
l pause 暂停
l play 播放
l release
l seekTo
l setVolume
l startRecord
l stop
l stopRecord
比如要播放一个叫soundtrack.mp3的媒体文件,代码可以这么写:
srcFile = 'soundtrack.mp3';
var mediaObj = new Media(srcFile,onSuccess, onError, onStatus);
mediaObj.play();
function onSuccess() {
console.log("Media: Success");
}
function onError(error) {
alert('Media Error: ' + error.code + ': ' + error.message);
}
function onStatus(statCode) {
console.log("Media status: " + statCode);
}
注:在获取本地路径时,因为每个平台路径写法不一致,需要对本地路径做特殊处理,以下是android平台的处理:
function getMediaURL(s) {
if(device.platform.toLowerCase()=== "android") return "/android_asset/www/" + s;
returns;
}
停止播放只需调用mediaObj.stop();上面代码的onStatus函数传递了一个状态代码参数让应用理解媒体播放或记录的状态。可能的状态代码如下:
Media.MEDIA_NONE
Media.MEDIA_STARTING
Media.MEDIA_RUNNING
Media.MEDIA_PAUSED
Media.MEDIA_STOPPED
Camera(相机)
Cordova框架提供了两个用于访问设备相机的API,一个是CameraAPI,它使用开发者能直接访问本地相机的API,另一个是Media Capture API。两者的不同是Camera API只用相机获取图像,而Media Capture API不仅能获取图像,还可以录视频或者录音。
安装Camera插件:
cordova plugin add cordova-plugin-camera
调用方法:
var cameraOptions= {
quality : 75,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.CAMERA,
allowEdit : true,
encodingType : Camera.EncodingType.JPEG,
targetWdith : 100,
targetHeight : 100,
popoverOptions : CameraPopoverOptions,
saveToPhotoAlbum : false
};
navigator.camera.getPicture(onCameraSuccess,onCameraError, cameraOptions);
function onCameraSuccess(imageURI){
$('#img_pic').attr("src","data:image/jpeg;base64," +imageURI);
}
function onCameraError(message) {
alert('Failed because: ' + message);
}
属性 | 描述 |
allowEdit | 布尔值,照片在返回Cordova应用之前用户是否可以编辑,但并不是所有移动平台都支持。 |
cameraDirection | 数值型,规定使用前面或后面的相机。*navigator.camera.Direction.FRONT*和*navigator.camera.Direction.BACK*分别指前面和后面。 |
correctOrientation | 布尔值,告诉API在拍照时旋转图像来调整设备方向。 |
destinationType | 数值型,规定API怎样返回照片。*Camera.DestinationType.FILE_URI*是默认选项前边提到过,*Camera.DestinationType.DATA_URL*,返回用base-64编码的图像,*Camera.DestinationType.NATIVE_URI*, 返回图像的本地的URI。注意使用*DATA_URL*,因为js不处理用字符编码的图像,可能会使用js应用崩溃。 |
encodingType | 数值型,指明图像输出格式。*Camera.EncodingType.JPEG*让API返回JPEG图像。 |
mediaType | 数值型,当*SoruceType*设置为*PHOTOLIBRARY*或*SAVEDPHOTOALBUM*,规定了用户可选择什么类型的文件。使用*Camera.MediaType.PICTURE*时只允许选择图像,*Camera.MediaType.VIDEO*允许选择视频文件,*Camera.MediaType.ALLMEDIA*允许选择任何支持的媒体文件。选择*VIDEO*时,API只返回文件的URI;如果是图像会返回信息,它的格式请参考*destinationType*。 |
quality | 数值型,用从0到100%的百分比来控制图像的质量,100表示不经过压缩。 |
saveToPhotoAlbum | 布尔值,指示API在拍照后把图像保存到设备照片相册中。 |
sourceType | 数值型,指明图像来源。可能值有*Camera.PictureSourceType.CAMERA*(默认值),或者*Camera.PictureSourceType.PHOTOLIBRARY*、*Camera.PictureSourceType.SAVEDPHOTOALBUM*。选项的行为会根据应用运行的平台不同而不同,像有些平台没有*photo libraries*或*photo albums*。 |
targetHeight | 数值型,用来设定获得的图像的高度。 |
targetWidth | 数值型,用来设定获得的图像的宽。 |
用户在返回给Cordova应用的是一张图像,但可能拍了不止一张。Cordova有一个cleanup方法用来清理这种图像。调用这个方法并且传入成功和失败的回调函数名作为参数,如下:
navigator.camera.cleanup(onCameraCleanupSuccess,onCameraCleanupError);
录制多媒体文件
Capture API和Camera API类似,可以用来拍照也可以录相或录音。
安装:
cordova plugin add cordova-plugin-media-capture
API提供如下方法:
* capture.captureAudio
* capture.captureImage
* capture.captureVideo
* MediaFile.getFormData
前三个方法用法完全一样。getFormData获得关于媒体文件的信息,但由于移动设备的限制,通过这种方法获得的信息非常有限。
以三个方法之一为例,使用如下方法声明使用API:
navigator.device.capture.captureAudio(onSuccess,onFailure, options);
function onSuccess(fileList) {
var len, I, path;
len = fileList.length;
if (len > 0) {
for (i = 0, len; i < len; i+=1) {
path = fileList[i].fullPath;
// Do something with the file here
}
}else {
alert("Error:No files returned.");
}
}
var onError = function(error) {
alert('Capture error: ' + error.code);
}
onSuccess函数传入了一个fileList对象,可以迭代访问指向每个录制的文件的路径
onError中可能的错误代码有:
l CaptureError.CAPTURE_INTERNAL_ERR
l CaptureError.CAPTURE_APPLICATION_BUSY
l CaptureError.CAPTURE_INVALID_ARGUMENT
l CaptureError.CAPTURE_NO_MEDIA_FILES
l CaptureError.CAPTURE_NOT_SUPPORTED
可选的options参数控制要录制多少媒体文件,对音频文件有一个duration属性控制音频录制长度。
var options = { limit: 3, duration: 10};
有的平台上的一些options属性不可用,检查Cordova Capture API文档的quirks部分。
Geolocation(地理定位)
安装:
cordova plugin add cordova-plugin-geolocation
Geoloaction API提供3个方法:
l compass.getCurrentPosition
l compass.watchPosition
l compass.clearWatch
getCurrentPosition方法让应用判断设备当前位置,watchPosition和clearWatch方法允许应用定期计算设备位置。API返回了一个位置对象,包括coordinates和timestamp属性。timestamp见上面相关说明。coordinates属性包括下表属性:
accuracy 用米做单位的经度和纬度坐标的精确度
altitude 用米做单位的设备的海拔高度
altitudeAccuracy 用米做单位的海拔高度坐标的精度
heading 设备上用度数为单位的朝向(移动的方向)
latitude 用小数度数表示的位置的纬度部分
longtitude 用小数度数表示的位置的经度部分
speed 设备以米为单位的每秒的速度
Compass(指南针)
Compass API可以让开发者读取移动设备的朝向。这个API的使用和AccelerometerAPI基本一样,既可以一次查找朝向值也可以定义个监视器定期测量朝向值。两者主要不同在于上例中的results和options。
安装:
cordova plugin add cordova-plugin-device-orientation
Compass API提供了三个方法:
l compass.getCurrentHeading
l compass.watchHeading
l compass.clearWatch
getCurrentHeading方法允许应用查询compass的当前方向。watchHeading和clearWatch方法用来在一段时间内获得compass朝向,即每隔一段时间从compass获得测量结果。
代码示例:
navigator.compass.getCurrentHeading(onSuccess,onFailure);
function onSuccess(res) {
magneticHeading = res.magneticHeading;
trueHeading = res.trueHeading;
headingAccuracy = res.headingAccuracy;
var d = new Date(res.timestamp);
timestamp = d.toLocaleString();
}
function onFailure(err) {
alert("Error: " + err.code);
}
参数是两个函数名:onSuccess在成功测量朝向值时执行,发生错误时执行onFailure。heading对象(即例子中的res)返回给onSuccess函数,它的属性值如下:
magneticHeading 以从0到359的度数表示compass的朝向值
trueHeading compass相对于北极的朝向值,范围从0到259度。负值表示真实的朝向值不能确定
headingAccuracy 用度数表示磁极朝向和真实朝向值的不同
timestamp 朝向值测量的日期和时间(从1970年1月1日午夜开始的毫秒数)
错误发生时,onFailure函数传入错误代码可以判断错误的原因。可能的值有CompassError.COMPASS_INTERNAL_ERR和CompassError.COMPASS_NOT_SUPPORTED。
使用compass.watchHeading,使用如下代码设置监听:
var options = {frequency:1000};
watchID =navigator.compass.watchHeading(onSuccess, onFailure, options);
各参数的说明和accelerator一样,还可以指定filter值,用来定义最小度数值变化,它一定在监听触发前调用。因为compass值变化频繁,可能需要设置filter减少朝向值测量的次数,这样可以让应用只回应变化大的朝向。
代码中,调用watchHeading的结果赋给了变量watchID,用来取消监听,用法如下:
navigator.compass.clearWatch(watchID);
上面的代码应用会每隔1秒读compass并把值传给onSuccess函数。
Contacts 联系人
CordovaContacts API让开发者构建和通讯录或联系人应用交互的应用,它基于W3C Contacts API。它用于构建这样的应用:读取联系人列表并在应用中使用联系人数据,或使用应用数据向联系人列表中写新的联系人。
安装:
cordova plugin add cordova-plugin-contacts
因为每个移动平台上联系人的功能都不同,Contacts API使用起来有些不一样,像Android设备上使用的联系人一些字段与在iOS上不一样。另外Contacts的实现与其他API还有些不同。
ContactsAPI有两个方法和一个contacts对象,方法用来创建新的contacts对象和在设备上查找联系人,contacts对象表示设备上的联系人。
创建联系人使用API的create方法,如下:
varnewContact = navigator.contacts.create();
和之前的API方法不一样,这个方法是同步的,没有提供success和failure回调函数。它并没有在设备联系人应用中创建联系人,只是创建了一个新的contact对象,上面代码创建了一个空的contact对象,直到使用save方法才会保存到联系人应用。
也可以在创建时填充contact对象,如下在对象中填充了一个displayName属性:
varnewContact = navigator.contacts.create({"displayName": "ZhangSan"});
contact对象包括以下属性:
l id: 全局唯一id。
l addresses: 包括联系人所有不同地址的数组。
l birthday: 联系人的生日。
l categories: 包括所有与联系人相关的用户定义的分类的数组。
l displayName: 联系人的显示名。
l emails: 包括联系人所有邮件地址的数组。
l id: 联系人的全局唯一标识符。
l ims: 包括联系人所有的即时消息地址的数组。
l nickname: 联系人的昵称。
l note: 和联系人相关的记录。
l organizations: 包括和联系人相关的所有的组织的数组。
l phoneNumbers: 包括所有与联系人相关的所有电话号码的数组。
l photos: 包括所有与联系人相关的图像的数组。
l urls: 包括所有与联系人相关的网页的数组。
新建一个联系人信息的例子:
functiononSuccess(contact) {
alert("Save Success");
};
functiononError(contactError) {
alert("Error = " +contactError.code);
};
// createa new contact object
varcontact = navigator.contacts.create();
contact.displayName= "Plumber";
contact.nickname= "Plumber"; //specify both to support all devices
//populate some fields
var name= new ContactName();
name.givenName= "Jane";
name.familyName= "Doe";
contact.name= name;
varphoneNumbers = [];
phoneNumbers[0]= new ContactField('work', 13811112222, false);
phoneNumbers[1]= new ContactField('mobile', 02088886666, true);
contact.phoneNumbers= phoneNumbers;
// saveto device
contact.save(onSuccess,onError);
复制一个联系人的例子:
// clonethe contact object
var clone = contact.clone();
clone.name.givenName = "John";
console.log("Original contact name =" + contact.name.givenName);
console.log("Cloned contact name =" + clone.name.givenName);
删除例子:
functiononSuccess() {
alert("Removal Success");
};
functiononError(contactError) {
alert("Error = " +contactError.code);
};
// removethe contact from the device
contact.remove(onSuccess,onError);
查找联系人信息的例子:
//display the address information for all contacts
functiononSuccess(contacts) {
for (var i = 0; i < contacts.length;i++) {
for (var j = 0; j <contacts[i].addresses.length; j++) {
alert("Pref: " + contacts[i].addresses[j].pref + "\n" +
"Type:" +contacts[i].addresses[j].type +"\n" +
"Formatted:" +contacts[i].addresses[j].formatted +"\n" +
"StreetAddress: " + contacts[i].addresses[j].streetAddress + "\n" +
"Locality:" +contacts[i].addresses[j].locality +"\n" +
"Region:" +contacts[i].addresses[j].region +"\n" +
"PostalCode: " +contacts[i].addresses[j].postalCode +"\n" +
"Country:" +contacts[i].addresses[j].country);
}
}
};
functiononError(contactError) {
alert('onError!');
};
// findall contacts
varoptions = new ContactFindOptions();
options.filter= "";
options.multiple= true;
varfilter = ["displayName", "addresses"];
navigator.contacts.find(filter,onSuccess, onError, options);