那些遇到过的问题

无法与Cordova应用程序中的任何内容进行交互

Emi*_*ily 6 javascript android node.js cordova

我在第一个Cordova项目中无法获得任何形式的交互性。我具有HTML，Javascript和CSS的经验，因此我认为Cordova是混合应用程序开发的完美入门，但是我似乎连一个基本的HTML按钮都无法在该应用程序上使用。

我正在使用Windows 10并安装了Android Studio和Cordova。我想我已经正确设置了项目文件结构。我一直在关注Cordova的文档，并已在所有设备类型上安装了geolocation插件。为了进行测试，我同时使用了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>
Run Code Online (Sandbox Code Playgroud)

我缺少一些基本的东西吗？我以为我可以正常使用HTML / Javascript / CSS进行编码，但是我需要学习一些代码行以集成使用本机设备功能（例如地理位置或摄像头）的插件。我已经确保安装了Geolocation插件（使用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>
Run Code Online (Sandbox Code Playgroud)

小智 6

删除index.html文件顶部的这一行

<meta http-equiv="Content-Security-Policy" content="default-src * gap: ws: https://ssl.gstatic.com;style-src * 'unsafe-inline' 'self' data: blob:;script-src * 'unsafe-inline' 'unsafe-eval' data: blob:;img-src * data: 'unsafe-inline' 'self' content:;fmedia-src mediastream;">
Run Code Online (Sandbox Code Playgroud)

Hoo*_*oon 1

添加额外条件来检查您的应用程序上是否正确安装了地理定位插件。所以，它会像，

if(navigator.geolocation){
  console.log('Geolocation is there');
  navigator.geolocation.getCurrentPosition(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');
  } , function(error) {
    console.log('Error while connecting to geolocation ' + error);
  }, {timeout:10000});
} else {
  console.log('Geolocation is not there');
}
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

12913 次

最近记录：

8 年，6 月 前
相关归档
使用JavaScript在下拉列表中获取选定的值？ 1660
Android片段中的getIntent().getExtras()在哪里/如何？ 101
使用自定义(对象)适配器过滤ListView 62
适用于Android的Jni教程 48
让node.js以html格式读取文件 15
在PhoneGap应用程序中,Topcoat vs Bootstrap 3的性能 13
与'ws://.../websocket'的Meteor WebSocket连接失败:WebSocket握手期间出错:意外响应代码:400 11
Cordova检查url中的文件是否存在 7
HTML5音频播放器中的搜索不一致 5
离子框架 - 检测互联网连接 3
难疑归档
在Windows命令行上是否有相应的"哪个"？ 2231
如何使用Git将标签推送到远程存储库？ 2091
如何自动调整图像大小以适合div容器 1394
何时使用struct？ 1347
Markdown中的评论 1277
如何将键/值对添加到JavaScript对象？ 1270
如何使用Windows开发机器为iPhone开发？ 1161
获取对象类型的名称 1159
我怎样才能用Python代表'Enum'？ 1146
如何在PHP中获取客户端IP地址 1123