科爾多瓦/ appFramework應用程序在iOS上顯示空白

我有一個非常簡單的混合移動應用程序與科爾多瓦和appFramework開發。科爾多瓦/ appFramework應用程序在iOS上顯示空白

的index.html像這樣

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="format-detection" content="telephone=no" /> 
    <!-- WARNING: for iOS 7, remove the width=device-width and 
    height=device-height attributes. See https://issues.apache.org 
    /jira/browse/CB-4323 --> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, 
    maximum-scale=1, minimum-scale=1, width=device-width, 
    height=device-height, target-densitydpi=device-dpi" /> 
    <link rel="stylesheet" type="text/css" href="css/index.css" /> 

    <link rel="stylesheet" type="text/css" href="css/af/main.css" /> 
    <link rel="stylesheet" type="text/css" href="css/af/appframework.css" /> 
    <link rel="stylesheet" type="text/css" href="css/af/lists.css" /> 
    <link rel="stylesheet" type="text/css" href="css/af/forms.css" /> 
    <link rel="stylesheet" type="text/css" href="css/af/buttons.css" /> 
    <link rel="stylesheet" type="text/css" href="css/af/badges.css" />  
    <link rel="stylesheet" type="text/css" href="css/af/grid.css" /> 

    <link rel="stylesheet" type="text/css" href="css/af/android.css" /> 
    <link rel="stylesheet" type="text/css" href="css/af/win8.css" /> 
    <link rel="stylesheet" type="text/css" href="css/af/bb.css" /> 
    <link rel="stylesheet" type="text/css" href="css/af/ios.css" /> 
    <link rel="stylesheet" type="text/css" href="css/af/ios7.css" /> 
    <link rel="stylesheet" type="text/css" href="css/af/tizen.css" /> 

    <title>Cordova Application</title> 
    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/appframework.js"></script> 
    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/plugins/af.scroller.js"></script> 
    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/plugins/af.css3animate.js"></script> 

    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/ui/appframework.ui.js"></script> 
    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/ui/transitions/fade.js"></script> 
    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/ui/transitions/flip.js"></script> 
    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/ui/transitions/pop.js"></script> 
    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/ui/transitions/slide.js"></script> 
    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/ui/transitions/slideDown.js"></script> 
    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/ui/transitions/slideUp.js"></script> 
    <script type="text/javascript" charset="utf-8" 
    src="js/vendor/plugins/af.slidemenu.js"></script> 

    <script> 
     $.ui.ready(function() { 
      console.log("UI Ready!!!"); 
     }); 
     $(document).ready(function() { 
      console.log('Document Ready...'); 
      alert('Document Ready...'); 
     }); 
    </script> 
</head> 
<body> 
    <div id="afui"> 
     <div id="header"> 
     </div> 
     <div id="content"> 
      <div data-title="Home" class="panel" 
           id="main" selected="true"> 
       <span>THIS is the HOME Page!</span> 
      </div> 
      <div data-title="Second Page" class="panel" id="second"> 
      </div> 
     </div> 
     <nav> 
      <div class="title">Nav Home</div> 
      <ul> 
       <li><a class="icon home mini" 
            href="#main">Home Link</a></li> 
       <li><a class="icon mini" 
            href="#second">Second Link</a></li> 
      </ul> 
     </nav> 
    </div> 
    <script type="text/javascript" src="cordova.js"></script> 
</body> 
</html>

這顯示正確，並在Safari或Chrome桌面瀏覽器打開時，即使是導航接線。

但是，如果我在iOS或Android模擬器中運行它，我會在該空白頁後看到「Document Ready」警報。主屏幕不顯示。

這是我所做的運行模擬器。

cordova emulate ios 
cordova emulate android

即使我直接從平臺版本打開index.html文件，它們也會在桌面瀏覽器上正確顯示。

我對這一切都很陌生，所以我可能會錯過這裏的步驟。任何幫助，將不勝感激。

來源

2014-05-14 BuddhiP

你不需要所有經分段appframework js和css文件，你可以只包括2個css和1個js文件，這裏更新的代碼，它的工作原理是科爾多瓦的應用程序在Android上，我建科爾多瓦應用與Intel XDK。

<!DOCTYPE html> 
<html> 
<head> 
    <title>XDK</title> 
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" /> 

    <link rel="stylesheet" type="text/css" href="css/af.ui.css" /> 
    <link rel="stylesheet" type="text/css" href="css/icons.css" /> 
    <script type="text/javascript" charset="utf-8" src="js/appframework.ui.min.js"></script> 

    <script> 
     $.ui.ready(function() { 
      console.log("UI Ready!!!"); 
     }); 
     $(document).ready(function() { 
      console.log('Document Ready...'); 
      alert('Document Ready...'); 
     }); 
    </script> 
</head> 
<body> 
    <div id="afui"> 
     <div id="header"> 
     </div> 
     <div id="content"> 
      <div title="Home" class="panel" id="main" selected="true"> 
       <span>THIS is the HOME Page!</span> 
      </div> 
      <div title="Second Page" class="panel" id="second"> 
      </div> 
     </div> 
     <nav> 
      <div class="title">Nav Home</div> 
      <ul class="list"> 
       <li><a class="icon home mini" href="#main">Home Link</a></li> 
       <li><a class="icon mini" href="#second">Second Link</a></li> 
      </ul> 
     </nav> 
    </div> 
    <script type="text/javascript" src="cordova.js"></script> 
</body> 
</html>

來源

2014-05-14 17:55:10 krisrak

非常感謝您對您的努力，因爲我沒有看到你的HTML和我之間的差異，除了去除一些多餘的CSS參考，我應該把它，因爲它是XDK構建這使得它工作在你的情況？所以也許科爾多瓦建立在我的情況下是缺少的東西？ – BuddhiP

我還沒有使用cordova cli，有一些配置你必須做，並設置config.xml來獲得構建權。 IntelXDK使這一切變得簡單。你的代碼是正確的，與構建設置 – krisrak

我用XDK來創建一個項目，並比較了差異，我認爲問題是與我包括appframework。* .js文件的方式，XDK包括appframework.ui.min.js，如果我包括（和css文件），那麼事情是好的。問題是，除CDN外，我找不到要下載的最小文件，下載的軟件包不包含有關如何構建它的說明。雖然XDK是一個很好的工具，但我不喜歡appFramework僅在使用該工具構建項目時纔有效。 – BuddhiP

科爾多瓦/ appFramework應用程序在iOS上顯示空白

回答

相關問題