WeUI概述
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含buttoncell、dialog、progress、toastarticle、actionsheet、icon等各式元素。
WeUI的引入
- 下载地址：weui.wxss
注意：样式文件可直接引用dist/style/weui.wxss，或者单独引用dist/style/widget下的组件的wxss - 页头和主体使用class="page__xx"(注意是两个下划线)。
- 组件的子组件样式，例如weui-flex还有weui-flex__item信息。注意：子组件样式后面使用的两个下划线，"__"。
最近的项目中有一个组件比较印象深刻一点，这个组件是一个样式切换的页面，先放张效果图：
微信页面切换实例代码(具体的可以参考这个链接)：
<!DOCTYPE html>
<html xmlns="//www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>页面切换</title>
<!-- 导入所需资源，注意资源的路径 -->
<link rel="stylesheet" href="weui.css" />
<link rel="stylesheet" href="example.css"/>
<script src="zepto.min.js"></script>
<script src="example.js"></script>
<script type="text/javascript">
<!-- 这段js代码具体操作界面切换的功能 -->
$(function(){
var winH = $(window).height();
var categorySpace = 10;
$('.js_item').on('click', function(){
var id = $(this).data('id');
window.pageManager.go(id);
});
$('.js_category').on('click', function(){
var $this = $(this),
$inner = $this.next('.js_categoryInner'),
$page = $this.parents('.page'),
$parent = $(this).parent('li');
var innerH = $inner.data('height');
bear = $page;
if(!innerH){
$inner.css('height', 'auto');
innerH = $inner.height();
$inner.removeAttr('style');
$inner.data('height', innerH);
}
if($parent.hasClass('js_show')){
$parent.removeClass('js_show');
}else{
$parent.siblings().removeClass('js_show');
$parent.addClass('js_show');
if(this.offsetTop + this.offsetHeight + innerH > $page.scrollTop() + winH){
var scrollTop = this.offsetTop + this.offsetHeight + innerH - winH + categorySpace;
if(scrollTop > this.offsetTop){
scrollTop = this.offsetTop - categorySpace;
}
$page.scrollTop(scrollTop);
}
}
});
});
</script>
<!-- js中创建div界面，也就是成功提示界面，注意js的id -->
<script type="text/html" id="tpl_msg_success">
<div class="page">
<div class="weui-msg">
<div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
<div class="weui-msg__text-area">
<h2 class="weui-msg__title">操作成功</h2>
<p class="weui-msg__desc">内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现<a href="javascript:void(0);">文字链接</a></p>
</div>
<div class="weui-msg__opr-area">
<p class="weui-btn-area">
<a href="javascript:history.back();" class="weui-btn weui-btn_primary">推荐操作</a>
<a href="javascript:history.back();" class="weui-btn weui-btn_default">辅助操作</a>
</p>
</div>
<div class="weui-msg__extra-area">
<div class="weui-footer">
<p class="weui-footer__links">
<a href="javascript:void(0);" class="weui-footer__link">底部链接文本</a>
</p>
<p class="weui-footer__text">Copyright © 2008-2016 weui.io</p>
</div>
</div>
</div>
</div>
</script>
<!-- js中创建div界面，也就是警告提示界面，注意js的id -->
<script type="text/html" id="tpl_msg_warn">
<div class="page">
<div class="weui-msg">
<div class="weui-msg__icon-area"><i class="weui-icon-warn weui-icon_msg"></i></div>
<div class="weui-msg__text-area">
<h2 class="weui-msg__title">操作失败</h2>
<p class="weui-msg__desc">内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现<a href="javascript:void(0);">文字链接</a></p>
</div>
<div class="weui-msg__opr-area">
<p class="weui-btn-area">
<a href="javascript:history.back();" class="weui-btn weui-btn_primary">推荐操作</a>
<a href="javascript:history.back();" class="weui-btn weui-btn_default">辅助操作</a>
</p>
</div>
<div class="weui-msg__extra-area">
<div class="weui-footer">
<p class="weui-footer__links">
<a href="javascript:void(0);" class="weui-footer__link">底部链接文本</a>
</p>
<p class="weui-footer__text">Copyright © 2008-2016 weui.io</p>
</div>
</div>
</div>
</div>
</script>
</head>
<body ontouchstart>
<!-- 这段代码必须有，类似于界面切换的容器 -->
<div class="container" id="container"></div>
<!-- js中创建div界面，也就是主界面，注意js的id -->
<script type="text/html" id="tpl_home">
<div class="page">
<div class="page__hd">
<h1 class="page__title">Msg</h1>
<p class="page__desc">提示页</p>
</div>
<div class="page__bd page__bd_spacing">
<!-- 这里要注意a的链接msg_success与成功提示界面的id相符 -->
<a href="#msg_success" class="weui-btn weui-btn_default">成功提示页</a>
<!-- 这里要注意a的链接msg_warn与警告提示界面的id相符 -->
<a href="#msg_warn" class="weui-btn weui-btn_default">失败提示页</a>
</div>
</div>
</script>
</body>
</html>