onsenui 应用程序显示不正确
Posted
技术标签:
【中文标题】onsenui 应用程序显示不正确【英文标题】：onsenui app is not showing correctly 【发布时间】：2016-06-12 15:15:56 【问题描述】：我面临一个非常奇怪的问题。我已经编译了 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>
【问题讨论】：
【参考方案1】：代码整体看起来不错。
唯一缺少的是ons.bootstrap()。我猜你在某个时候不小心删除了它。添加它，你应该准备好了。
这是您的代码的有效demo，添加了ons.bootstrap()。
附带说明 - 由于您现在似乎没有使用 angular，您可能有兴趣查看 Onsen 2。它既有angular版本也有纯js版本。
【讨论】：
以上是关于onsenui 应用程序显示不正确的主要内容，如果未能解决你的问题，请参考以下文章