如何为 IOS 和 Android 构建启动画面

【问题标题】：How to build a splash screen for IOS and Android如何为 IOS 和 Android 构建启动画面
【发布时间】：2021-06-22 04:41:56
【问题描述】：

我正在使用 Cordova 完成适用于 Android 和 IOS 的应用程序。我使用了cordova-plugin-splash，但是我在IOS上有很多问题，特别是在启动图像方面。

我想知道是否有一个标准可以仅使用 Jquery Mobile 进行启动 csreen，例如添加带有图像的白色 div。这个想法是删除启动插件并仅使用 jquery mobile。

我需要有一个大约 1-2 秒的启动屏幕，以隐藏应用程序加载过程，并且必须在 IOS 和 Android 设备上工作

我被stackoverflow红的所有主题都太旧了。

谢谢

【问题讨论】：

标签： cordova jquery-mobile cordova-plugins splash-screen

【解决方案1】：

在我看来，我会使用纯 JavaScript 而不是 JqueryMobile。

(function() {
  setTimeout(
      function() 
      {
          document.getElementById("splashScreen").style.display  = "none";
          document.getElementById("mainMenu").style.display = "inline";
      }, 2000)
})();

<div id="splashScreen">
    <img src="https://via.placeholder.com/500">
</div>
<div id="mainMenu">
    <p>Hello!</p>
</div>

或者使用 Jquery 作为替代。

$(document).ready(
  setTimeout(
      function() 
      {
          $("#splashScreen").hide();
          $("#mainMenu").show();
      }, 2000)
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="splashScreen">
    <img src="https://via.placeholder.com/500">
</div>
<div id="mainMenu" style="display: none;">
    <p>Hello!</p>
</div>

【讨论】：