WeUI前端搭建

前端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>