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

    
    
    
    
    
    


    
@yield('popout')
    
@yield('mask')
    
@yield('navigation')
    
@yield('content')

@yield('myjs')

公共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

系统提示

（2）遮罩层：透明蒙版组件 /resources/view/components/mask.blade.php

（3）导航层：弹出式菜单 /resources/view/components/actionsheet.blade.php

    

        
弹出菜单
        
弹出菜单
        
弹出菜单
        
弹出菜单
    
    

        
取消
    

（4）内容层：弹出按钮 /resources/views/test.blade.php