VS2017中的温泉UI
Posted
技术标签:
【中文标题】VS2017中的温泉UI【英文标题】：OnsenUI in VS2017 【发布时间】：2017-06-18 06:48:11 【问题描述】：我正在尝试使用 Onsen UI 在 VS2017 中开发移动网站。我采取的步骤如下。 1.在VS2017中创建一个空白的ASP.NET web应用解决方案 2.从https://github.com/OnsenUI/OnsenUI-dist/releases下载OnsenUI-dist 2.4.0的源代码压缩包并解压到一个文件夹中。 3. 复制文件夹css、css-componenets-src、js，以及VS项目根目录下的package.json文件。 4.在VS项目根目录下创建index.html，在head中引用三个文件
<script src="js/onsenui.js"></script>
<link href="css/onsenui.css" rel="stylesheet" />
<link href="css/onsen-css-components.css" rel="stylesheet" />
一切正常。 唯一的问题是，如果我对文件“theme.css”进行任何更改，它不会反映在浏览器中。
onsen-css-components.css的标记是
@import url('./license.css');
@import url('./theme.css');
@import url('./components/index.css');
理想情况下，我想使用其他名称（例如 theme2.css）保存 theme.css 的副本，在其中进行更改，然后在 onsen-css-components.css 中更改导入的 URL 名称。 我认为在更改 theme.css 后我错过了一些步骤（一些构建过程）。 Onsen UI 团队的开发速度非常快，之前关于主题自定义的教程已经过时了。
我的 index.html 的完整标记是
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/onsenui.js"></script>
<link href="css/onsenui.css" rel="stylesheet" />
<link href="css/onsen-css-components.css" rel="stylesheet" />
</head>
<body>
<ons-splitter>
<ons-splitter-side id="menu" side="left" collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item onclick="fn.load('home.html')" tappable>
Home
</ons-list-item>
<ons-list-item onclick="fn.load('settings.html')" tappable>
Settings
</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>
About
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="home.html"></ons-splitter-content>
</ons-splitter>
<ons-template id="home.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Main
</div>
</ons-toolbar>
<p style="text-align: center; opacity: 0.6; padding-top: 20px;">
Swipe right to open the menu!
</p>
<ons-bottom-toolbar>
<div class="center">Hello</div>
</ons-bottom-toolbar>
</ons-page>
</ons-template>
<ons-template id="settings.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Settings
</div>
</ons-toolbar>
<ons-bottom-toolbar>
<div class="center">Hello</div>
</ons-bottom-toolbar>
</ons-page>
</ons-template>
<ons-template id="about.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
About
</div>
</ons-toolbar>
</ons-page>
</ons-template>
<script>
window.fn = ;
window.fn.open = function ()
var menu = document.getElementById('menu');
menu.open();
;
window.fn.load = function (page)
var content = document.getElementById('content');
var menu = document.getElementById('menu');
content.load(page)
.then(menu.close.bind(menu));
;
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：因为我改变了
<link href="css/onsen-css-components.css" rel="stylesheet" />
到
<link href="css-components-src/src/onsen-css-components.css" rel="stylesheet" />
在 html 文件头中，我可以看到自定义主题的结果。 这是因为在 onsen-css-components.css 中的 theme.css 的导入路径。
【讨论】：
以上是关于VS2017中的温泉UI的主要内容，如果未能解决你的问题，请参考以下文章
Console.WriteLine 不输出到 VS 2017 中的输出窗口