プラットフォーム間カリキュラムの復習

プラットフォーム間カリキュラムの復習

プラットフォーム間カリキュラム復習

一、環境設置

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デバイスプラグイン実現機能

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、ダウンロードアドレス:URL
二、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

機能:連絡録関連
デバイスプラグイン

cordova plugin add cordova-plugin-device

機能:設備関連情報
デバイスモジュール

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 [email protected]

三、html関連
3.1 htmlタグ
レスポンスページの設定.
ページの拡大/縮小を禁止

ページエンコーディング

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関連
ページレスポンスイベント

// 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.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          + '
' +
                    'Longitude: '         + position.coords.longitude         + '
' +
                    'Altitude: '          + position.coords.altitude          + '
' +
                    'Accuracy: '          + position.coords.accuracy          + '
' +
                    'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '
' +
                    'Heading: '           + position.coords.heading           + '
' +
                    'Speed: '             + position.coords.speed             + '
' +
                    'Timestamp: '         + position.timestamp                + '
');
            },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);