【发布时间】：2016-10-18 12:11:54
【问题描述】：
我无法从我的第一个 Cordova 项目中获得任何形式的交互性。我有 HTML、Javascript 和 CSS 方面的经验，所以我认为 Cordova 将是混合应用程序开发的完美介绍，但我似乎连一个基本的 HTML 按钮都无法在应用程序上工作。
我使用的是安装了 Android Studio 和 Cordova 的 Windows 10。我想我已经正确设置了项目文件结构。我一直在关注 Cordova 的文档，并在所有设备类型上安装了地理定位插件。为了进行测试，我同时使用了 Android Studio 中的虚拟 android 设备和 android 手机 (OnePlus X)，它已正确连接（每当我在控制台中输入“cordova run android”时，应用程序就会在手机上打开）。
我开始尝试获取当前位置，然后将坐标显示为警报。这不起作用，所以为了尝试更简单的方法，我添加了一个按钮，单击时应该显示一个警报弹出窗口，但两者都不起作用。这是我当前的代码：
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>
我缺少一些基本的东西吗？我以为我可以像往常一样用 HTML/Javascript/CSS 进行编码，但需要学习一些代码行来集成使用本机设备功能（如地理位置或相机）的插件。我已经确保安装了地理定位插件（使用cordova plugin add cordova-plugin-geolocation），但没有出现警报。我需要一个单独的插件来显示警报/与屏幕交互吗？
另外，我注意到每当我进行虚拟测试时，如果我查看“扩展控件”中的位置，它给出的坐标是：
Longitude: -122.0840
Latitude: 37.4220
Altitude: 0.0
这是加利福尼亚州山景城，离我大约 8,000 英里¯_(ツ)_/¯
截图如下：
我正在本地测试，这有什么不同吗？我真的很感激任何帮助或建议，我可能错过了一些非常明显的东西。提前谢谢！
更新 1 “cordova plugin 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"
更新 2
onSuccess 函数应该在设备准备好后运行。当它运行时，它应该显示一个包含位置详细信息的警报，但由于我收到“设备准备就绪”消息而没有出现任何警报，所以我决定添加一个按钮来手动调用该函数。
我现在确定onSuccess 在设备准备就绪时无法正常运行，因为每当我单击按钮使其手动运行时，控制台中都会显示以下错误：
Uncaught TypeError: Cannot read property 'coords' of undefined
我很困惑，因为我使用的代码与此处显示的相同：https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-geolocation/index.html
另外，我注意到我正在处理的索引模板包含 <script type="text/javascript" src="cordova.js"></script>，但是当我查看包含我的索引文件的文件夹时，没有 cordova.js 文件，它不在那里，我在cordova下载里好像找不到，这是正常的还是需要单独下载？
最新尝试：
<!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>
【问题讨论】：
-
请显示您的控制台
-
嗨@ProllyGeek 我已经在我的问题底部更新了最新代码和控制台错误：
Uncaught TypeError: Cannot read property 'coords' of undefined在此先感谢您提供任何帮助。 -
我检查了您的评论，该按钮现在可以使用，这是个好消息，坏消息是某些 Cordova 功能在模拟器上无法使用，您需要一个真实的设备来完成此操作（取决于插件）对于地理定位，模拟器的插件将依靠 html5 位置而不是传感器位置m 如果您有任何我们可以交流的工具，有很多要解释的，我也许可以帮助解决您的问题。
-
嗨@ProllyGeek 感谢您的评论，问题现在已解决，但我有兴趣了解在不同设备上使用地理定位插件可能出现的问题，如果您有 Skype 帐户，那么我可以加你。
-
很高兴您解决了您的问题，您可以随时在 Skype 上添加 prollygeek，干杯。
标签： javascript android node.js cordova