PHP使用weui,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('title')

@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

#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;}

$(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);

});

});