跨平台课程复习

• 跨平台课程复习
  • 一，环境安装
    • 1.1 所需软件
    • 1.2 用到的包
  • 二，Cordova相关
    • 2.1 创建项目
    • 2.2 插件安装
    • 2.3 平台安装
  • 三，html相关
    • 3.1 html标签
    • 3.2 css样式
    • 3.3 js相关
  • 四，功能实现
    • 4.1 Camera插件实现功能
    • 4.2 Device插件实现功能
    • 4.3 Device-motion插件功能
    • 4.4 Dialogs插件功能
    • 4.5 Geolocation插件功能
    • 4.6 Media插件功能
    • 4.7 Vibration插件
    • 4.8 Contacts插件
    • 4.9 toast插件
    • 4.10 battery-status插件

一，环境安装

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);