跨平台课程复习
一，环境安装
1.1 所需软件
Nodejs，任意的编辑器
1.2 用到的包
cordova 安装命令
npm install -g cordova
以及前端框架jQuery，下载地址：网址
二，Cordova相关
2.1 创建项目
控制台移动到对应代码存放位置输入一下代码
cordova create (项目名) (包名) (类名)
目录下产生对应项目名的文件夹，cd命令进入其中
2.2 插件安装
battery-status插件
cordova plugin add cordova-plugin-battery-status
功能：
camera插件
cordova plugin add cordova-plugin-camera
功能:
contacts插件
cordova plugin add cordova-plugin-contacts
功能：通讯录相关
device插件
cordova plugin add cordova-plugin-device
功能：设备相关信息
device-motion插件
cordova plugin add cordova-plugin-device-motion
功能：摇一摇功能实现
file-transfer插件
cordova plugin add cordova-plugin-file-transfer
功能：文件传输
geolocation插件
cordova plugin add cordova-plugin-geolocation
功能：地理位置相关
media插件
cordova plugin add cordova-plugin-media
功能：媒体播放
dialogs插件
cordova plugin add cordova-plugin-dialogs
功能：提示框
vibration插件
cordova plugin add cordova-plugin-vibration
功能：震动
toast插件
cordova plugin add cordova-plugin-x-toast
功能：提示框
2.3 平台安装
测试android平台
cordova platform add android@6.3.0
三，html相关
3.1 html标签
响应式页面的设置。
禁止页面缩放
<meta name="viewpoint" content="width=device-width,initial-scale=1.0,user-scalable=no">
页面编码
<meta charset="utf-8">
3.2 css样式
响应式页面样式设定
@media screen and (max-width=300px){
//样式内容
}
动画相关
设置样式动画
@keyframs name{
from{
}
to{
}
}
//前缀
-webkit-//Safari and Chrome
-moz-//Firefox
-ms-//IE and Edge
-o-//Opera
//调用
div{
animation:name 5s;
//可以写animation:name 5s infinite;进行无限循环
}
//动画停止填充
div{
animation-fill-mode:forwards;
}
按钮的样式
//包含圆角
.button{
width：200px;
height: 50px;
background-color:purple;
color:white;
bolder-radius:25px;
text-height:50px;
font-size:50px;
}
3.3 js相关
页面响应事件 deviceready
//非jQuery写法
document.addEventListener(
"deviceready",function(){
//your function
},false
);
//jQuery写法
$(document).bind("deviceready",function(){
//your function
});
四，功能实现
4.1 Camera插件实现功能
从手机获取图片
function onSuccess(PicURL){
$("#showimg").attr("src",PicURL);
}
function onFail(msg){
console.log(msg);
}
var option = {
quality:50,
destinationType:navigator.camera.DestinationType.FILE_URL,
sourceType:navigator.camera.PictureSourceType.PHOTOLIBRARY
//SAVEDPHOTOALBUM
};
navigator.camera.getPicture(onSuccess,onFail,option);
从相机获取图片
//将option中sourceType修改
sourceType:navigator.camera.PictureSourceType.CAMERA
4.2 Device插件实现功能
device.platform //平台Android
device.uuid //设备uuid
device.vesion//平台版本号
device.serial//设别序列号
4.3 Device-motion插件功能
function onSuccess(ac){
ac.x,ac.y,ac.z,ac.timestamp;
}
function onFail(){
alert('Error');
}
var watchID=navigator.accelerometer.watchAcceleration(onSuccess,onFail,{frequency:3000});
navigator.accelerometer.clearWatch(watchID);
4.4 Dialogs插件功能
navigator.notification.alert("message",function(){},"Title","ok BTN");
navigator.notification.confirm("message",function(bid){console.log(bid);},“confirm”,['ok','exit]);
navigator.notification.prompt("message",function(oj){
oj.buttonInde
oj.input1
},"Title",['ok','exit']);
navigator.notification.beep(times);
4.5 Geolocation插件功能
navigator.geolocation.getCurrentPosition(function(position){
alert('Latitude: ' + position.coords.latitude + '\n' +
'Longitude: ' + position.coords.longitude + '\n' +
'Altitude: ' + position.coords.altitude + '\n' +
'Accuracy: ' + position.coords.accuracy + '\n' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '\n' +
'Heading: ' + position.coords.heading + '\n' +
'Speed: ' + position.coords.speed + '\n' +
'Timestamp: ' + position.timestamp + '\n');
},function(){
console.log("error");
},{timeout:3000});
4.6 Media插件功能
var my_media;
var timeid;
var fileURL = cordova.file.applicationDirectory+"www/Jump.mp3";
my_media = new Media(fileURL);
my_media.play();
timeid = window.setInterval(function(){
my_media.getCurrentPosition(function(pos){
var du=my_media.getDuration();
$("#mdmsg").text(pos+'/'du);
});
},500);
//stop
my_media.stop();
window.clearInterval(timeid);
4.7 Vibration插件
navigator.vibrate([1000,1000,3000,1000,2000]);
4.8 Contacts插件
Contact
id
displayName
name
nickname
phoneNumbers[0]['home']/['work']/['mobile']
ContactFindOptions
options.filter = "Bob";
options.multiple = true;
options.desiredFields = [navigator.contacts.fieldType.id];
options.hasPhoneNumber = true;
navigator.contacts.create({"displayName": "Test User"});
var fields = [navigator.contacts.fieldType.displayName, navigator.contacts.fieldType.name];
navigator.contacts.find(fields, onSuccess, onError, options);
navigator.contacts.pickContact(function(contact){
console.log('The following contact has been selected:' + JSON.stringify(contact));
},function(err){
console.log('Error: ' + err);
});
4.9 toast插件
window.plugins.toast.show('这是白百合，哈哈哈','short','center');
4.10 battery-status插件
window.addEventListener("batterylow",function(status){
alert("Battery Level Low " + status.level + "%");
},false);