2016-06-12 4 views
0

У меня возникла довольно странная проблема. Я скомпилировал приложение cordova, и он работает на Android отлично, теперь на Mac, когда я пытаюсь скомпилировать приложение для iOS, он не показывает мне компонент из onsenui и страница появляется без кнопок, панелей инструментов и т. д. Я попытался открыть его в веб-браузере, и это дает мне такой же результат.приложение onsenui отображается неправильно

 <!DOCTYPE html> 
     <html> 
     <head> 
     <meta charset="utf-8"> 
     <meta name="apple-mobile-web-app-capable" content="yes"> 
     <meta name="mobile-web-app-capable" content="yes"> 
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"/> 



     <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsenui.css"/> 
     <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsen-css-components.css"/> 

     <!--parse code only 

     <script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.4.2.min.js"></script> 
     <!-- parse code only --> 

     <!--<link rel="stylesheet" type="text/css" href="css/style.css"/> 

     <!-- Enable all requests, inline styles, and eval() --> 



     </head> 

     <body> 

     <ons-navigator title="Navigator" var="myNavigator"> 
     <ons-page> 

     <ons-toolbar> 
     <div class="center">Toolbars</div> 
     <div class="right"> 
     <ons-toolbar-button> 
     <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em"> 
     </ons-toolbar-button> 
     </div> 
     </ons-toolbar> 

     <ons-list> 
     <ons-list-header>Toolbar Variations</ons-list-header> 
     <ons-list-item modifier="chevron" onclick="myNavigator.pushPage('page2.html', { animation : 'slide' })"> 
     HTML Content 
     </ons-list-item> 
     <ons-list-item modifier="chevron" onclick="myNavigator.pushPage('page4.html', { animation : 'slide' })"> 
     Search Box 
     </ons-list-item> 
     <ons-list-item modifier="chevron" onclick="myNavigator.pushPage('page5.html', { animation : 'slide' })"> 
     Images 
     </ons-list-item> 
     </ons-list> 
     </ons-page> 
     </ons-navigator> 

     <ons-template id="page2.html"> 
     <ons-page> 
     <ons-toolbar> 
     <div class="left" style="line-height: 44px"> 
     <ons-back-button>Back</ons-back-button> 
     </div> 
     <div class="center">Title</div> 
     <div class="right" style="line-height: 44px"> 
     Right 
     </div> 
     </ons-toolbar> 

     <div style="text-align: center"> 
     <br /> 
     <ons-button modifier="light" onclick="myNavigator.popPage()"> 
     Pop Page 
     </ons-button> 
     </div> 
     </ons-page> 
     </ons-template> 

     <ons-template id="page4.html"> 
     <ons-page> 
     <ons-toolbar> 
     <div class="left"> 
     <ons-back-button>Back</ons-back-button> 
     </div> 
     <div class="center">Search</div> 
     <div class="right" style="padding-right: 6px"> 
     <input type="search" class="search-input" placeholder="Search" style="margin-top: 6px;"> 
     </div> 
     </ons-toolbar> 

     <div style="text-align: center"> 
     <br /> 
     <ons-button modifier="light" onclick="myNavigator.popPage()"> 
     Pop Page 
     </ons-button> 
     </div> 
     </ons-page> 
     </ons-template> 

     <ons-template id="page5.html"> 
     <ons-page> 
     <ons-toolbar> 
     <div class="left"> 
     <ons-back-button>Back</ons-back-button> 
     </div> 

     <div class="right"> 
     <ons-search-input></ons-search-input> 
     </div> 
     </ons-toolbar> 

     <div style="text-align: center"> 
     <br /> 
     <ons-button modifier="light" onclick="myNavigator.popPage()"> 
     Pop Page 
     </ons-button> 
     </div> 
     </ons-page> 
     </ons-template> 



     <script type="text/javascript" src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/angular/angular.min.js"></script> 
     <script type="text/javascript" src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/onsenui.min.js"></script> 


     </body> 
     </html> 

ответ

0

Код в целом выглядит нормально.

Единственное, что не хватает ons.bootstrap(). Я предполагаю, что вы случайно удалили его в какой-то момент. Добавьте это, и вы должны быть готовы к работе.

Работает demo вашего кода с добавлением ons.bootstrap().

На боковой стенке - поскольку вы, похоже, не используете угловые прямо сейчас, вам может быть интересно проверить Onsen 2. Он имеет как угловую, так и чистую версию js.