Question

我面临一个非常奇怪的问题。我已经编译了cordova应用程序，它现在在Mac上顺利运行，当我尝试为iOS编译应用程序时，它没有向我显示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>

Answer 1

整体代码看起来不错。

唯一缺少的是ons.bootstrap()。我猜你在某个时候意外删除了它。添加它，你应该准备好了。

这里添加了ons.bootstrap()代码demo。

在旁注中 - 因为您现在似乎没有使用角度，所以您可能有兴趣查看Onsen 2。它有角度和纯粹的js版本。

onsenui app无法正确显示

1 个答案: