onsenui应用无法正确显示

Question

我遇到了一个非常奇怪的问题。我已经编译了cordova应用程序，并且当我尝试为iOS编译该应用程序时，它现在可以在Mac上顺利在android上运行，它没有显示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()代码工作示例。

在旁注中-由于您现在似乎还没有使用角度，因此您可能有兴趣查看Onsen 2 。 它既有角度版本又有纯js版本。

onsenui应用无法正确显示

问题描述

1 个解决方案

解决方案1
0 2016-06-13 02:39:39

onsenui应用无法正确显示

问题描述

1 个解决方案

解决方案1 0 2016-06-13 02:39:39

解决方案1
0 2016-06-13 02:39:39