Cordova App需要首次打开互联网

编程问答 2022-06-08

问题描述

我找到了this，this，this和this，但似乎没有一个与我的问题相似。

我有一个简单的JavaScript项目（实际上是一个游戏），其中包含3个文件，分别是 index.html ， style.css 和 script.js 。完全不需要互联网，没什么。

enter image description here

它的工作方式与我期望的一样。在计算机浏览器和移动浏览器上都可以。 （尽管在移动设备中速度有点慢，但我正在尝试找出解决方法）。

问题出在应用程序上。我已经按照this教程使用 Cordova 构建了该应用。

当我在移动设备上安装该应用程序时，会发生两个问题。

第一
我的移动数据和WiFi都自动打开。

第二：
如果我关闭互联网并启动应用程序，则JavaScript根本无法正常工作。看起来像这样。没有动静，没有触摸效果，没什么。

enter image description here

但是，如果我打开互联网然后运行该应用程序，它将正常运行。而且这只是第一次运行该应用程序。第一次之后不需要互联网。

如何使其在纯离线模式下正常工作？

编辑：

更多信息，我还没有编辑cordova生成的项目，因为我对android应用程序开发了解不多。我试图理解它，因此决定进行此项目。

编辑2：

这是项目的简约代码。在此之后，除了样式外，我没有添加任何脚本。

console.clear();
$('document').ready(function() {

  var collided = false;
  var collidedWith = null;
  var $ship = $('.ship');
  var $walls = $('.wall')
  
  var $totalHeight = $('.inner').height(); //of walls
  var $maxHeight = Math.ceil(Math.ceil($totalHeight / 3) - (Math.ceil($totalHeight / 3) * 30) / 100); //30% of total wall height

  $('.wall').each(function(i,obj) {
    $(this).height($maxHeight);
    $('.wall.four').css({
      'height': $wallGap
    });
  })

  var $wallGap = Math.ceil($totalHeight / 3) - $maxHeight;
  var $wallOnetop = 0;
  var $wallTwoTop = $maxHeight + $wallGap;
  var $wallThreetop = ($maxHeight * 2) + ($wallGap * 2);
  var $wallFourTop = -$('.wall.four').height() - $wallGap;

  $('.wall.one').css({
    'top': $wallOnetop
  });
  $('.wall.two').css({
    'top': $wallTwoTop
  });
  $('.wall.three').css({
    'top': $wallThreetop
  });
  $('.wall.four').css({
    'top': $wallFourTop
  });


  function moveWall(wallObj) {
    var $currentTop = wallObj.position().top;
    var $limitTop = $('.inner').height();

    if ($currentTop >= $limitTop) {
      var $rand = Math.floor(Math.random() * ($maxHeight - $wallGap + 1) + $wallGap);
      wallObj.height($rand);
      var $top = -(wallObj.height());
    } else {
      var $top = (wallObj.position().top) + 5;
    }
    //    var $collide = checkCollision(wallObj);
    wallObj.css({
      'top': $top
    });
    // return $collide;
  }

  var $wallTimer = setInterval(function() {
    $walls.each(function(i,obj) {
      moveWall($(this));
      if (collided) {
        clearInterval($wallTimer);
      }
    })
  },40);


  function checkCollision() {
    var $shipwidth = $ship.width();
    var $shipHeight = $ship.height();
    var $shipLeft = $ship.position().left;
    var $shipRight = $shipLeft + $shipwidth;
    var $shipTop = $ship.position().top;
    var $shipBottom = $shipTop + $shipHeight;
    
    $('.wall').each(function(i) {

      var $wall = $(this);
      var $wallWidth = $wall.width();
      var $wallHeight = $wall.height();
      var $wallLeft = $wall.position().left;
      var $wallRight = $wallLeft + $wallWidth;
      var $wallTop = $wall.position().top;
      var $wallBottom = $wallTop + $wallHeight;

      if (
        $shipLeft < $wallRight &&
        $shipRight > $wallLeft &&
        $shipTop < $wallBottom &&
        $shipBottom > $wallTop
      ) {
        console.log("dhumm!");
        collided = true;
        collidedWith = $wall
        $wall.addClass('crashed')
        $ship.addClass('crashed')
        $ship.stop();
        return false;
      }
    })
  }







  $('.outer .inner').click(function() {
    var $ship;
    $ship = $('.ship');
    $shipLeft = $ship.position().left;
    $shipRight = $shipLeft + $ship.width();

    $inner = $('.inner');
    $innerLeft = $inner.position().left;
    $innerRight = $innerLeft + $inner.width();


    if (($shipLeft < $inner.width() - $ship.width())) {
      $ship.animate({
        "left": $inner.width() - $ship.width()
      },{
        "duration": 500,"easing": "linear","progress": checkCollision,});
    } else if (($shipRight >= $inner.width())) {
      $ship.animate({
        "left": '0'
      },});
    }

  });


});
.outer {
  background: #fff;
  border: 20px solid #efefef;
  width: 400px;
  height: 600px;
  display: inline-block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
}

.outer .inner {
  background: #fff;
  height: 100%;
  width: 100%;
  margin: auto;
  position: relative;
  overflow: hidden;
}

.outer .inner .wall {
  width: 5px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: #000;
}
.outer .inner .wall.crashed {
  background: red;
}


.outer .inner .ship {
  width: 15px;
  height: 15px;
  background: orange;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.outer .inner .ship.crashed {
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer">
  <div class="inner">
    <div class="wall one"></div>
    <div class="wall two"></div>
    <div class="wall three"></div>
    <div class="wall four"></div>

    <div class="ship"></div>
  </div>
</div>

解决方法

主要问题是您正在从外部URL加载jquery：

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

要获得脱机支持，最好将jquery嵌入应用程序中。

androidandroidcordovajavascriptjquerymobile-application