2016-06-12 17 views
0

私はかなり奇妙な問題に直面しています。私はcordovaアプリをコンパイルしました。そして、iOSのためにアプリをコンパイルしようとすると、 onsenuiとページのボタン、ツールバーなどなしで来る。私はウェブブラウザでそれを開こうとしましたが、同じ結果が出ました。onsenui appが正しく表示されていない

 <!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バージョンの両方を持っています。

関連する問題