Benvenuti a questo tutorial intrductory circa la configurazione di base dell'applicazione Cordova.
Non troverete in questo tutorial nulla di veramente interessante. Ho appena scritto perché qui ho descritto i primi passi indispensabili per l'installazione di un nuovo progetto di Cordova per seguire i vari tutorial che si possono trovare nel mio blog. Invece di ripetere le stesse cose di iniziare ogni nuovo tutorial, Ho pensato che fosse meglio mettere tutto in un unico articolo e 'veloce e collegarlo alla partenza dei miei articoli per chi ne ha bisogno senza annoiare i lettori più frequenti con le cose che già conoscono.
Ovviamente, Non voglio spiegare qui come installare Cordova sé: per questo si può solo leggere il documentazione ufficiale.
Avvio di una nuova applicazione Cordova
Quindi cominciamo creando una piccola Cordova app per testare la nostra connessione Dropbox. Apre vi comando interfaccia a riga (sarà il prompt dei comandi di Windows e la finestra del terminale in Linux), Passare alla directory dove tieni le tue applicazioni Cordova e tipo:
Cordova creare baseApp com.codingfix.baseApp BaseApp
E poi entriamo nuova directory del progetto e aggiungere piattaforma Android:
cd baseApp piattaforme Cordova aggiungono Android
Abbiamo subito creato un nuovo progetto di Cordova. Ora stiamo andando a vedere come modificare alcuni file per farli pronto per iniziare una vera e propria applicazione utilizzando Bootstrap e jQuery.
Preparazione file principali dell'applicazione
Come già sai, i file di base dei nostri risiede applicativi nel baseApp / www directory e nelle sue sottodirectory baseApp / www / css e baseApp / www/.js.
Il file CSS
Nella directory baseApp / www / css troviamo il file index.css, che dovrebbe apparire come la seguente:
/*
* Licensed to Apache Software Foundation (PSA) sotto un unico
* o più contratti di licenza del contribuente. Vedere il file AVVISO
* distribuito con questo lavoro per ulteriori informazioni
* per quanto riguarda la proprietà del copyright. L'ASF licenze questo file
* a voi sotto la licenza Apache, Versione 2.0 (il
* "Licenza"); Non è possibile utilizzare questo file se non in conformità
* con la licenza. È possibile ottenere una copia della licenza a
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Se non richiesto dalla legge applicabile o concordato per iscritto,
* software distribuito sotto la licenza viene distribuito su un
* "COME È" BASE, SENZA GARANZIE O CONDIZIONI DI ALCUN
* GENERE, sia espressa o implicita. Vedere la licenza per la
* lingua specifica che disciplina le autorizzazioni e limitazioni
* sotto la licenza.
*/
* {
-webkit-tocca-evidenzia-colore: RGBA(0,0,0,0); /* effettuare la selezione di collegamento trasparente, regolare ultimo valore di opacità 0 per 1.0 */
}
corpo {
-webkit-touch-callout: nessuna; /* Prevenire didascalia per copiare l'immagine, ecc quando tap a hold */
-webkit-dimensione-testo-regola: nessuna; /* Impedire WebKit di ridimensionare il testo per adattarsi */
-webkit-user-selezionare: nessuna; /* copia incolla Prevenire, permettere, cambiamento 'none' a 'testo' */
colore di sfondo:#A4a4a4;
immagine di sfondo:lineare gradiente(superiore, #A7A7A7 0%, #A4a4a4 51%);
immagine di sfondo:-webkit-lineare gradiente(superiore, #A7A7A7 0%, #A4a4a4 51%);
immagine di sfondo:-ms-lineare gradiente(superiore, #A7A7A7 0%, #A4a4a4 51%);
immagine di sfondo:-webkit-gradiente(
lineare,
in alto a sinistra,
in basso a sinistra,
colore-stop(0, #A7A7A7),
colore-stop(0.51, #A4a4a4)
);
sfondo-allegato:fisso;
famiglia di font:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
dimensione del font:12Px;
altezza:100%;
margine:0Px;
imbottitura:0Px;
trasformazione del testo:maiuscolo;
larghezza:100%;
}
/* layout verticale (predefinito) */
.App {
sfondo:URL(../img / logo.png) no-repeat in alto al centro; /* 170px x 200px */
posizione:assoluto; /* posizione nel centro dello schermo */
sinistra:50%;
superiore:50%;
altezza:50Px; /* Altezza area di testo */
larghezza:225Px; /* Larghezza area di testo */
Allinea testo:centro;
imbottitura:180px 0px 0px 0px; /* altezza dell'immagine è 200px (20px fondo sono sovrapposte con testo) */
margine:-115px 0px 0px -112px; /* Offset verticale: metà dell'altezza dell'immagine e area di testo altezza */
/* Offset orizzontale: metà della larghezza dell'area di testo */
}
/* Layout paesaggio (con min-width) */
schermo @media e (min rapporto di aspetto: 1/1) e (larghezza minima:400Px) {
.App {
posizione-sfondo:centro sinistra;
imbottitura:75px 0px 75px 170px; /* imbottitura + imbottitura-fondo + area di testo = altezza dell'immagine */
margine:-90px 0px 0px -198px; /* Offset verticale: metà dell'altezza dell'immagine */
/* Offset orizzontale: metà della larghezza e area di testo larghezza */
}
}
H1 {
dimensione del font:24Px;
font-weight:normale;
margine:0Px;
straripamento:visibile;
imbottitura:0Px;
Allinea testo:centro;
}
.evento {
raggio-bordo:4Px;
-webkit-raggio-bordo:4Px;
colore:#FFFFFF;
dimensione del font:12Px;
margine:0px 30px;
imbottitura:2px 0px;
}
.evento.ascolto {
colore di sfondo:#333333;
Schermo:bloccare;
}
.evento.ricevuto {
colore di sfondo:#4B946A;
Schermo:nessuna;
}
@keyframes dissolvenza {
a partire dal { opacità: 1.0; }
50% { opacità: 0.4; }
per { opacità: 1.0; }
}
@ -Webkit-fotogrammi chiave dissolvenza {
a partire dal { opacità: 1.0; }
50% { opacità: 0.4; }
per { opacità: 1.0; }
}
.batter {
animazione:dissolvenza 3000ms infinita;
-webkit-animazione:dissolvenza 3000ms infinita;
}
In questo caso, il nostro compito di modifica sarà molto semplice e veloce: basta mollare tutto e scrivere questa semplice regola:
.html, corpo{
altezza: 100%;
}È tutto: salvare il file e siamo pronti ad andare avanti.
Il file js
Nella directory baseApp / www / js il file indice.js Somiglia a questo:
/*
* Licensed to Apache Software Foundation (PSA) sotto un unico
* o più contratti di licenza del contribuente. Vedere il file AVVISO
* distribuito con questo lavoro per ulteriori informazioni
* per quanto riguarda la proprietà del copyright. L'ASF licenze questo file
* a voi sotto la licenza Apache, Versione 2.0 (il
* "Licenza"); Non è possibile utilizzare questo file se non in conformità
* con la licenza. È possibile ottenere una copia della licenza a
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Se non richiesto dalla legge applicabile o concordato per iscritto,
* software distribuito sotto la licenza viene distribuito su un
* "COME È" BASE, SENZA GARANZIE O CONDIZIONI DI ALCUN
* GENERE, sia espressa o implicita. Vedere la licenza per la
* lingua specifica che disciplina le autorizzazioni e limitazioni
* sotto la licenza.
*/
era app = {
// Application Constructor
inizializzare: funzione() {
document.addEventListener('Deviceready', this.onDeviceReady.bind(Questo), falso);
},
// deviceready gestore di eventi
//
// Bind eventi Cordova qui. eventi comuni sono:
// 'pausa', 'curriculum vitae', eccetera.
onDeviceReady: funzione() {
this.receivedEvent('Deviceready');
},
// Aggiornamento DOM su un evento ricevuto
receivedEvent: funzione(Id) {
var parentElement = document.getElementById(Id);
var listeningElement = parentElement.querySelector('.ascoltando');
var receivedElement = parentElement.querySelector('.Received');
listeningElement.setAttribute('stile', 'Schermo:nessuna;');
ricevutoElement.setAttribute('stile', 'Schermo:bloccare;');
console.log('Evento ha ricevuto: ' + Id);
}
};
app.initialize();Possiamo cadere ogni commento e le linee 35-40 dello snippet al fine di ottenere:
era app = {
inizializzare: funzione() {
document.addEventListener('Deviceready', this.onDeviceReady.bind(Questo), falso);
},
onDeviceReady: funzione() {
this.receivedEvent('Deviceready');
},
receivedEvent: funzione(Id) {
console.log('Evento ha ricevuto: ' + Id);
}
};
app.initialize();
$(documento).pronto(funzione () {
});Come si può vedere Ho anche aggiunto la funzione jQuery principale, dove metteremo tutti i nostri gestori di eventi.
Le visualizzazioni’ contenitore: indice.html
Il file www / index.html è il file HTML che conterrà tutti i nostri punti di vista, cioè le varie pagine di applicazione, per usare un termine più familiare per gli sviluppatori web. In questa pagina sono altro che html div. Attualmente, il indice.html sguardi di file come questo:
<!DOCTYPE html>
<!--
Licensed to Apache Software Foundation (PSA) sotto un unico
o più contratti di licenza del contribuente. Vedere il file AVVISO
distribuito con questo lavoro per ulteriori informazioni
per quanto riguarda la proprietà del copyright. L'ASF licenze questo file
a voi sotto la licenza Apache, Versione 2.0 (il
"Licenza"); Non è possibile utilizzare questo file se non in conformità
con la licenza. È possibile ottenere una copia della licenza a
http://www.apache.org/licenses/LICENSE-2.0
Se non richiesto dalla legge applicabile o concordato per iscritto,
software distribuito sotto la licenza viene distribuito su un
"COME È" BASE, SENZA GARANZIE O CONDIZIONI DI ALCUN
GENERE, sia espressa o implicita. Vedere la licenza per la
lingua specifica che disciplina le autorizzazioni e limitazioni
sotto la licenza.
-->
<.html>
<testa>
<!--
Personalizza questa politica per soddisfare le esigenze del proprio app. Per maggiori indicazioni, vedere:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
alcune note:
* divario: è richiesto solo su IOS (quando si utilizza UIWebView) ed è necessario per JS->comunicazione nativa
* https://ssl.gstatic.com sono richiesti solo su Android ed è necessario per il corretto funzionamento di TalkBack
* Disabilita l'uso di script in linea al fine di mitigare il rischio di vulnerabilità XSS. Per modificare questa:
* Abilita JS in linea: aggiungi 'insicuro-inline' di default-src
->
<meta http-equiv ="Content-Security-politica" = contenuto"default-src dati 'sé': divario: https://ssl.gstatic.com 'insicuro-eval'; style-src 'sé' 'non sicuro-inline'; media-src *; Dati img-src 'sé': soddisfare:;">
<meta name ="format-rilevamento" = contenuto"telefono = no">
<meta name ="msapplication-tap-evidenziazione" = contenuto"No">
<meta name ="Finestra" = contenuto"user-scalable = no, iniziale scala = 1, massima scala = 1, minimo scala = 1, larghezza = device-width">
<Link rel ="foglio di stile" type ="text / css" href ="css / index.css">
<titolo>Ciao mondo</titolo>
</testa>
<corpo>
<div class ="App">
<H1>Apache Cordova</H1>
<div id ="pronto per il dispositivo" class ="batter">
<= Classe P"ascolto evento">Collegamento a periferica</p>
<= Classe P"evento ha ricevuto">Il dispositivo è pronto</p>
</Div>
</Div>
<script type ="text / javascript" src ="Cordova.js"></copione>
<script type ="text / javascript" src ="JS / index.js"></copione>
</corpo>
</.html>
La prima cosa che andremo a cambiare è il tag Content-Security-politica: sostituirla con la seguente:
<meta http-equiv ="Content-Security-politica" = contenuto"default-src *; style-src 'sé' http://* 'Insicuro-inline'; script src 'sé' http://* 'Insicuro-inline' 'non sicuro-eval'; media-src *" />
Di sicuro ci ight vogliamo cambiare il titolo, ma per il momento possiamo lasciare così com'è.
Abbandonare l'intero div con classe “App” perché non abbiamo bisogno di esso e, ovviamente, si può cadere ogni commento superfluo nel file.
Infine dobbiamo aggiungere collegamenti a Bootstrap e jQuery. Potremmo usare CDN ma siamo propensi a voler nostro lavoro di applicazione anche offline, quindi è meglio scaricare sia bootstrap e jQuery e procedere a mettere i file necessari nelle directory corrette e collegarli nel file html:
<!DOCTYPE html>
<.html>
<testa>
<meta http-equiv ="Content-Security-politica" = contenuto"default-src *; style-src 'sé' http://* 'Insicuro-inline'; script src 'sé' http://* 'Insicuro-inline' 'non sicuro-eval'; media-src *" />
<meta name ="format-rilevamento" = contenuto"telefono = no">
<meta name ="msapplication-tap-evidenziazione" = contenuto"No">
<meta name ="Finestra" = contenuto"user-scalable = no, iniziale scala = 1, massima scala = 1, minimo scala = 1, larghezza = device-width">
<Link rel ="foglio di stile" href ="css / bootstrap.min.css" />
<Link rel ="foglio di stile" type ="text / css" href ="css / index.css">
<titolo>Ciao mondo</titolo>
</testa>
<corpo>
<script type ="text / javascript" src ="Cordova.js"></copione>
<script type ="text / javascript" src ="JS / jquery-2.2.3.min.js"></copione>
<script type ="text / javascript" src ="JS / bootstrap.min.js"></copione>
<script type ="text / javascript" src ="JS / index.js"></copione>
</corpo>
</.html>
È tutto. Da qui possiamo cominciare a costruire qualsiasi codice di applicazione mobile Cordova aggiungendo, plugin e script come abbiamo bisogno di loro.
Buona codifica 😉