Incapable d'interagir avec quoi que ce soit en application Cordova
Je vais avoir de la difficulté à obtenir toute sorte d'interactivité de mon premier projet Cordova. J'ai de l'expérience en HTML, Javascript et CSS, j'ai donc pensé Cordova serait une parfaite introduction à l'hybride du développement d'une application mais je n'arrive pas à obtenir un simple bouton HTML de travail sur l'application.
Je suis à l'aide de Windows 10 avec Android Studio et Cordova installé. Je pense que j'ai mis en place le projet de la structure du fichier correctement. J'ai été à la suite de Cordoue de docs et d'avoir installé la géolocalisation plugin sur tous les types d'appareils. Pour les tests, je suis en utilisant à la fois le virtuel android dans Android Studio, et un téléphone android (OnePlus X), il est connecté correctement (l'application s'ouvre sur le téléphone chaque fois que je tape "cordova exécuter android" dans la console).
J'ai commencé à essayer d'obtenir mon emplacement actuel, puis afficher les coordonnées comme une alerte. Ce n'était pas de travail, donc, pour essayer quelque chose de plus simple que j'ai ajouté un bouton qui devrait afficher une alerte pop-up lorsque l'utilisateur clique dessus, mais ils ne sont pas de travail. Voici mon code actuel:
www/index.html
<!DOCTYPE html>
<html>
<head>
<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 *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1 id="headertext">My first Cordova App!</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received" id="geolocation">Device is ready!</p>
</div>
<br>
<div>
<button type="button" onclick="basicAlertTest();">Click Me!</button>
</div>
</div>
<script type="text/javascript" charset="utf-8">
//onSuccess Callback
//current GPS coordinates
var onSuccess = 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');
};
//onError Callback receives a PositionError object
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
//Listening for the device to be ready
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("navigator.geolocation should be able to run successfully now...");
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
//Checking to see if a basic alert will appear on click of "Click me!" button
function basicAlertTest(){
alert("This is the alert test, button works!");
}
</script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html> Est-il quelque chose de base que je suis absent? Je pensais que je serais capable de coder en HTML/Javascript/CSS comme d'habitude, mais aurait besoin d'apprendre quelques lignes de code pour intégrer les plugins qui utilisent natif fonctions de l'appareil (comme la géolocalisation ou la caméra). J'ai fait en sorte d'installer la géolocalisation plugin (à l'aide de cordova plugin add cordova-plugin-geolocation), mais l'alerte n'apparaît pas. Dois-je besoin d'un plugin pour afficher des alertes/d'interagir avec l'écran?
Aussi, j'ai remarqué qu'à chaque fois que je l'ai tester virtuellement, si je regarde sur le site de "Étendus", les coordonnées qu'il donne sont:
Longitude: -122.0840
Latitude: 37.4220
Altitude: 0.0
Qui est Mountain View, CA, environ 8 000 km de moi _(ツ)_/
Voici une capture d'écran:
Je suis en train de tester localement, cela fait-il une différence? Je serais vraiment reconnaissant de toute aide ou des conseils sur ce, je vais sans doute raté quelque chose vraiment évident. Je vous remercie à l'avance!
Mise à JOUR de 1
La liste des plugins installés retourné à partir de "plugin cordova ls":
cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-dialogs 1.3.0 "Notification"
cordova-plugin-geolocation 2.4.0 "Geolocation"
cordova-plugin-whitelist 1.3.0 "Whitelist"
Mise à JOUR 2
La onSuccess fonction est censé s'exécuter après que l'appareil est prêt. Lorsqu'il s'exécute, il doit afficher un message d'alerte contenant des informations de localisation, mais depuis que j'ai fait le "système prêt" message sans alerte apparaissant, j'ai décidé d'ajouter un bouton pour déclencher manuellement l'appel de la fonction.
Je suis maintenant certain onSuccess ne fonctionne pas correctement lorsque l'appareil est prêt, parce que chaque fois que je clique sur le bouton pour le faire fonctionner manuellement l'erreur suivante s'affiche dans la console:
Uncaught TypeError: Cannot read property 'coords' of undefined
Je suis confus que je suis en utilisant le même code comme indiqué ici: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-geolocation/index.html
Aussi, j'ai remarqué que les index de modèle, je travaille off contient <script type="text/javascript" src="cordova.js"></script>, cependant quand je regarde le dossier contenant mon fichier d'index, il n'y a pas de cordova.js fichier, il n'est pas situé là, et je n'arrive pas à le trouver parmi les cordova à télécharger, est-ce normal ou est-il besoin d'être téléchargé séparément?
Dernière tentative:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src * gap://ready file:; style-src 'self' 'unsafe-inline' *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; img-src * data: 'unsafe-inline'">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div class="app">
<h1 id="headertext">My first Cordova App!</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received" id="geolocation">Device is ready!</p>
</div>
<br>
<div>
<button type="button" onclick="basicAlertTest();">Click Me!</button>
<button type="button" onclick="onSuccess();">Run onSuccess function</button>
</div>
</div>
<script type="text/javascript" charset="utf-8">
//onSuccess Callback
//current GPS coordinates
var onSuccess = 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');
};
//onError Callback receives a PositionError object
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
//Listening for the device to be ready
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("navigator.geolocation should be able to run successfully now...");
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
//Checking to see if a basic alert will appear on click of "Click me!" button
function basicAlertTest(){
console.log("This is the alert test, button works!");
alert("This is the alert test, button works!");
}
</script>
</body>
</html>Salut @ProllyGeek j'ai mis une mise à jour au bas de ma question avec la dernière version du code et l'erreur de la console:
Uncaught TypeError: Cannot read property 'coords' of undefined merci d'avance pour toute aide à ce sujet.J'ai vérifié votre commentaire que le bouton fonctionne maintenant, c'est une bonne nouvelle, la mauvaise nouvelle est que certains cordova fonctionnalités ne seront pas sur émulateur, vous aurez besoin d'un périphérique réel (dépend du plugin) pour la géolocalisation, le plugin pour l'émulateur va compter sur html5 emplacement du capteur locationm il y a beaucoup de choses à expliquer si vous avez n'importe quel outil que nous pouvons communiquer à travers, je pourrais être en mesure d'aider à résoudre votre problème.
Salut @ProllyGeek merci pour votre commentaire, le problème est résolu maintenant, mais je suis intéressé à trouver sur d'éventuels problèmes avec l'utilisation de la géolocalisation plugin sur différents appareils, si vous avez un compte skype alors je pourrais vous ajouter sur ce point.
heureux que vous avez résolu votre problème, et oui sûr n'hésitez pas à ajouter prollygeek sur skype, merci.
OriginalL'auteur Emily | 2016-10-18
Vous devez vous connecter pour publier un commentaire.
Mettre de condition pour vérifier si la géolocalisation plugin est correctement installé sur votre application. Donc, ça va être comme,
cordova plugin lsla géolocalisation plugin s'affiche dans la liste. J'ai ajouté la liste complète à la fin de la question. Est-il un moyen pour moi de voir la console de la machine virtuelle? Merci encore.Je vois. tout d'abord, pour faire de la console.journal de travail, vous pouvez avoir besoin d'un plugin appelé cordova-plugin-console. Mais avant d'avoir ce plugin, je pense que vous devriez essayer de remplacer la console.journal de l'alerte et de l'exécuter sur un navigateur (juste pour être clair, si la géolocalisation fonctionne). Et juste au cas où, merci d'apporter cordova.js au-dessus de tous. Et s'il vous plaît assurez-vous que votre index.js n'interfère pas votre code. Souhaitant le meilleur de votre forme!
Bonjour encore une fois @Hgoon, j'ai mis en place une console à l'aide de google Chrome sur mon ordinateur portable, à partir de ce que je peux voir ce qu'il se passe avec mon téléphone, elle montre le message d'erreur suivant lorsque j'ouvre l'application:
Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-BkYHssbiyKIjAn/5V8qD/6o9xpN8UD6/lEmd1E='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.En outre, les alertes ne s'affichent pas quand je l'ouvre dans le navigateur, qui pourrait être due à elle de rester bloqué sur "Connexion à un Périphérique", peut-être que rien ne va s'exécuter jusqu'à ce qu'il détecte le périphérique comme étant dans un état prêt?
Vous avez raison, la plupart de cordoue plugin fonctionne après 'deviceready' état. Mais encore, il ne devrait pas prendre de temps pour arriver à l'état, à moins que le chargement de l'application du lourd. Sur le Contenu Politique de Sécurité, voulez-vous le mien? Le mien fonctionne avec Android 5, 6 et iOS 10. <meta http-equiv="Content-Security-policy" content="default-src * gap://fichier prêt à l':; style-src 'auto' "dangereux-inline' *; script src 'auto' "dangereux-inline' "dangereux-eval' *; img src * données: "dangereux-inline'"> Désolé, ne pouvait pas aider beaucoup parce que je suis en développement iOS et Android, OS X environnement. Pas familier avec les périphériques virtuels.
OriginalL'auteur Hoon
Supprimer cette ligne en haut de votre index.html fichier
OriginalL'auteur Grace Amondi Ochieng