Question

我无法从我的第一个Cordova项目中获得任何形式的交互性。我有HTML，Javascript和CSS的经验，所以我认为Cordova将是混合应用程序开发的完美介绍，但我似乎无法在应用程序上使用基本的HTML按钮。

我正在使用安装了Android Studio和Cordova的Windows 10。我想我已经正确设置了项目文件结构。我一直在关注Cordova的文档，并在所有设备类型上安装了geolocation插件。为了测试我正在使用Android Studio中的虚拟安卓设备和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>

Answer 1

删除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;">

Answer 2

尝试使用此内容 - 安全 - 它应该有效的策略。

＆＃13;

<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;">

＆＃13;

Answer 3

添加额外条件以检查地理位置插件是否已正确安装在您的应用上。所以，它会像，

[
    { 
        "operation": "shift", 
        "spec": { 
            "list1": { 
                "*": {    
                    "id": "listA[&1].Num",    
                    "list2": {    
                        "*": {    
                            "code": "listA[&3].listB[&1].covg_code",    
                            "amount": {    
                                "formattedPrimeAmount": "listA[&4].listB[&2].rate.formattedPrimeAmount",    
                                "primeAmount": "listA[&4].listB[&2].rate.primeAmount"    
                             }    
                         }    
                     }    
                 }    
             }    
         }    
     }    
]

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

3 个答案: