Cordova - Szybki przewodnik
Cordova to platforma do budowania hybrydowych aplikacji mobilnych z wykorzystaniem HTML, CSS i JavaScript.
Oficjalna dokumentacja podaje definicję Cordova -
„Apache Cordova to platforma programistyczna na urządzenia mobilne typu open source. Umożliwia korzystanie ze standardowych technologii internetowych, takich jak HTML5, CSS3 i JavaScript, do programowania na wielu platformach, unikając każdego natywnego języka programowania platformy mobilnej. Aplikacje są uruchamiane w opakowaniach przeznaczonych dla każdej platformy oraz polegaj na zgodnych ze standardami powiązaniach API, aby uzyskać dostęp do czujników, danych i stanu sieci każdego urządzenia ”.
Funkcje Cordova
Przyjrzyjmy się teraz pokrótce cechom Cordova.
Interfejs wiersza poleceń (Cordova CLI)
To narzędzie może być używane do uruchamiania projektów, budowania procesów dla różnych platform, instalowania wtyczek i wielu innych przydatnych rzeczy, które ułatwiają proces programowania. Dowiesz się, jak korzystać z interfejsu wiersza poleceń w kolejnych rozdziałach.
Cordova Core Components
Cordova oferuje zestaw podstawowych komponentów, których potrzebuje każda aplikacja mobilna. Te komponenty posłużą do stworzenia bazy aplikacji, dzięki czemu będziemy mogli poświęcić więcej czasu na implementację własnej logiki.
Wtyczki Cordova
Cordova oferuje API, które będzie używane do implementacji natywnych funkcji mobilnych w naszej aplikacji JavaScript.
Licencja
Cordova jest objęty licencją na licencji Apache w wersji 2.0. Logo Apache i pióro Apache są znakami towarowymi The Apache Software Foundation.
Zalety Cordova
Omówimy teraz zalety Cordova.
Cordova oferuje jedną platformę do tworzenia hybrydowych aplikacji mobilnych, dzięki czemu możemy opracować jedną aplikację, która będzie używana na różnych platformach mobilnych - IOS, Android, Windows Phone, Amazon-fireos, blackberry, Firefox OS, Ubuntu i tizien.
Tworzenie aplikacji hybrydowej jest szybsze niż aplikacji natywnej, dzięki czemu Cordova może zaoszczędzić czas tworzenia.
Ponieważ używamy JavaScript podczas pracy z Cordova, nie musimy uczyć się języków programowania specyficznych dla platformy.
Istnieje wiele dodatków społeczności, których można używać z Cordova, mają one kilka bibliotek i struktur, które są zoptymalizowane do pracy z nimi.
Ograniczenia Cordova
Poniżej przedstawiono ograniczenia Cordova.
Aplikacje hybrydowe są wolniejsze niż natywne, więc używanie Cordova nie jest optymalne dla dużych aplikacji, które wymagają dużej ilości danych i funkcji.
Zgodność z różnymi przeglądarkami może powodować wiele problemów. Przez większość czasu tworzymy aplikacje na różne platformy, więc testowanie i optymalizacja może być czasochłonne, ponieważ musimy objąć dużą liczbę urządzeń i systemów operacyjnych.
Niektóre wtyczki mają problemy ze zgodnością z różnymi urządzeniami i platformami. Istnieją również natywne interfejsy API, które nie są jeszcze obsługiwane przez Cordova.
W tym rozdziale zrozumiemy konfigurację środowiska Cordova. Aby rozpocząć konfigurację, musimy najpierw zainstalować kilka komponentów. Komponenty są wymienione w poniższej tabeli.
S.Nr | Oprogramowanie i opis |
---|---|
1 | NodeJS and NPM NodeJS to platforma potrzebna do rozwoju Cordova. Sprawdź naszą konfigurację środowiska NodeJS, aby uzyskać więcej informacji. |
2 | Android SDK W przypadku platformy Android musisz mieć zainstalowany pakiet Android SDK na swoim komputerze. Sprawdź instalację Android Środowisko więcej szczegółów. |
3 | XCode W przypadku platformy iOS musisz mieć zainstalowany xCode na swoim komputerze. Sprawdź konfigurację środowiska iOS, aby uzyskać więcej informacji |
Instalowanie Cordova
Zanim zaczniemy, musisz wiedzieć, że będziemy używać systemu Windows command prompt w naszym samouczku.
Krok 1 - Instalacja git
Nawet jeśli nie używasz git, należy go zainstalować, ponieważ Cordova używa go do niektórych procesów w tle. Możesz pobrać git tutaj . Po zainstalowaniu git otwórz zmienną środowiskową.
- Kliknij prawym przyciskiem myszy komputer
- Properties
- Zaawansowane ustawienia systemu
- Zmienne środowiska
- Zmienne systemowe
- Edit
Skopiuj poniższe na końcu variable value field. To jest domyślna ścieżka instalacji git. Jeśli zainstalowałeś go na innej ścieżce, powinieneś użyć tego zamiast naszego przykładowego kodu poniżej.
;C:\Program Files (x86)\Git\bin;C:\Program Files (x86)\Git\cmd
Teraz możesz pisać git w wierszu polecenia, aby sprawdzić, czy instalacja się powiodła.
Krok 2 - Instalacja Cordova
Ten krok spowoduje globalne pobranie i zainstalowanie modułu Cordova. Otwórz wiersz polecenia i uruchom następujące -
C:\Users\username>npm install -g cordova
Możesz sprawdzić zainstalowaną wersję, uruchamiając -
C:\Users\username>cordova -v
To wszystko, czego potrzebujesz, aby rozpocząć tworzenie aplikacji Cordova w systemie operacyjnym Windows. W naszym następnym samouczku pokażemy, jak stworzyć pierwszą aplikację.
Zrozumieliśmy, jak zainstalować Cordova i skonfigurować dla niego środowisko. Gdy wszystko będzie gotowe, możemy stworzyć naszą pierwszą aplikację hybrydową Cordova.
Krok 1 - Tworzenie aplikacji
Otwórz katalog, w którym chcesz zainstalować aplikację w wierszu polecenia. Stworzymy go na komputerze.
C:\Users\username\Desktop>cordova
create CordovaProject io.cordova.hellocordova CordovaApp
CordovaProject to nazwa katalogu, w którym tworzona jest aplikacja.
io.cordova.hellocordovajest domyślną wartością domeny odwrotnej. Jeśli to możliwe, powinieneś użyć własnej wartości domeny.
CordovaApp to tytuł Twojej aplikacji.
Krok 2 - Dodawanie platform
Musisz otworzyć katalog projektu w wierszu polecenia. W naszym przykładzie jest to plikCordovaProject. Powinieneś wybierać tylko te platformy, których potrzebujesz. Aby móc korzystać z określonej platformy, musisz mieć zainstalowany zestaw SDK platformy. Ponieważ rozwijamy się w systemie Windows, możemy korzystać z następujących platform. Zainstalowaliśmy już Android SDK, więc zainstalujemy platformę Android tylko na potrzeby tego samouczka.
C:\Users\username\Desktop\CordovaProject>cordova platform add android
Istnieją inne platformy, których można używać w systemie operacyjnym Windows.
C:\Users\username\Desktop\CordovaProject>cordova platform add wp8
C:\Users\username\Desktop\CordovaProject>cordova platform add amazon-fireos
C:\Users\username\Desktop\CordovaProject>cordova platform add windows
C:\Users\username\Desktop\CordovaProject>cordova platform add blackberry10
C:\Users\username\Desktop\CordovaProject>cordova platform add firefoxos
Jeśli tworzysz na komputerze Mac, możesz użyć -
$ cordova platform add IOS
$ cordova platform add amazon-fireos
$ cordova platform add android
$ cordova platform add blackberry10
$ cordova platform add firefoxos
Możesz również usunąć platformę ze swojego projektu, używając -
C:\Users\username\Desktop\CordovaProject>cordova platform rm android
Krok 3 - Budowanie i uruchamianie
W tym kroku zbudujemy aplikację dla określonej platformy, abyśmy mogli ją uruchomić na urządzeniu mobilnym lub emulatorze.
C:\Users\username\Desktop\CordovaProject>cordova build android
Teraz możemy uruchomić naszą aplikację. Jeśli używasz domyślnego emulatora, powinieneś użyć -
C:\Users\username\Desktop\CordovaProject>cordova emulate android
Jeśli chcesz użyć zewnętrznego emulatora lub prawdziwego urządzenia, powinieneś użyć -
C:\Users\username\Desktop\CordovaProject>cordova run android
NOTE - Użyjemy Genymotion android emulatorponieważ jest szybszy i bardziej responsywny niż domyślny. Możesz znaleźć emulator tutaj . Możesz także użyć prawdziwego urządzenia do testowania, włączającUSB debuggingz opcji i podłączenie go do komputera za pomocą kabla USB. W przypadku niektórych urządzeń konieczne będzie również zainstalowanie sterownika USB.
Po uruchomieniu aplikacja zainstaluje ją na określonej przez nas platformie. Jeśli wszystko zakończy się bez błędów, dane wyjściowe powinny pokazywać domyślny ekran startowy aplikacji.
W następnym samouczku pokażemy, jak skonfigurować aplikację Cordova.
Plik config.xmlplik to miejsce, w którym możemy zmienić konfigurację aplikacji. Kiedy stworzyliśmy naszą aplikację w ostatnim samouczku, ustawiliśmy odwrotną domenę i nazwę. Wartości można zmienić wconfig.xmlplik. Podczas tworzenia aplikacji zostanie również utworzony domyślny plik konfiguracyjny.
W poniższej tabeli wyjaśniono elementy konfiguracji w programie config.xml.
config.xml Tabela konfiguracji
S.Nr | Element i szczegóły |
---|---|
1 | widget Wartość domeny odwrotnej aplikacji, którą określiliśmy podczas tworzenia aplikacji. |
2 | name Nazwa aplikacji, którą określiliśmy podczas tworzenia aplikacji. |
3 | description Opis aplikacji. |
4 | author Autor aplikacji. |
5 | content Strona startowa aplikacji. Jest umieszczony wewnątrzwww informator. |
6 | plugin Aktualnie zainstalowane wtyczki. |
7 | access Służy do kontrolowania dostępu do domen zewnętrznych. Domyślnyoriginwartość jest ustawiona na *, co oznacza, że dostęp jest dozwolony dla dowolnej domeny. Ta wartość nie pozwoli na otwarcie niektórych określonych adresów URL w celu ochrony informacji. |
8 | allow-intent Zezwala określonym adresom URL na żądanie otwarcia aplikacji. Na przykład,<allow-intent href = "tel:*" /> pozwoli tel: links na otwarcie dialera. |
9 | platform Platformy do tworzenia aplikacji. |
Możemy skorzystać z Storage API dostępnego do przechowywania danych w aplikacjach klienckich. Pomoże to w korzystaniu z aplikacji, gdy użytkownik jest offline, a także może poprawić wydajność. Ponieważ ten samouczek jest przeznaczony dla początkujących, pokażemy Ci, jak z niego korzystaćlocal storage. W jednym z naszych późniejszych samouczków pokażemy Ci inne wtyczki, których można użyć.
Krok 1 - Dodawanie przycisków
Stworzymy cztery przyciski w index.htmlplik. Przyciski będą znajdować się wewnątrzdiv class = "app" element.
<button id = "setLocalStorage">SET LOCAL STORAGE</button>
<button id = "showLocalStorage">SHOW LOCAL STORAGE</button>
<button id = "removeProjectFromLocalStorage">REMOVE PROJECT</button>
<button id = "getLocalStorageByKey">GET BY KEY</button>
Spowoduje to wyświetlenie następującego ekranu -
Krok 2 - Dodawanie detektorów zdarzeń
Polityka bezpieczeństwa Cordova nie zezwala na zdarzenia wbudowane, więc będziemy dodawać detektory zdarzeń w plikach index.js. Przydzielimy równieżwindow.localStorage do localStorage zmienna, której będziemy używać później.
document.getElementById("setLocalStorage").addEventListener("click", setLocalStorage);
document.getElementById("showLocalStorage").addEventListener("click", showLocalStorage);
document.getElementById("removeProjectFromLocalStorage").addEventListener
("click", removeProjectFromLocalStorage);
document.getElementById("getLocalStorageByKey").addEventListener
("click", getLocalStorageByKey);
var localStorage = window.localStorage;
Krok 3 - Tworzenie funkcji
Teraz musimy stworzyć funkcje, które będą wywoływane po dotknięciu przycisków. Pierwsza funkcja służy do dodawania danych do pamięci lokalnej.
function setLocalStorage() {
localStorage.setItem("Name", "John");
localStorage.setItem("Job", "Developer");
localStorage.setItem("Project", "Cordova Project");
}
Następna zapisze dane, które dodaliśmy do konsoli.
function showLocalStorage() {
console.log(localStorage.getItem("Name"));
console.log(localStorage.getItem("Job"));
console.log(localStorage.getItem("Project"));
}
Jeśli stukniemy SET LOCAL STORAGEprzycisk, ustawimy trzy elementy do lokalnego magazynu. Jeśli stukniemySHOW LOCAL STORAGE potem konsola będzie logować pozycje, które chcemy.
Stwórzmy teraz funkcję, która usunie projekt z lokalnej pamięci.
function removeProjectFromLocalStorage() {
localStorage.removeItem("Project");
}
Jeśli klikniemy SHOW LOCAL STORAGE Po usunięciu projektu dane wyjściowe zostaną wyświetlone null wartość dla pola projektu.
Możemy również uzyskać lokalne elementy pamięci za pomocą key() metoda, która przyjmie indeks jako argument i zwróci element z odpowiednią wartością indeksu.
function getLocalStorageByKey() {
console.log(localStorage.key(0));
}
Teraz, kiedy stukamy GET BY KEY spowoduje wyświetlenie następującego wyjścia.
UWAGA
Kiedy używamy key() konsola zarejestruje plik job zamiast tego name mimo że przeszliśmy spór 0aby pobrać pierwszy obiekt. Dzieje się tak, ponieważ pamięć lokalna przechowuje dane w kolejności alfabetycznej.
W poniższej tabeli przedstawiono wszystkie dostępne lokalne metody przechowywania.
S.Nr | Metody i szczegóły |
---|---|
1 | setItem(key, value) Służy do ustawiania elementu w magazynie lokalnym. |
2 | getItem(key) Służy do pobierania przedmiotu z lokalnego magazynu. |
3 | removeItem(key) Służy do usuwania elementu z magazynu lokalnego. |
4 | key(index) Służy do uzyskania przedmiotu za pomocą indexprzedmiotu w magazynie lokalnym. Pomaga to sortować elementy alfabetycznie. |
5 | length() Służy do pobierania liczby elementów, które istnieją w pamięci lokalnej. |
6 | clear() Służy do usuwania wszystkich par klucz / wartość z pamięci lokalnej. |
Istnieje wiele wydarzeń, które można wykorzystać w projektach Cordova. Poniższa tabela przedstawia dostępne zdarzenia.
S.Nr | Wydarzenia i szczegóły |
---|---|
1 | deviceReady To zdarzenie jest wywoływane po pełnym załadowaniu Cordova. Pomaga to zapewnić, że żadne funkcje Cordova nie są wywoływane przed załadowaniem wszystkiego. |
2 | pause To zdarzenie jest wywoływane, gdy aplikacja działa w tle. |
3 | resume To zdarzenie jest wyzwalane, gdy aplikacja jest zwracana z tła. |
4 | backbutton To zdarzenie jest wyzwalane po naciśnięciu przycisku Wstecz. |
5 | menubutton To zdarzenie jest wyzwalane po naciśnięciu przycisku menu. |
6 | searchbutton To zdarzenie jest wywoływane po naciśnięciu przycisku wyszukiwania w systemie Android. |
7 | startcallbutton To zdarzenie jest wyzwalane po naciśnięciu przycisku rozpoczęcia połączenia. |
8 | endcallbutton To zdarzenie jest wyzwalane po naciśnięciu przycisku zakończenia połączenia. |
9 | volumedownbutton To zdarzenie jest wyzwalane po naciśnięciu przycisku zmniejszania głośności. |
10 | volumeupbutton To zdarzenie jest wyzwalane po naciśnięciu przycisku zwiększania głośności. |
Korzystanie z wydarzeń
Wszystkie zdarzenia są używane prawie w ten sam sposób. Powinniśmy zawsze dodawać słuchaczy zdarzeń w naszymjs zamiast tego inline event calling od Cordova Content Security Policynie zezwala na wbudowany JavaScript. Jeśli spróbujemy wywołać zdarzenie w tekście, zostanie wyświetlony następujący błąd.
Właściwy sposób pracy z wydarzeniami to używanie addEventListener. Zrozumiemy, jak używaćvolumeupbutton wydarzenie poprzez przykład.
document.addEventListener("volumeupbutton", callbackFunction, false);
function callbackFunction() {
alert('Volume Up Button is pressed!');
}
Po naciśnięciu volume up przycisk, na ekranie zostanie wyświetlony następujący alert.
Obsługa przycisku Wstecz
Powinniśmy użyć przycisku Wstecz w systemie Android, aby uzyskać funkcje aplikacji, takie jak powrót do poprzedniego ekranu. Aby zaimplementować własną funkcjonalność, powinniśmy najpierw wyłączyć przycisk Wstecz, który służy do wyjścia z aplikacji.
document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown(e) {
e.preventDefault();
alert('Back Button is Pressed!');
}
Teraz, gdy naciśniemy natywny przycisk Wstecz w Androidzie, alert pojawi się na ekranie zamiast wychodzenia z aplikacji. Odbywa się to za pomocąe.preventDefault() Komenda.
Obsługa przycisku Wstecz
Zwykle będziesz chciał użyć przycisku Wstecz Androida do niektórych funkcji aplikacji, takich jak powrót do poprzedniego ekranu. Aby móc zaimplementować własną funkcjonalność, musisz najpierw wyłączyć zamykanie aplikacji po naciśnięciu przycisku Wstecz.
document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown(e) {
e.preventDefault();
alert('Back Button is Pressed!');
}
Teraz, gdy naciśniemy natywny przycisk Wstecz w Androidzie, alert pojawi się na ekranie zamiast wychodzenia z aplikacji. Odbywa się to za pomocąe.preventDefault().
Cordova Plugman to przydatne narzędzie wiersza poleceń do instalowania wtyczek i zarządzania nimi. Powinieneś użyćplugmanjeśli Twoja aplikacja musi działać na jednej określonej platformie. Jeśli chcesz utworzyćcross-platform aplikacja, której powinieneś użyć cordova-cli który zmodyfikuje wtyczki dla różnych platform.
Krok 1 - Instalacja Plugmana
Otworzyć command prompt window i uruchom następujący fragment kodu, aby zainstalować wtyczkę.
C:\Users\username\Desktop\CordovaProject>npm install -g plugman
Krok 2 - Instalacja wtyczek
Aby zrozumieć, jak zainstalować wtyczkę Cordova za pomocą plugmana, użyjemy wtyczki Camera jako przykładu.
C:\Users\username\Desktop\CordovaProject>plugman
install --platform android --project platforms\android
--plugin cordova-plugin-camera
plugman uninstall --platform android --project platforms\android
--plugin cordova-plugin-camera
Musimy wziąć pod uwagę trzy parametry, jak pokazano powyżej.
--platform - platforma, z której korzystamy (android, ios, amazon-fireos, wp8, blackberry10).
--project- ścieżka, w której powstaje projekt. W naszym przypadku tak jestplatforms\android informator.
--plugin - wtyczkę, którą chcemy zainstalować.
Jeśli ustawisz prawidłowe parametry, okno wiersza polecenia powinno wyświetlać następujące dane wyjściowe.
Dodatkowe metody
Możesz użyć uninstall w podobny sposób.
C:\Users\username\Desktop\CordovaProject>plugman uninstall
--platform android --project platforms\android --plugin cordova-plugin-camera
Plik command prompt konsola wyświetli następujące dane wyjściowe.
Plugman oferuje kilka dodatkowych metod, których można użyć. Metody są wymienione w poniższej tabeli.
S.Nr | Metoda i szczegóły |
---|---|
1 | install Służy do instalowania wtyczek Cordova. |
2 | uninstall Służy do odinstalowywania wtyczek Cordova. |
3 | fetch Służy do kopiowania wtyczki Cordova do określonej lokalizacji. |
4 | prepare Służy do aktualizacji pliku konfiguracyjnego, aby pomóc w obsłudze modułu JS. |
5 | adduser Służy do dodawania konta użytkownika do rejestru. |
6 | publish Służy do publikowania wtyczki w rejestrze. |
7 | unpublish Służy do cofania publikacji wtyczki z rejestru. |
8 | search Służy do wyszukiwania wtyczek w rejestrze. |
9 | config Służy do konfiguracji ustawień rejestru. |
10 | create Służy do tworzenia niestandardowej wtyczki. |
11 | platform Służy do dodawania lub usuwania platformy z niestandardowej wtyczki. |
Dodatkowe polecenia
Jeśli utkniesz, zawsze możesz użyć plugman -helpKomenda. Wersję można sprawdzić za pomocąplugman -v. Aby wyszukać wtyczkę, możesz użyćplugman search i wreszcie możesz zmienić rejestr wtyczek za pomocą rozszerzenia plugman config set registry Komenda.
UWAGA
Ponieważ Cordova jest używany do tworzenia aplikacji na wiele platform, w kolejnych rozdziałach będziemy używać Cordova CLI zamiast Plugman do instalowania wtyczek.
Ta wtyczka Cordova służy do monitorowania stanu baterii urządzenia. Wtyczka będzie monitorować każdą zmianę zachodzącą w baterii urządzenia.
Krok 1 - Instalacja wtyczki baterii
Aby zainstalować tę wtyczkę, musimy otworzyć plik command prompt okno i uruchom następujący kod.
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-pluginbattery-status
Krok 2 - Dodaj odbiornik zdarzeń
Po otwarciu pliku index.js plik, znajdziesz plik onDeviceReadyfunkcjonować. W tym miejscu należy dodać detektor zdarzeń.
window.addEventListener("batterystatus", onBatteryStatus, false);
Krok 3 - Utwórz funkcję oddzwaniania
Stworzymy onBatteryStatus funkcja wywołania zwrotnego na dole pliku index.js plik.
function onBatteryStatus(info) {
alert("BATTERY STATUS: Level: " + info.level + " isPlugged: " + info.isPlugged);
}
Kiedy uruchomimy aplikację, zostanie wyzwolony alert. W tej chwili bateria jest naładowana w 100%.
Po zmianie statusu zostanie wyświetlony nowy alert. Stan baterii wskazuje, że bateria jest teraz naładowana w 99%.
Jeśli podłączymy urządzenie do ładowarki, nowy alert pokaże, że plik isPlugged wartość jest zmieniana na true.
Dodatkowe wydarzenia
Ta wtyczka oferuje dwa dodatkowe zdarzenia oprócz batterystatuszdarzenie. Te zdarzenia mogą być używane w taki sam sposób jakbatterystatus zdarzenie.
S.Nr | Wydarzenie i szczegóły |
---|---|
1 | batterylow Zdarzenie jest wyzwalane, gdy procent naładowania baterii osiągnie niską wartość. Ta wartość różni się w zależności od różnych urządzeń. |
2 | batterycritical Zdarzenie jest wyzwalane, gdy procent naładowania baterii osiągnie wartość krytyczną. Ta wartość różni się w zależności od różnych urządzeń. |
Ta wtyczka służy do robienia zdjęć lub używania plików z galerii obrazów.
Krok 1 - Zainstaluj wtyczkę aparatu
Uruchom następujący kod w command prompt okno, aby zainstalować tę wtyczkę.
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincamera
Krok 2 - Dodawanie przycisku i obrazu
Teraz utworzymy przycisk do wywoływania aparatu i imggdzie zdjęcie zostanie wyświetlone po wykonaniu. To zostanie dodane doindex.html w środku div class = "app" element.
<button id = "cameraTakePicture">TAKE PICTURE</button>
<img id = "myImage"></img>
Krok 3 - Dodawanie detektora zdarzeń
Odbiornik zdarzeń jest dodawany wewnątrz onDeviceReady funkcja, aby upewnić się, że Cordova zostanie załadowana, zanim zaczniemy jej używać.
document.getElementById("cameraTakePicture").addEventListener
("click", cameraTakePicture);
Krok 4 - Dodawanie funkcji (robienie zdjęć)
Stworzymy cameraTakePicturefunkcja, która jest przekazywana jako wywołanie zwrotne do naszego detektora zdarzeń. Zostanie uruchomiony po dotknięciu przycisku. Wewnątrz tej funkcji będziemy wywoływaćnavigator.cameraglobalny obiekt udostępniany przez API wtyczki. Jeśli zdjęcie się powiedzie, dane zostaną przesłane doonSuccessfunkcji zwrotnej, jeśli nie, zostanie wyświetlony alert z komunikatem o błędzie. Umieścimy ten kod na doleindex.js.
function cameraTakePicture() {
navigator.camera.getPicture(onSuccess, onFail, {
quality: 50,
destinationType: Camera.DestinationType.DATA_URL
});
function onSuccess(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
}
function onFail(message) {
alert('Failed because: ' + message);
}
}
Po uruchomieniu aplikacji i naciśnięciu przycisku zostanie uruchomiony aparat natywny.
Kiedy zrobimy i zapiszemy zdjęcie, zostanie ono wyświetlone na ekranie.
Tej samej procedury można użyć do pobrania obrazu z lokalnego systemu plików. Jedyną różnicą jest funkcja utworzona w ostatnim kroku. Widać, że pliksourceType dodano opcjonalny parametr.
Krok 1 B
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincamera
Krok 2 B
<button id = "cameraGetPicture">GET PICTURE</button>
Krok 3 B
document.getElementById("cameraGetPicture").addEventListener("click", cameraGetPicture);
Krok 4 B
function cameraGetPicture() {
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY
});
function onSuccess(imageURL) {
var image = document.getElementById('myImage');
image.src = imageURL;
}
function onFail(message) {
alert('Failed because: ' + message);
}
}
Po naciśnięciu drugiego przycisku zamiast aparatu otworzy się system plików, dzięki czemu możemy wybrać obraz, który ma być wyświetlany.
Ta wtyczka oferuje wiele opcjonalnych parametrów dostosowywania.
S.Nr | Parametry i szczegóły |
---|---|
1 | quality Jakość obrazu w zakresie 0-100. Wartość domyślna to 50. |
2 | destinationType DATA_URL lub 0 Zwraca ciąg zakodowany w standardzie Base64. FILE_URI lub 1 Zwraca identyfikator URI pliku obrazu. NATIVE_URI lub 2 Zwraca natywny identyfikator URI obrazu. |
3 | sourceType PHOTOLIBRARY lub 0 Otwiera bibliotekę zdjęć. CAMERA lub 1 Otwiera natywny aparat. SAVEDPHOTOALBUM lub 2 Otwiera zapisany album ze zdjęciami. |
4 | allowEdit Umożliwia edycję obrazu. |
5 | encodingType JPEG lub 0 Zwraca obraz zakodowany w formacie JPEG. PNG lub 1 Zwraca obraz zakodowany w formacie PNG. |
6 | targetWidth Szerokość skalowania obrazu w pikselach. |
7 | targetHeight Wysokość skalowania obrazu w pikselach. |
8 | mediaType PICTURE lub 0 Pozwala tylko na wybór obrazu. VIDEO lub 1 Pozwala tylko na wybór wideo. ALLMEDIA lub 2 Umożliwia wybór wszystkich typów mediów. |
9 | correctOrientation Służy do korygowania orientacji obrazu. |
10 | saveToPhotoAlbum Służy do zapisywania obrazu w albumie fotograficznym. |
11 | popoverOptions Służy do ustawiania lokalizacji popover w systemie IOS. |
12 | cameraDirection FRONT lub 0 Przednia kamera. BACK lub 1 Tylna kamera. ALLMEDIA |
Ta wtyczka służy do uzyskiwania dostępu do bazy danych kontaktów urządzenia. W tym samouczku pokażemy, jak tworzyć, wyszukiwać i usuwać kontakty.
Krok 1 - Zainstaluj wtyczkę kontaktów
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincontacts
Krok 2 - Dodawanie przycisków
Przycisk będzie używany do wywoływania createContactfunkcjonować. Umieścimy go wdiv class = "app" w index.html plik.
<button id = "createContact">ADD CONTACT</button>
<button id = "findContact">FIND CONTACT</button>
<button id = "deleteContact">DELETE CONTACT</button>
Krok 2 - Dodaj detektory zdarzenia
otwarty index.js i skopiuj następujący fragment kodu do pliku onDeviceReady funkcjonować.
document.getElementById("createContact").addEventListener("click", createContact);
document.getElementById("findContact").addEventListener("click", findContact);
document.getElementById("deleteContact").addEventListener("click", deleteContact);
Krok 3A - Funkcja oddzwaniania (navigator.contacts.create)
Teraz nie mamy żadnych kontaktów zapisanych na urządzeniu.
Nasza pierwsza funkcja zwrotna wywoła navigator.contacts.createmetoda, w której możemy określić nowe dane kontaktowe. Spowoduje to utworzenie kontaktu i przypisanie go domyContactzmienna, ale nie będzie przechowywana na urządzeniu. Aby go zapisać, musimy zadzwonić dosave i utwórz funkcje wywołania zwrotnego sukcesu i błędu.
function createContact() {
var myContact = navigator.contacts.create({"displayName": "Test User"});
myContact.save(contactSuccess, contactError);
function contactSuccess() {
alert("Contact is saved!");
}
function contactError(message) {
alert('Failed because: ' + message);
}
}
Kiedy klikniemy ADD CONTACT przycisk, nowy kontakt zostanie zapisany na liście kontaktów urządzenia.
Krok 3B - Funkcja oddzwaniania (navigator.contacts.find)
Nasza druga funkcja oddzwaniania zapyta wszystkie kontakty. Będziemy używaćnavigator.contacts.findmetoda. Obiekt opcji ma parametr filtru, który służy do określenia filtru wyszukiwania.multiple = truejest używany, ponieważ chcemy zwrócić wszystkie kontakty z urządzenia. Plikfield klawisz wyszukiwania kontaktów według displayName ponieważ użyliśmy go podczas zapisywania kontaktu.
Po ustawieniu opcji używamy findmetoda zapytań o kontakty. Komunikat ostrzegawczy zostanie wyzwolony dla każdego znalezionego kontaktu.
function findContacts() {
var options = new ContactFindOptions();
options.filter = "";
options.multiple = true;
fields = ["displayName"];
navigator.contacts.find(fields, contactfindSuccess, contactfindError, options);
function contactfindSuccess(contacts) {
for (var i = 0; i < contacts.length; i++) {
alert("Display Name = " + contacts[i].displayName);
}
}
function contactfindError(message) {
alert('Failed because: ' + message);
}
}
Kiedy naciskamy FIND CONTACT przycisk, zostanie uruchomione jedno okienko alertu, ponieważ zapisaliśmy tylko jeden kontakt.
Krok 3C - Funkcja oddzwaniania (usuń)
W tym kroku ponownie użyjemy metody find, ale tym razem ustawimy inne opcje. Plikoptions.filter jest ustawiony na wyszukiwanie tego Test Userktóre należy usunąć. PocontactfindSuccess funkcja zwrotna zwróciła żądany kontakt, usuniemy go za pomocą remove metoda, która wymaga własnego sukcesu i wywołań zwrotnych błędów.
function deleteContact() {
var options = new ContactFindOptions();
options.filter = "Test User";
options.multiple = false;
fields = ["displayName"];
navigator.contacts.find(fields, contactfindSuccess, contactfindError, options);
function contactfindSuccess(contacts) {
var contact = contacts[0];
contact.remove(contactRemoveSuccess, contactRemoveError);
function contactRemoveSuccess(contact) {
alert("Contact Deleted");
}
function contactRemoveError(message) {
alert('Failed because: ' + message);
}
}
function contactfindError(message) {
alert('Failed because: ' + message);
}
}
Teraz mamy tylko jeden kontakt zapisany na urządzeniu. Dodamy ręcznie jeszcze jeden, aby pokazać proces usuwania.
Teraz klikniemy plik DELETE CONTACT przycisk, aby usunąć Test User. Jeśli ponownie sprawdzimy listę kontaktów, zobaczymy, że plikTest User już nie istnieje.
Ta wtyczka służy do uzyskiwania informacji o urządzeniu użytkownika.
Krok 1 - Instalacja wtyczki urządzenia
Aby zainstalować tę wtyczkę, musimy uruchomić następujący fragment w pliku command prompt.
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-device
Krok 2 - Dodawanie przycisku
Będziemy używać tej wtyczki w taki sam sposób, w jaki używaliśmy innych wtyczek Cordova. Dodajmy przycisk windex.htmlplik. Ten przycisk będzie używany do uzyskania informacji o urządzeniu.
<button id = "cordovaDevice">CORDOVA DEVICE</button>
Krok 3 - Dodawanie detektora zdarzeń
Wtyczki Cordova są dostępne po deviceready zdarzenie, więc umieścimy detektor zdarzeń wewnątrz onDeviceReady funkcja w index.js.
document.getElementById("cordovaDevice").addEventListener("click", cordovaDevice);
Krok 4 - Tworzenie funkcji
Poniższa funkcja pokaże, jak wykorzystać wszystkie możliwości wtyczki. Umieścimy to windex.js.
function cordovaDevice() {
alert("Cordova version: " + device.cordova + "\n" +
"Device model: " + device.model + "\n" +
"Device platform: " + device.platform + "\n" +
"Device UUID: " + device.uuid + "\n" +
"Device version: " + device.version);
}
Kiedy klikniemy CORDOVA DEVICE alert wyświetli wersję Cordova, model urządzenia, platformę, identyfikator UUID i wersję urządzenia.
Wtyczka Accelerometer jest również nazywana device-motion. Służy do śledzenia ruchu urządzenia w trzech wymiarach.
Krok 1 - Zainstaluj wtyczkę Accelerometer
Zainstalujemy tę wtyczkę za pomocą cordova-CLI. Wpisz następujący kod wcommand prompt okno.
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-device-motion
Krok 2 - Dodaj przyciski
W tym kroku dodamy dwa przyciski w index.htmlplik. Jeden będzie używany do uzyskania aktualnego przyspieszenia, a drugi będzie obserwował zmiany przyspieszenia.
<button id = "getAcceleration">GET ACCELERATION</button>
<button id = "watchAcceleration">WATCH ACCELERATION</button>
Krok 3 - Dodaj detektory zdarzenia
Dodajmy teraz detektory zdarzeń dla naszych przycisków do onDeviceReady funkcja wewnątrz index.js.
document.getElementById("getAcceleration").addEventListener("click", getAcceleration);
document.getElementById("watchAcceleration").addEventListener(
"click", watchAcceleration);
Krok 4 - Tworzenie funkcji
Teraz utworzymy dwie funkcje. Pierwsza funkcja będzie służyła do uzyskania aktualnego przyspieszenia, a druga będzie obserwowała przyspieszenie, a informacja o przyspieszeniu będzie wyzwalana co trzy sekundy. Dodamy równieżclearWatch funkcja opakowana przez setTimeoutfunkcja, aby zatrzymać obserwowanie przyspieszenia po określonym przedziale czasu. Plikfrequency służy do wywołania funkcji zwrotnej co trzy sekundy.
function getAcceleration() {
navigator.accelerometer.getCurrentAcceleration(
accelerometerSuccess, accelerometerError);
function accelerometerSuccess(acceleration) {
alert('Acceleration X: ' + acceleration.x + '\n' +
'Acceleration Y: ' + acceleration.y + '\n' +
'Acceleration Z: ' + acceleration.z + '\n' +
'Timestamp: ' + acceleration.timestamp + '\n');
};
function accelerometerError() {
alert('onError!');
};
}
function watchAcceleration() {
var accelerometerOptions = {
frequency: 3000
}
var watchID = navigator.accelerometer.watchAcceleration(
accelerometerSuccess, accelerometerError, accelerometerOptions);
function accelerometerSuccess(acceleration) {
alert('Acceleration X: ' + acceleration.x + '\n' +
'Acceleration Y: ' + acceleration.y + '\n' +
'Acceleration Z: ' + acceleration.z + '\n' +
'Timestamp: ' + acceleration.timestamp + '\n');
setTimeout(function() {
navigator.accelerometer.clearWatch(watchID);
}, 10000);
};
function accelerometerError() {
alert('onError!');
};
}
Teraz, jeśli naciśniemy GET ACCELERATIONprzycisk, otrzymamy aktualną wartość przyspieszenia. Jeśli naciśniemyWATCH ACCELERATIONprzycisk, alarm będzie wyzwalany co trzy sekundy. Po trzecim alercie pojawia sięclearWatch funkcja zostanie wywołana i nie będziemy otrzymywać więcej alertów, ponieważ ustawiliśmy limit czasu na 10000 milisekund.
Kompas służy do wskazywania kierunku względem geograficznego północnego punktu kardynalnego.
Krok 1 - Zainstaluj wtyczkę Device Orientation
Otworzyć command prompt okno i uruchom następujące.
C:\Users\username\Desktop\CordovaProject>cordova plugin
add cordova-plugindevice-orientation
Krok 2 - Dodaj przyciski
Ta wtyczka jest podobna do accelerationpodłącz. Utwórzmy teraz dwa przyciski windex.html.
<button id = "getOrientation">GET ORIENTATION</button>
<button id = "watchOrientation">WATCH ORIENTATION</button>
Krok 3 - Dodaj detektory zdarzenia
Teraz dodamy event listeners w środku onDeviceReady funkcja w index.js.
document.getElementById("getOrientation").addEventListener("click", getOrientation);
document.getElementById("watchOrientation").addEventListener("click", watchOrientation);
Krok 4 - Tworzenie funkcji
Stworzymy dwie funkcje; pierwsza funkcja wygeneruje aktualne przyspieszenie, a druga sprawdzi zmiany orientacji. Możesz zobaczyć, że używamyfrequency opcja ponownie, aby obserwować zmiany, które następują co trzy sekundy.
function getOrientation() {
navigator.compass.getCurrentHeading(compassSuccess, compassError);
function compassSuccess(heading) {
alert('Heading: ' + heading.magneticHeading);
};
function compassError(error) {
alert('CompassError: ' + error.code);
};
}
function watchOrientation(){
var compassOptions = {
frequency: 3000
}
var watchID = navigator.compass.watchHeading(compassSuccess,
compassError, compassOptions);
function compassSuccess(heading) {
alert('Heading: ' + heading.magneticHeading);
setTimeout(function() {
navigator.compass.clearWatch(watchID);
}, 10000);
};
function compassError(error) {
alert('CompassError: ' + error.code);
};
}
Ponieważ wtyczka kompasu jest prawie taka sama jak wtyczka przyspieszająca, tym razem pokażemy Ci kod błędu. Niektóre urządzenia nie mają czujnika magnetycznego potrzebnego do działania kompasu. Jeśli Twoje urządzenie go nie ma, zostanie wyświetlony następujący błąd.
Wtyczka Cordova Dialogs wywoła natywny element interfejsu okna dialogowego platformy.
Krok 1 - Instalowanie okna dialogowego
Wpisz następujące polecenie w command prompt okno, aby zainstalować tę wtyczkę.
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-dialogs
Krok 2 - Dodaj przyciski
Otwórzmy się teraz index.html i dodaj cztery przyciski, po jednym dla każdego typu okna dialogowego.
<button id = "dialogAlert">ALERT</button>
<button id = "dialogConfirm">CONFIRM</button>
<button id = "dialogPrompt">PROMPT</button>
<button id = "dialogBeep">BEEP</button>
Krok 3 - Dodaj detektory zdarzenia
Teraz dodamy detektory zdarzeń wewnątrz onDeviceReady funkcja w index.js. Po kliknięciu odpowiedniego przycisku słuchacze wywołają funkcję zwrotną.
document.getElementById("dialogAlert").addEventListener("click", dialogAlert);
document.getElementById("dialogConfirm").addEventListener("click", dialogConfirm);
document.getElementById("dialogPrompt").addEventListener("click", dialogPrompt);
document.getElementById("dialogBeep").addEventListener("click", dialogBeep);
Krok 4A - Utwórz funkcję ostrzegania
Ponieważ dodaliśmy cztery detektory zdarzeń, utworzymy teraz funkcje zwrotne dla nich wszystkich w index.js. Pierwszy todialogAlert.
function dialogAlert() {
var message = "I am Alert Dialog!";
var title = "ALERT";
var buttonName = "Alert Button";
navigator.notification.alert(message, alertCallback, title, buttonName);
function alertCallback() {
console.log("Alert is Dismissed!");
}
}
Jeśli klikniemy ALERT przycisk, zobaczymy okno dialogowe ostrzeżenia.
Po kliknięciu przycisku dialogowego na konsoli zostaną wyświetlone następujące dane wyjściowe.
Krok 4B - Utwórz funkcję potwierdzenia
Drugą funkcją, którą musimy utworzyć, jest dialogConfirm funkcjonować.
function dialogConfirm() {
var message = "Am I Confirm Dialog?";
var title = "CONFIRM";
var buttonLabels = "YES,NO";
navigator.notification.confirm(message, confirmCallback, title, buttonLabels);
function confirmCallback(buttonIndex) {
console.log("You clicked " + buttonIndex + " button!");
}
}
Kiedy CONFIRM zostanie naciśnięty przycisk, pojawi się nowe okno dialogowe.
Klikniemy plik YESprzycisk, aby odpowiedzieć na pytanie. Następujące dane wyjściowe zostaną wyświetlone na konsoli.
Krok 4C - Utwórz funkcję podpowiedzi
Trzecią funkcją jest dialogPromptfunkcjonować. Dzięki temu użytkownicy mogą wpisywać tekst w oknie dialogowym.
function dialogPrompt() {
var message = "Am I Prompt Dialog?";
var title = "PROMPT";
var buttonLabels = ["YES","NO"];
var defaultText = "Default"
navigator.notification.prompt(message, promptCallback,
title, buttonLabels, defaultText);
function promptCallback(result) {
console.log("You clicked " + result.buttonIndex + " button! \n" +
"You entered " + result.input1);
}
}
Plik PROMPT przycisk spowoduje wyświetlenie okna dialogowego, jak na poniższym zrzucie ekranu.
W tym oknie dialogowym mamy możliwość wpisania tekstu. Zapiszemy ten tekst w konsoli wraz z klikniętym przyciskiem.
Krok 4D - Utwórz funkcję Beep
Ostatni to dialogBeepfunkcjonować. Służy do wywołania powiadomienia dźwiękowego. Pliktimes ustawia liczbę powtórzeń sygnału dźwiękowego.
function dialogBeep() {
var times = 2;
navigator.notification.beep(times);
}
Kiedy klikniemy BEEP przycisk, usłyszymy dźwięk powiadomienia dwukrotnie, ponieważ times wartość jest ustawiona na 2.
Ta wtyczka służy do manipulowania natywnym systemem plików na urządzeniu użytkownika.
Krok 1 - Instalacja wtyczki pliku
Musimy uruchomić następujący kod w command prompt aby zainstalować tę wtyczkę.
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-file
Krok 2 - Dodaj przyciski
W tym przykładzie pokażemy, jak utworzyć plik, zapisać do pliku, przeczytać go i usunąć. Z tego powodu utworzymy cztery przyciski windex.html. Dodamy równieżtextarea w którym zostanie wyświetlona zawartość naszego pliku.
<button id = "createFile">CREATE FILE</button>
<button id = "writeFile">WRITE FILE</button>
<button id = "readFile">READ FILE</button>
<button id = "removeFile">DELETE FILE</button>
<textarea id = "textarea"></textarea>
Krok 3 - Dodaj detektory zdarzenia
Dodamy event listeners w index.js w środku onDeviceReady funkcji, aby upewnić się, że wszystko zaczęło się przed użyciem wtyczki.
document.getElementById("createFile").addEventListener("click", createFile);
document.getElementById("writeFile").addEventListener("click", writeFile);
document.getElementById("readFile").addEventListener("click", readFile);
document.getElementById("removeFile").addEventListener("click", removeFile);
Krok 4A - Funkcja Utwórz plik
Plik zostanie utworzony w folderze głównym aplikacji na urządzeniu. Aby mieć dostęp do folderu głównego, który musisz podaćsuperuserdostęp do twoich folderów. W naszym przypadku ścieżka do folderu głównego to\data\data\com.example.hello\cache. W tej chwili ten folder jest pusty.
Dodajmy teraz funkcję, która utworzy plik log.txt. Napiszemy ten kod windex.jsi wyślij żądanie do systemu plików. Ta metoda używa WINDOW.TEMPORARY lub WINDOW.PERSISTENT. Rozmiar, który będzie wymagany do przechowywania, jest podawany w bajtach (w naszym przypadku 5 MB).
function createFile() {
var type = window.TEMPORARY;
var size = 5*1024*1024;
window.requestFileSystem(type, size, successCallback, errorCallback)
function successCallback(fs) {
fs.root.getFile('log.txt', {create: true, exclusive: true}, function(fileEntry) {
alert('File creation successfull!')
}, errorCallback);
}
function errorCallback(error) {
alert("ERROR: " + error.code)
}
}
Teraz możemy nacisnąć CREATE FILE a alert potwierdzi, że pomyślnie utworzyliśmy plik.
Teraz możemy ponownie sprawdzić folder główny naszych aplikacji i możemy tam znaleźć nasz nowy plik.
Krok 4B - Funkcja zapisu pliku
W tym kroku napiszemy tekst do naszego pliku. Ponownie wyślemy żądanie do systemu plików, a następnie utworzymy program zapisujący pliki, aby móc pisaćLorem Ipsum tekst, który przypisaliśmy do blob zmienna.
function writeFile() {
var type = window.TEMPORARY;
var size = 5*1024*1024;
window.requestFileSystem(type, size, successCallback, errorCallback)
function successCallback(fs) {
fs.root.getFile('log.txt', {create: true}, function(fileEntry) {
fileEntry.createWriter(function(fileWriter) {
fileWriter.onwriteend = function(e) {
alert('Write completed.');
};
fileWriter.onerror = function(e) {
alert('Write failed: ' + e.toString());
};
var blob = new Blob(['Lorem Ipsum'], {type: 'text/plain'});
fileWriter.write(blob);
}, errorCallback);
}, errorCallback);
}
function errorCallback(error) {
alert("ERROR: " + error.code)
}
}
Po naciśnięciu WRITE FILE przycisk, alert poinformuje nas, że zapis się powiódł, jak na poniższym zrzucie ekranu.
Teraz możemy otworzyć log.txt i zobacz to Lorem Ipsum jest napisane w środku.
Krok 4C - Funkcja odczytu pliku
W tym kroku przeczytamy plik log.txt i wyświetlimy go w formacie textareaelement. Wyślemy żądanie do systemu plików i otrzymamy obiekt pliku, a następnie tworzymyreader. Po załadowaniu czytnika przypiszemy zwróconą wartość dotextarea.
function readFile() {
var type = window.TEMPORARY;
var size = 5*1024*1024;
window.requestFileSystem(type, size, successCallback, errorCallback)
function successCallback(fs) {
fs.root.getFile('log.txt', {}, function(fileEntry) {
fileEntry.file(function(file) {
var reader = new FileReader();
reader.onloadend = function(e) {
var txtArea = document.getElementById('textarea');
txtArea.value = this.result;
};
reader.readAsText(file);
}, errorCallback);
}, errorCallback);
}
function errorCallback(error) {
alert("ERROR: " + error.code)
}
}
Kiedy klikniemy READ FILE przycisk, tekst z pliku zostanie zapisany w środku textarea.
Krok 4D - Funkcja usuwania pliku
I na koniec stworzymy funkcję do usuwania log.txt plik.
function removeFile() {
var type = window.TEMPORARY;
var size = 5*1024*1024;
window.requestFileSystem(type, size, successCallback, errorCallback)
function successCallback(fs) {
fs.root.getFile('log.txt', {create: false}, function(fileEntry) {
fileEntry.remove(function() {
alert('File removed.');
}, errorCallback);
}, errorCallback);
}
function errorCallback(error) {
alert("ERROR: " + error.code)
}
}
Możemy teraz nacisnąć DELETE FILEprzycisk, aby usunąć plik z folderu głównego aplikacji. Alert powiadomi nas, że operacja usuwania zakończyła się pomyślnie.
Jeśli sprawdzimy folder główny aplikacji, zobaczymy, że jest pusty.
Ta wtyczka służy do przesyłania i pobierania plików.
Krok 1 - Instalacja wtyczki File Transfer
Musimy otworzyć command prompt i uruchom następujące polecenie, aby zainstalować wtyczkę.
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-file-transfer
Krok 2 - Utwórz przyciski
W tym rozdziale pokażemy, jak przesyłać i pobierać pliki. Utwórzmy dwa przyciski windex.html
<button id = "uploadFile">UPLOAD</button>
<button id = "downloadFile">DOWNLOAD</button>
Krok 3 - Dodaj detektory zdarzenia
Odbiorniki zdarzeń zostaną utworzone w index.js w środku onDeviceReadyfunkcjonować. Dodajemyclick wydarzenia i callback Funkcje.
document.getElementById("uploadFile").addEventListener("click", uploadFile);
document.getElementById("downloadFile").addEventListener("click", downloadFile);
Krok 4A - Funkcja pobierania
Ta funkcja będzie używana do pobierania plików z serwera na urządzenie. Przesłaliśmy plik dopostimage.orgaby uprościć sprawę. Prawdopodobnie będziesz chciał użyć własnego serwera. Funkcja jest umieszczona windex.js i zostanie uruchomiony po naciśnięciu odpowiedniego przycisku. uri to łącze pobierania serwera, a fileURI to ścieżka do folderu DCIM na naszym urządzeniu.
function downloadFile() {
var fileTransfer = new FileTransfer();
var uri = encodeURI("http://s14.postimg.org/i8qvaxyup/bitcoin1.jpg");
var fileURL = "///storage/emulated/0/DCIM/myFile";
fileTransfer.download(
uri, fileURL, function(entry) {
console.log("download complete: " + entry.toURL());
},
function(error) {
console.log("download error source " + error.source);
console.log("download error target " + error.target);
console.log("download error code" + error.code);
},
false, {
headers: {
"Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
}
}
);
}
Po naciśnięciu DOWNLOAD przycisk, plik zostanie pobrany z postimg.orgserwer na nasze urządzenie mobilne. Możemy sprawdzić określony folder i to zobaczyćmyFile jest tu.
Wynik konsoli będzie wyglądał następująco -
Krok 4B - Funkcja przesyłania
Teraz stwórzmy funkcję, która pobierze plik i załaduje go na serwer. Znowu chcemy to maksymalnie uprościć, więc użyjemyposttestserver.comserwer online do testów. Wartość uri zostanie połączona z wysłaniem doposttestserver.
function uploadFile() {
var fileURL = "///storage/emulated/0/DCIM/myFile"
var uri = encodeURI("http://posttestserver.com/post.php");
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = fileURL.substr(fileURL.lastIndexOf('/')+1);
options.mimeType = "text/plain";
var headers = {'headerParam':'headerValue'};
options.headers = headers;
var ft = new FileTransfer();
ft.upload(fileURL, uri, onSuccess, onError, options);
function onSuccess(r) {
console.log("Code = " + r.responseCode);
console.log("Response = " + r.response);
console.log("Sent = " + r.bytesSent);
}
function onError(error) {
alert("An error has occurred: Code = " + error.code);
console.log("upload error source " + error.source);
console.log("upload error target " + error.target);
}
}
Teraz możemy nacisnąć UPLOADprzycisk, aby uruchomić tę funkcję. Otrzymamy dane wyjściowe konsoli jako potwierdzenie, że przesyłanie się powiodło.
Możemy również sprawdzić serwer, aby upewnić się, że plik został przesłany.
Geolokalizacja służy do uzyskiwania informacji o szerokości i długości geograficznej urządzenia.
Krok 1 - Instalacja wtyczki
Możemy zainstalować tę wtyczkę, wpisując następujący kod do command prompt okno.
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-geolocation
Krok 2 - Dodaj przyciski
W tym samouczku pokażemy, jak uzyskać aktualną pozycję i jak obserwować zmiany. Najpierw musimy utworzyć przyciski, które będą wywoływać te funkcje.
<button id = "getPosition">CURRENT POSITION</button>
<button id = "watchPosition">WATCH POSITION</button>
Krok 3 - Dodaj detektory zdarzenia
Teraz chcemy dodać detektory zdarzeń, gdy urządzenie jest gotowe. Dodamy poniższy przykład kodu doonDeviceReady funkcja w index.js.
document.getElementById("getPosition").addEventListener("click", getPosition);
document.getElementById("watchPosition").addEventListener("click", watchPosition);
Krok 3 - Utwórz funkcje
Należy utworzyć dwie funkcje dla dwóch detektorów zdarzeń. Jeden posłuży do uzyskania aktualnej pozycji, a drugi do oglądania pozycji.
function getPosition() {
var options = {
enableHighAccuracy: true,
maximumAge: 3600000
}
var watchID = navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
function onSuccess(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 onError(error) {
alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
}
}
function watchPosition() {
var options = {
maximumAge: 3600000,
timeout: 3000,
enableHighAccuracy: true,
}
var watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
function onSuccess(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 onError(error) {
alert('code: ' + error.code + '\n' +'message: ' + error.message + '\n');
}
}
W powyższym przykładzie używamy dwóch metod - getCurrentPosition i watchPosition. Obie funkcje używają trzech parametrów. Po kliknięciuCURRENT POSITION przycisk, alert pokaże wartości geolokalizacji.
Jeśli klikniemy WATCH POSITIONprzycisk, ten sam alert będzie wyzwalany co trzy sekundy. W ten sposób możemy śledzić zmiany ruchu urządzenia użytkownika.
UWAGA
Ta wtyczka korzysta z GPS. Czasami nie może zwrócić wartości na czas, a żądanie zwróci błąd przekroczenia limitu czasu. Dlatego określiliśmyenableHighAccuracy: true i maximumAge: 3600000.Oznacza to, że jeśli żądanie nie zostanie ukończone na czas, użyjemy zamiast tego ostatniej znanej wartości. W naszym przykładzie ustawiamy maximumAge na 3600000 milisekund.
Ta wtyczka służy do uzyskiwania informacji o języku użytkownika, dacie i strefie czasowej, walucie itp.
Krok 1 - Instalowanie wtyczki do globalizacji
otwarty command prompt i zainstaluj wtyczkę, wpisując następujący kod
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-globalization
Krok 2 - Dodaj przyciski
Dodamy kilka przycisków do index.html aby móc wywołać różne metody, które utworzymy później.
<button id = "getLanguage">LANGUAGE</button>
<button id = "getLocaleName">LOCALE NAME</button>
<button id = "getDate">DATE</button>
<button id = "getCurrency">CURRENCY</button>
Krok 3 - Dodaj detektory zdarzenia
Wewnątrz zostaną dodani słuchacze wydarzeń getDeviceReady funkcja w index.js plik, aby upewnić się, że nasza aplikacja i Cordova zostaną załadowane, zanim zaczniemy ich używać.
document.getElementById("getLanguage").addEventListener("click", getLanguage);
document.getElementById("getLocaleName").addEventListener("click", getLocaleName);
document.getElementById("getDate").addEventListener("click", getDate);
document.getElementById("getCurrency").addEventListener("click", getCurrency);
Krok 4A - Funkcja języka
Pierwsza funkcja, której używamy, zwraca tag języka BCP 47 urządzenia klienta. UżyjemygetPreferredLanguagemetoda. Funkcja ma dwa parametry onSuccess ionError. Dodajemy tę funkcję windex.js.
function getLanguage() {
navigator.globalization.getPreferredLanguage(onSuccess, onError);
function onSuccess(language) {
alert('language: ' + language.value + '\n');
}
function onError(){
alert('Error getting language');
}
}
Po naciśnięciu LANGUAGE przycisk, alert zostanie wyświetlony na ekranie.
Krok 4B - Funkcja Locale
Ta funkcja zwraca znacznik BCP 47 dla lokalnych ustawień klienta. Ta funkcja jest podobna do tej, którą stworzyliśmy wcześniej. Jedyna różnica polega na tym, że używamygetLocaleName metoda tym razem.
function getLocaleName() {
navigator.globalization.getLocaleName(onSuccess, onError);
function onSuccess(locale) {
alert('locale: ' + locale.value);
}
function onError(){
alert('Error getting locale');
}
}
Kiedy klikniemy LOCALE przycisk, alert pokaże nasz tag lokalizacji.
Krok 4C - Funkcja daty
Ta funkcja służy do zwracania daty zgodnie z ustawieniami regionalnymi i strefą czasową klienta. date parametr to aktualna data i options parametr jest opcjonalny.
function getDate() {
var date = new Date();
var options = {
formatLength:'short',
selector:'date and time'
}
navigator.globalization.dateToString(date, onSuccess, onError, options);
function onSuccess(date) {
alert('date: ' + date.value);
}
function onError(){
alert('Error getting dateString');
}
}
Możemy teraz uruchomić aplikację i nacisnąć DATE aby zobaczyć aktualną datę.
Ostatnią funkcją, którą pokażemy, jest zwrócenie wartości walut zgodnie z ustawieniami urządzenia klienta i kodem waluty ISO 4217. Widać, że koncepcja jest taka sama.
function getCurrency() {
var currencyCode = 'EUR';
navigator.globalization.getCurrencyPattern(currencyCode, onSuccess, onError);
function onSuccess(pattern) {
alert('pattern: ' + pattern.pattern + '\n' +
'code: ' + pattern.code + '\n' +
'fraction: ' + pattern.fraction + '\n' +
'rounding: ' + pattern.rounding + '\n' +
'decimal: ' + pattern.decimal + '\n' +
'grouping: ' + pattern.grouping);
}
function onError(){
alert('Error getting pattern');
}
}
Plik CURRENCY przycisk wyzwoli alert, który pokaże wzór waluty użytkownika.
Ta wtyczka oferuje inne metody. Możesz zobaczyć to wszystko w poniższej tabeli.
metoda | parametry | Detale |
---|---|---|
getPreferredLanguage | onSuccess, onError | Zwraca aktualny język klienta. |
getLocaleName | onSuccess, onError | Zwraca aktualne ustawienia regionalne klienta. |
dateToString | date, onSuccess, onError, options | Zwraca datę zgodnie z ustawieniami regionalnymi i strefą czasową klienta. |
stringToDate | dateString, onSuccess, onError, options | Analizuje datę zgodnie z ustawieniami klienta. |
getCurrencyPattern | currencyCode, onSuccess, onError | Zwraca wzór waluty klienta. |
getDatePattern | onSuccess, onError, options | Zwraca wzorzec daty klienta. |
getDateNames | onSuccess, onError, options | Zwraca tablicę nazw miesięcy, tygodni lub dni zgodnie z ustawieniami klienta. |
isDayLightSavingsTime | date, successCallback, errorCallback | Służy do określania, czy czas letni jest aktywny zgodnie ze strefą czasową i kalendarzem klienta. |
getFirstDayOfWeek | onSuccess, onError | Zwraca pierwszy dzień tygodnia zgodnie z ustawieniami klienta. |
numberToString | number, onSuccess, onError, options | Zwraca liczbę zgodnie z ustawieniami klienta. |
stringToNumber | string, onSuccess, onError, options | Analizuje liczbę zgodnie z ustawieniami klienta. |
getNumberPattern | onSuccess, onError, options | Zwraca wzorzec liczb zgodnie z ustawieniami klienta. |
Ta wtyczka służy do otwierania przeglądarki internetowej w aplikacji Cordova.
Krok 1 - Instalacja wtyczki
Musimy zainstalować tę wtyczkę w command prompt zanim będziemy mogli z niego skorzystać.
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-inappbrowser
Krok 2 - Dodaj przycisk
Dodamy jeden przycisk, który posłuży do otwierania inAppBrowser okno w index.html.
Krok 3 - Dodaj odbiornik zdarzeń
Teraz dodajmy detektor zdarzeń dla naszego przycisku w onDeviceReady funkcja w index.js.
document.getElementById("openBrowser").addEventListener("click", openBrowser);
Krok 4 - Utwórz funkcję
W tym kroku tworzymy funkcję, która otworzy przeglądarkę w naszej aplikacji. Przypisujemy go doref zmienna, której możemy później użyć do dodania detektorów zdarzeń.
function openBrowser() {
var url = 'https://cordova.apache.org';
var target = '_blank';
var options = "location = yes"
var ref = cordova.InAppBrowser.open(url, target, options);
ref.addEventListener('loadstart', loadstartCallback);
ref.addEventListener('loadstop', loadstopCallback);
ref.addEventListener('loaderror', loaderrorCallback);
ref.addEventListener('exit', exitCallback);
function loadstartCallback(event) {
console.log('Loading started: ' + event.url)
}
function loadstopCallback(event) {
console.log('Loading finished: ' + event.url)
}
function loaderrorCallback(error) {
console.log('Loading error: ' + error.message)
}
function exitCallback() {
console.log('Browser is closed...')
}
}
Jeśli naciśniemy BROWSER przycisk, zobaczymy następujące dane wyjściowe na ekranie.
Konsola będzie również nasłuchiwała zdarzeń. loadstart zdarzenie zostanie uruchomione po rozpoczęciu ładowania adresu URL i loadstopuruchomi się po załadowaniu adresu URL. Możemy to zobaczyć w konsoli.
Po zamknięciu przeglądarki exit zdarzenie wybuchnie.
Istnieją inne możliwe opcje okna InAppBrowser. Wyjaśnimy to w poniższej tabeli.
S.Nr | opcja i szczegóły |
---|---|
1 | location Służy do włączania i wyłączania paska adresu przeglądarki. Wartości sąyes lub no. |
2 | hidden Służy do ukrywania lub wyświetlania wAppBrowser. Wartości sąyes lub no. |
3 | clearCache Służy do czyszczenia pamięci podręcznej plików cookie przeglądarki. Wartości sąyes lub no. |
4 | clearsessioncache Służy do czyszczenia pamięci podręcznej plików cookie sesji. Wartości sąyes lub no. |
5 | zoom Służy do ukrywania lub pokazywania elementów sterujących powiększeniem przeglądarki Androida. Wartości sąyes lub no. |
6 | hardwareback yes aby użyć sprzętowego przycisku Wstecz, aby wrócić do historii przeglądarki. no aby zamknąć przeglądarkę po kliknięciu przycisku Wstecz. |
Możemy użyć ref(odniesienie) zmienna dla niektórych innych funkcji. Pokażemy Ci tylko krótkie przykłady. Do usuwania nasłuchiwaczy zdarzeń możemy użyć -
ref.removeEventListener(eventname, callback);
Do zamknięcia InAppBrowser możemy użyć -
ref.close();
Jeśli otworzyliśmy ukryte okno, możemy je pokazać -
ref.show();
Nawet kod JavaScript można wstrzyknąć do InAppBrowser -
var details = "javascript/file/url"
ref.executeScript(details, callback);
Tej samej koncepcji można użyć do wstrzykiwania CSS -
var details = "css/file/url"
ref.inserCSS(details, callback);
Wtyczka Cordova media służy do nagrywania i odtwarzania dźwięków w aplikacjach Cordova.
Krok 1 - Instalacja wtyczki Media
Wtyczkę Media można zainstalować, uruchamiając następujący kod w command prompt okno.
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-media
Krok 2 - Dodaj przyciski
W tym samouczku stworzymy prosty odtwarzacz audio. Stwórzmy przyciski, które będą nam potrzebneindex.html.
<button id = "playAudio">PLAY</button>
<button id = "pauseAudio">PAUSE</button>
<button id = "stopAudio">STOP</button>
<button id = "volumeUp">VOLUME UP</button>
<button id = "volumeDown">VOLUME DOWN</button>
Krok 3 - Dodaj detektory zdarzenia
Teraz musimy dodać detektory zdarzeń dla naszych przycisków w środku onDeviceReady funkcja wewnątrz index.js.
document.getElementById("playAudio").addEventListener("click", playAudio);
document.getElementById("pauseAudio").addEventListener("click", pauseAudio);
document.getElementById("stopAudio").addEventListener("click", stopAudio);
document.getElementById("volumeUp").addEventListener("click", volumeUp);
document.getElementById("volumeDown").addEventListener("click", volumeDown);
Krok 4A - Funkcja odtwarzania
Pierwsza funkcja, którą zamierzamy dodać, to playAudio. DefiniujemymyMediapoza funkcją, ponieważ chcemy go użyć w funkcjach, które zostaną dodane później (pauza, stop, volumeUp i volumeDown). Ten kod jest umieszczony windex.js plik.
var myMedia = null;
function playAudio() {
var src = "/android_asset/www/audio/piano.mp3";
if(myMedia === null) {
myMedia = new Media(src, onSuccess, onError);
function onSuccess() {
console.log("playAudio Success");
}
function onError(error) {
console.log("playAudio Error: " + error.code);
}
}
myMedia.play();
}
Możemy kliknąć PLAY przycisk, aby uruchomić muzykę fortepianową z src ścieżka.
Krok 4B - Funkcje pauzy i zatrzymania
Kolejne funkcje, których potrzebujemy, to pauseAudio i stopAudio.
function pauseAudio() {
if(myMedia) {
myMedia.pause();
}
}
function stopAudio() {
if(myMedia) {
myMedia.stop();
}
myMedia = null;
}
Teraz możemy wstrzymać lub zatrzymać dźwięk fortepianu, klikając PAUSE lub STOP guziki.
Krok 4C - Funkcje głośności
Aby ustawić głośność, możemy użyć setVolumemetoda. Ta metoda przyjmuje parametr o wartościach z0 do 1. Ustawimy wartość początkową na0.5.
var volumeValue = 0.5;
function volumeUp() {
if(myMedia && volumeValue < 1) {
myMedia.setVolume(volumeValue += 0.1);
}
}
function volumeDown() {
if(myMedia && volumeValue > 0) {
myMedia.setVolume(volumeValue -= 0.1);
}
}
Po naciśnięciu VOLUME UP lub VOLUME DOWN możemy zmienić wartość głośności o 0.1.
W poniższej tabeli przedstawiono inne metody, które zapewnia ta wtyczka.
S.Nr | Metoda i szczegóły |
---|---|
1 | getCurrentPosition Zwraca bieżącą pozycję audio. |
2 | getDuration Zwraca czas trwania dźwięku. |
3 | play Służy do uruchamiania lub wznawiania dźwięku. |
4 | pause Służy do wstrzymywania dźwięku. |
5 | release Zwalnia zasoby audio systemu operacyjnego. |
6 | seekTo Służy do zmiany pozycji audio. |
7 | setVolume Służy do ustawiania głośności dźwięku. |
8 | startRecord Rozpocznij nagrywanie pliku audio. |
9 | stopRecord Zatrzymaj nagrywanie pliku audio. |
10 | stop Zatrzymaj odtwarzanie pliku audio. |
Ta wtyczka służy do uzyskiwania dostępu do opcji przechwytywania urządzenia.
Krok 1 - Instalacja wtyczki Media Capture
Aby zainstalować tę wtyczkę, otworzymy command prompt i uruchom następujący kod -
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-media-capture
Krok 2 - Dodaj przyciski
Ponieważ chcemy pokazać, jak przechwytywać dźwięk, obraz i wideo, utworzymy trzy przyciski w index.html.
<button id = "audioCapture">AUDIO</button>
<button id = "imageCapture">IMAGE</button>
<button id = "videoCapture">VIDEO</button>
Krok 3 - Dodaj detektory zdarzenia
Następnym krokiem jest dodanie do środka detektorów zdarzeń onDeviceReady w index.js.
document.getElementById("audioCapture").addEventListener("click", audioCapture);
document.getElementById("imageCapture").addEventListener("click", imageCapture);
document.getElementById("videoCapture").addEventListener("click", videoCapture);
Krok 4A - Funkcja przechwytywania dźwięku
Pierwsza funkcja zwrotna w index.js jest audioCapture. Aby uruchomić rejestrator dźwięku, użyjemycaptureAudiometoda. Korzystamy z dwóch opcji -limit pozwoli na nagranie tylko jednego klipu audio podczas jednej operacji przechwytywania i duration to liczba sekund klipu dźwiękowego.
function audioCapture() {
var options = {
limit: 1,
duration: 10
};
navigator.device.capture.captureAudio(onSuccess, onError, options);
function onSuccess(mediaFiles) {
var i, path, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
path = mediaFiles[i].fullPath;
console.log(mediaFiles);
}
}
function onError(error) {
navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
}
}
Kiedy naciskamy AUDIO przycisk, rejestrator dźwięku otworzy się.
Konsola pokaże zwróconą tablicę obiektów przechwyconych przez użytkowników.
Krok 4B - Funkcja przechwytywania obrazu
Funkcja przechwytywania obrazu będzie taka sama jak poprzednia. Jedyna różnica polega na tym, że używamycaptureImage metoda tym razem.
function imageCapture() {
var options = {
limit: 1
};
navigator.device.capture.captureImage(onSuccess, onError, options);
function onSuccess(mediaFiles) {
var i, path, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
path = mediaFiles[i].fullPath;
console.log(mediaFiles);
}
}
function onError(error) {
navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
}
}
Teraz możemy kliknąć IMAGE przycisk, aby uruchomić aparat.
Kiedy zrobimy zdjęcie, konsola zarejestruje tablicę z obiektem obrazu.
Krok 4C - Funkcja przechwytywania wideo
Powtórzmy tę samą koncepcję przechwytywania wideo. UżyjemyvideoCapture metoda tym razem.
function videoCapture() {
var options = {
limit: 1,
duration: 10
};
navigator.device.capture.captureVideo(onSuccess, onError, options);
function onSuccess(mediaFiles) {
var i, path, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
path = mediaFiles[i].fullPath;
console.log(mediaFiles);
}
}
function onError(error) {
navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
}
}
Jeśli naciśniemy VIDEO przycisk, kamera otworzy się i możemy nagrać wideo.
Po zapisaniu wideo konsola ponownie zwróci tablicę. Tym razem z obiektem wideo w środku.
Ta wtyczka dostarcza informacji o sieci urządzenia.
Krok 1 - Instalacja wtyczki Network Information
Aby zainstalować tę wtyczkę, otworzymy command prompt i uruchom następujący kod -
C:\Users\username\Desktop\CordovaProject>cordova plugin
add cordova-plugin-network-information
Krok 2 - Dodaj przyciski
Utwórzmy jeden przycisk w index.html które będą używane do uzyskiwania informacji o sieci.
<button id = "networkInfo">INFO</button>
Krok 3 - Dodaj detektory zdarzenia
Dodamy do środka trzech słuchaczy wydarzeń onDeviceReady funkcja w index.js. Jeden będzie nasłuchiwał kliknięć przycisku, który utworzyliśmy wcześniej, a dwa pozostałe będą nasłuchiwać zmian stanu połączenia.
document.getElementById("networkInfo").addEventListener("click", networkInfo);
document.addEventListener("offline", onOffline, false);
document.addEventListener("online", onOnline, false);
Krok 4 - Tworzenie funkcji
networkInfofunkcja zwróci informację o aktualnym połączeniu sieciowym po kliknięciu przycisku. Dzwonimytypemetoda. Pozostałe funkcje toonOffline i onOnline. Te funkcje nasłuchują zmian połączenia, a każda zmiana wywoła odpowiedni komunikat ostrzegawczy.
function networkInfo() {
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] = 'No network connection';
alert('Connection type: ' + states[networkState]);
}
function onOffline() {
alert('You are now offline!');
}
function onOnline() {
alert('You are now online!');
}
Kiedy uruchamiamy aplikację połączoną z siecią, onOnline funkcja wywoła alert.
Jeśli naciśniemy INFO przycisk alert pokaże stan naszej sieci.
Jeśli odłączymy się od sieci, onOffline funkcja zostanie wywołana.
Ta wtyczka służy do wyświetlania ekranu powitalnego podczas uruchamiania aplikacji.
Krok 1 - Instalowanie wtyczki ekranu powitalnego
Wtyczkę ekranu powitalnego można zainstalować w command prompt okno, uruchamiając następujący kod.
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-splashscreen
Krok 2 - Dodaj ekran powitalny
Dodanie ekranu powitalnego różni się od dodawania innych wtyczek Cordova. Musimy otworzyćconfig.xml i dodaj następujące fragmenty kodu w pliku widget element.
Pierwszy fragment to SplashScreen. To mavalue właściwość, która jest nazwą obrazów w platform/android/res/drawable- foldery. Cordova oferuje domyślnescreen.pngobrazy, których używamy w tym przykładzie, ale prawdopodobnie będziesz chciał dodać własne obrazy. Ważne jest, aby dodać obrazy do widoku pionowego i poziomego, a także do pokrycia różnych rozmiarów ekranu.
<preference name = "SplashScreen" value = "screen" />
Drugi fragment, który musimy dodać, to SplashScreenDelay. Siedzimyvalue do 3000 aby ukryć ekran powitalny po trzech sekundach.
<preference name = "SplashScreenDelay" value = "3000" />
Ostatnia preferencja jest opcjonalna. Jeśli wartość jest ustawiona natrue, obraz nie zostanie rozciągnięty w celu dopasowania do ekranu. Jeśli jest ustawiony nafalse, zostanie rozciągnięty.
<preference name = "SplashMaintainAspectRatio" value = "true" />
Teraz, gdy uruchomimy aplikację, zobaczymy ekran powitalny.
Ta wtyczka służy do łączenia się z funkcją wibracji urządzenia.
Krok 1 - Instalowanie wtyczki wibracji
Możemy zainstalować tę wtyczkę w command prompt okno, uruchamiając następujący kod -
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-vibration
Krok 2 - Dodaj przyciski
Po zainstalowaniu wtyczki możemy dodać przyciski index.html które zostaną użyte później do wywołania wibracji.
<button id = "vibration">VIBRATION</button>
<button id = "vibrationPattern">PATTERN</button>
Krok 3 - Dodaj detektory zdarzenia
Teraz dodamy do środka detektory zdarzeń onDeviceReady w index.js.
document.getElementById("vibration").addEventListener("click", vibration);
document.getElementById("vibrationPattern").addEventListener("click", vibrationPattern);
Krok 4 - Utwórz funkcje
Ta wtyczka jest bardzo łatwa w użyciu. Stworzymy dwie funkcje.
function vibration() {
var time = 3000;
navigator.vibrate(time);
}
function vibrationPattern() {
var pattern = [1000, 1000, 1000, 1000];
navigator.vibrate(pattern);
}
Pierwsza funkcja przyjmuje parametr czasu. Ten parametr służy do ustawiania czasu trwania wibracji. Po naciśnięciu urządzenie będzie wibrować przez trzy sekundyVIBRATION przycisk.
Druga funkcja to użycie patternparametr. Ta tablica poprosi urządzenie o wibracje przez jedną sekundę, a następnie odczekaj jedną sekundę, a następnie powtórz proces ponownie.
Ta wtyczka pozwala nam wdrożyć politykę białej listy dla nawigacji aplikacji. Kiedy tworzymy nowy projekt Cordova, plikwhitelistwtyczka jest instalowana i implementowana domyślnie. Możesz otworzyć plikconfig.xml plik do obejrzenia allow-intent domyślne ustawienia dostarczone przez Cordova.
Biała lista nawigacji
W prostym przykładzie poniżej zezwalamy na linki do zewnętrznego adresu URL. Ten kod jest umieszczony wconfig.xml. Nawigacja dofile:// Adresy URL są domyślnie dozwolone.
<allow-navigation href = "http://example.com/*" />
Znak gwiazdki, *, umożliwia nawigację do wielu wartości. W powyższym przykładzie zezwalamy na nawigację do wszystkich subdomen domenyexample.com. To samo można zastosować do protokołu lub prefiksu hosta.
<allow-navigation href = "*://*.example.com/*" />
Biała lista intencji
Jest też allow-intentelement służący do określenia, które adresy URL mogą otwierać system. Możesz zobaczyć wconfig.xml że Cordova już udostępniła nam większość potrzebnych linków.
Biała lista żądań sieciowych
Kiedy zajrzysz do środka config.xml plik, jest <access origin="*" />element. Ten element zezwala na wszystkie żądania sieciowe wysyłane do naszej aplikacji za pośrednictwem hooków Cordova. Jeśli chcesz zezwolić tylko na określone żądania, możesz usunąć je z pliku config.xml i ustawić samodzielnie.
Zastosowano tę samą zasadę, co w poprzednich przykładach.
<access origin = "http://example.com" />
Pozwoli to na wszystkie żądania sieciowe z http://example.com.
Polityka bezpieczeństwa treści
Możesz zobaczyć aktualną politykę bezpieczeństwa swojej aplikacji w head element w index.html.
<meta http-equiv = "Content-Security-Policy" content = "default-src
'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src
'self' 'unsafe-inline'; media-src *">
To jest konfiguracja domyślna. Jeśli chcesz zezwolić na wszystko z tego samego źródła iexample.com, możesz użyć -
<meta http-equiv = "Content-Security-Policy" content = "default-src 'self' foo.com">
Możesz też zezwolić na wszystko, ale ogranicz CSS i JavaScript do tego samego źródła.
<meta http-equiv = "Content-Security-Policy" content = "default-src *;
style-src 'self' 'unsafe-inline'; script-src 'self'
'unsafe-inline' 'unsafe-eval'">
Ponieważ jest to samouczek dla początkujących, zalecamy domyślne opcje Cordova. Po zapoznaniu się z Cordovą możesz wypróbować różne wartości.
Cordova służy do tworzenia hybrydowych aplikacji mobilnych, więc musisz wziąć to pod uwagę, zanim wybierzesz ją do swojego projektu. Poniżej znajdują się sprawdzone metody tworzenia aplikacji Cordova.
Aplikacje jednostronicowe
To jest zalecany projekt dla wszystkich aplikacji Cordova. SPA używa routera po stronie klienta i nawigacji załadowanej na pojedynczej stronie (zwykleindex.html). Routing jest obsługiwany przez AJAX. Jeśli śledziłeś nasze samouczki, prawdopodobnie zauważyłeś, że prawie każda wtyczka Cordova musi czekać, aż urządzenie będzie gotowe, zanim będzie można z niego korzystać. Projekt SPA poprawi szybkość ładowania i ogólną wydajność.
Kliknij Wydarzenia
Ponieważ Cordova jest używany w świecie mobilnym, używanie go jest naturalne touchstart i touchend wydarzenia zamiast clickwydarzenia. Zdarzenia kliknięcia mają opóźnienie 300 ms, więc kliknięcia nie wydają się natywne. Z drugiej strony zdarzenia dotykowe nie są obsługiwane na każdej platformie. Powinieneś wziąć to pod uwagę, zanim zdecydujesz, czego użyć.
Animacje
Należy zawsze używać akceleracji sprzętowej CSS Transitions zamiast animacji JavaScript, ponieważ będą działać lepiej na urządzeniach mobilnych.
Przechowywanie
W miarę możliwości korzystaj z pamięci podręcznej. Połączenia w sieci komórkowej są zwykle słabe, dlatego należy zminimalizować połączenia sieciowe w aplikacji. Powinieneś także zająć się stanem aplikacji w trybie offline, ponieważ mogą się zdarzyć, że urządzenia użytkownika będą w trybie offline.
Przewijanie
W większości przypadków pierwszą wolną częścią aplikacji będą przewijane listy. Istnieje kilka sposobów na poprawę wydajności przewijania aplikacji. Zalecamy korzystanie z natywnego przewijania. Jeśli na liście jest dużo pozycji, należy je częściowo załadować. W razie potrzeby używaj ładowarek.
Obrazy
Obrazy mogą również spowalniać aplikację mobilną. Gdy tylko jest to możliwe, powinieneś używać sprite'ów CSS. Spróbuj idealnie dopasować obrazy, zamiast je skalować.
Style CSS
Należy unikać cieni i gradientów, ponieważ spowalniają one czas renderowania strony.
Uproszczenie
DOM przeglądarki jest powolny, więc powinieneś spróbować zminimalizować manipulację DOM i liczbę elementów DOM.
Testowanie
Upewnij się, że testujesz swoją aplikację na jak największej liczbie urządzeń i wersji systemu operacyjnego. Jeśli aplikacja działa bezbłędnie na jednym urządzeniu, nie oznacza to, że będzie działać na innym urządzeniu lub platformie.