前端UI采用微信团队开发的weui，项目在GitHub的地址是 https://github.com/weui/weui。
准备工作
使用git clone将weui下载到Laravel的public目录下，并在public目录下新建4个目录css、js、images、fonts。将weui的css文件放入/public/css/目录中。使用npm下载jquery或zepto，并将其放置到/public/js/目录下。
创建页面布局
通常页面中会发生变化的大多为三个位置：页面标题、页面主题、页面JS，所以创建通用页面模板master.blade.php。
在/resources/views/目录下创建master.blade.php统一页面布局模板，并引入weui和jquery。
WeUI页面层级
WeUI页面层级 用于规范WeUI页面元素所属层级、层级顺序及组合规范。
布局模板页面 /resources/view/layout.blade.php
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>
<title>@yield('title')</title>
<link rel="stylesheet" href="css/weui.css"/>
<link rel="stylesheet" href="css/style.css"/>
<script src="js/zepto.min.js"></script>
</head>
<body>
<div id="popout">@yield('popout')</div>
<div id="mask">@yield('mask')</div>
<div id="navigation">@yield('navigation')</div>
<div id="content">@yield('content')</div>
</body>
@yield('myjs')
</html>
公共CSS文件 /public/css/style.css
html,body{height:100%;-webkit-tap-highlight-color:transparent;}
#content{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;background-color:#fafafa;-webkit-overflow-scrolling:touch;}
（1）弹出层：提示组件 /resources/view/component/toptips.blade.php
<!--toptips-->
<div class="weui-toptips weui-toptips_warn js_tooltips"><span>系统提示</span></div>
（2）遮罩层：透明蒙版组件 /resources/view/components/mask.blade.php
<div class="weui-mask_transparent"></div>
（3）导航层：弹出式菜单 /resources/view/components/actionsheet.blade.php
<!--actionsheet-->
<div class="weui-actionsheet">
<div class="weui-actionsheet__menu">
<div class="weui-actionsheet__cell">弹出菜单</div>
<div class="weui-actionsheet__cell">弹出菜单</div>
<div class="weui-actionsheet__cell">弹出菜单</div>
<div class="weui-actionsheet__cell">弹出菜单</div>
</div>
<div class="weui-actionsheet__action">
<div id="cancelActionsheet" class="weui-actionsheet__cell">取消</div>
</div>
</div>
（4）内容层：弹出按钮 /resources/views/test.blade.php
<style>
#showActionsheet{width:50px;height:50px;border-radius:50%;background-color:#ddd;opacity:0.8;position:absolute;right:25px;bottom:25px;}
#showActionsheet div{width:40px;height:40px;border-radius:50%;background-color:#ddd;margin:5px;}
</style>
<div id="showActionsheet"><div></div></div>
<script>
$(function () {
var mask = $('#mask .weui-mask_transparent');
var actionsheet = $('#navigation .weui-actionsheet');
var actionsheet_cancel = $('#navigation .weui-actionsheet .weui-actionsheet__action');
//mask.hide();
$('#showActionsheet').on('click', function () {
actionsheet.addClass('weui-actionsheet_toggle');
mask.fadeIn(200);
});
mask.on('click', function () {
actionsheet.removeClass('weui-actionsheet_toggle');
mask.fadeOut(200);
});
actionsheet_cancel.on('click', function () {
actionsheet.removeClass('weui-actionsheet_toggle');
mask.fadeOut(200);
});
});
</script>
