2016-06-12 7 views
0

나는 이상한 문제에 직면 해 있습니다. 코드바 앱을 컴파일했으며, iOS 용 앱을 컴파일하려고 할 때 Mac에서 원활하게 Android에서 실행됩니다. 구성 요소를 표시하지 않습니다. 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()입니다. 나는 당신이 우연히 그것을 어느 시점에서 제거했다고 생각합니다. 그것을 추가하면 준비가되어 있어야합니다.

여기에 ons.bootstrap() 코드가 추가 된 코드 demo이 추가되었습니다.

옆모음에 - 이제 각도를 사용하지 않는 것 같으니 Onsen 2을 확인하는 것이 좋습니다. 그것은 각도와 순수 js 버전을 모두 가지고 있습니다.