0

我开发了 html + onsenui + jQuery 应用程序，它被指定为混合 android 应用程序（phonegap），但我面临布局和点击/触摸事件不起作用的问题。

这是代码：

    <!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
  <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
  <script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>

  <script>
  function showModal() {
  var modal = document.querySelector('ons-modal');
  modal.show();
  var i = 1
  var myTimer = setInterval(function(){
        $("#message").html(i);
        if (i <= 30){
         i += 1;
        } 
    }, 1000);


  setTimeout(function() {
    modal.hide();
    clearInterval(myTimer);
    $("#message").html("");
    ons.notification.toast({message: "Now you are free to open/close again.", timeout: 2000});
  }, 30000);
}


$(function(){
$('#btn-outdoor-open').on("click touchend", function() { 

        $.ajax({
            url: 'http://localhost:5000/outer_door/2JkHmmbv4gA6mXLF',
            type: 'POST',
            success: function (result) {
                if (result["response"] == "Not Authorized"){
                    ons.notification.toast({message: result["response"], timeout: 1000});
                }
                else{
                    ons.notification.toast({message: result["response"], timeout: 1000});
                    ons.notification.toast({message: 'Switching on relay for outer doors..', timeout: 3000});
                    showModal();
                }
            },
            error: function(xhr, textStatus, errorThrown){
                ons.notification.toast({message: 'Failed', timeout: 3000});
            }
        });



});



$('#btn-indoor-open').on("click touchend", function() { 


        $.ajax({
            url: 'http://localhost:5000/inner_door/2JkHmmbv4gA6mXLF',
            type: 'POST',
            success: function (result) {
                if (result["response"] == "Not Authorized"){
                    ons.notification.toast({message: result["response"], timeout: 1000});
                }
                else{
                ons.notification.toast({message: result["response"], timeout: 1000});
                ons.notification.toast({message: 'Switching on relay for inner doors..', timeout: 3000});
                showModal();
                }

            },
            error: function(xhr, textStatus, errorThrown){
                ons.notification.toast({message: 'Failed', timeout: 3000});
            }
        });  


});

$('#btn-both-open').on("click touchend", function() { 


        $.ajax({
            url: 'http://localhost:5000/inner_door/2JkHmmbv4gA6mXLF',
            type: 'POST',
            success: function (result) {
                if (result["response"] == "Not Authorized"){
                    ons.notification.toast({message: result["response"], timeout: 1000});
                }
                else{
                    ons.notification.toast({message: result["response"], timeout: 1000});
                    ons.notification.toast({message: 'Switching on relay for inner doors..', timeout: 3000});
                    ons.notification.toast({message: '5 seconds delay before another switch', timeout: 3000});
                }
            },
            error: function(xhr, textStatus, errorThrown){
                ons.notification.toast({message: 'Failed', timeout: 3000})
            }
        });



        setTimeout(function(){

            $.ajax({
                url: 'http://localhost:5000/outer_door/2JkHmmbv4gA6mXLF',
                type: 'POST',
                success: function (result) {
                    if (result["response"] == "Not Authorized"){
                        ons.notification.toast({message: result["response"], timeout: 1000});
                    }
                    else{
                        ons.notification.toast({message: result["response"], timeout: 1000});
                        ons.notification.toast({message: 'Switching on relay for outer doors..', timeout: 3000});
                        showModal();
                    }
                },
                error: function(xhr, textStatus, errorThrown){
                    ons.notification.toast({message: 'Failed', timeout: 3000});
                }
            }); 

        }, 5000);


});

});

</script>

</head>



<body style="font-family: monospace;">
<ons-page>
    <div id="btn-outdoor-open" style="height: 33.33%; text-align: center; padding-top: 17%; background-color: #0F2043; color: white;">
        <h2>Outer</h2>
        <ons-ripple></ons-ripple>
    </div>

    <div id="btn-indoor-open" style="height: 33.33%; text-align: center; padding-top: 17%; background-color: #79CEDC;">
        <h2>Inner</h2>
        <ons-ripple></ons-ripple>
    </div>

    <div id="btn-both-open" style="height: 33.34%; text-align: center; padding-top: 17%; background-color: #D5A458;">
        <h2>Both</h2>
        <ons-ripple></ons-ripple>
    </div>

</ons-page>

    <ons-modal direction="up">
        <div style="text-align: center">
            <p>
                Operation takes 30 seconds to finish<br><br>
                <ons-icon icon="md-spinner" size="28px" spin></ons-icon><br><br>
                <span id="message"></span><br><br>
            </p>
        </div>
    </ons-modal>

</body>


</html>

应用程序应如下所示： 出现在 onsenui 教程工具中

但如果我将应用程序与电话间隙捆绑在一起，它看起来像这样： 移动设备上的实际外观

我怀疑整个 jquery 代码在移动设备上不起作用，但在 onsenui 教程工具中它可以正常工作。为什么触摸事件和/或 jQuery 在移动设备上不起作用？谢谢

4

1 回答 1

0

问题是我只有 index.html，没有项目结构、配置文件等。

我尝试去monaca cloud，创建了一个最小功能的onsenui项目，并将javascript代码替换为我的，用他们的工具构建apk，现在一切正常，布局符合预期，并且点击也可以使用。希望对那些认为您可以从一个 html 文件构建 apk 的人有所帮助，您需要所有项目结构才能使其正常工作！

于 2017-10-12T18:42:31.873 回答