Приложение Cordova/appFramework отображается на iOS

У меня очень простое гибридное мобильное приложение, разработанное с помощью Кордовы и приложения.Приложение Cordova/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-эмуляторах, я вижу предупреждение «Готово к документу» и после этой пустой страницы. Домашняя панель не отображается.

Вот что я делаю для запуска эмуляторов.

cordova emulate ios 
cordova emulate android

Даже если я открываю файлы index.html непосредственно с платформы строит они показывают правильно на настольном браузере.

Я довольно новичок во всем этом, поэтому здесь могут отсутствовать шаги. Любая помощь будет оценена по достоинству.

источник

2014-05-14 BuddhiP

Вам не нужно весь фрагментированный appframework JS и CSS файлы, вы можете просто включить 2 CSS и 1 JS файл, здесь обновленный код, он работает как приложение Cordova на андроид, я построил Кордову приложение с 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 много, есть некоторая конфигурация, которую вам нужно сделать, и setup config.xml, чтобы получить право сборки. IntelXDK делает это легко. Ваш код верный, что-то с настройками сборки. – krisrak

Я использовал XDK для создания проекта и сравнил разницу, я думаю, проблема была в том, что я включил appframework. *. Js files, XDK включает appframework.ui.min.js, если я включу это (и файлы css), тогда все будет хорошо. Проблема в том, что я не могу найти файл min, который нужно загрузить, за исключением CDN, а загруженный пакет не содержит инструкций по его созданию. Хотя XDK - хороший инструмент, мне не нравится, если appFramework работает только при построении проектов с использованием этого. – BuddhiP

Приложение Cordova/appFramework отображается на iOS

ответ

Смежные вопросы