前言
利用前端框架能快速搭建出所需要的页面。这样就不用费心思去设计了，节省了开发时间和成本。
常用的前端框架有BootStrap（国外，在国内应用比较广泛），AmazeUI（国产），WeUi（微信开发专用框架）。大家可适当选择自己喜欢的框架。
这里我们使用的是WeUI。演示一下调用WeUI中的ActionSheet组件
注：这里你有可能会尝试成功，但是好多原理你不一定会。建议先去laravel学院学点基础教程，和去慕课学点前端基础。
使用Git下载框架
- 在Git Cmd中输入
cd Desktop - 在Git Cmd中输入
git clone https://github.com/weui/weui - 稍等一会就将weui的源码下载到桌面上了。
- 然后将这个文件夹放至laravel的public下
Paste_Image.png
快速使用前端框架
准备工作
- 在 public目录下新建css，js ，images，fonts文件夹用以存放相应的文件。
- 将weui中的css文件放至你自己创建的css文件夹下
- 在js文件夹下存放jQuery v1.11.2文件，网上文件很多，这里大家可自行查找
- 在resources\view文件夹下新建component文件夹
- 在view文件夹下新建master.blade.php，login.blade.php两个文件
- 在component文件夹下新建actionsheet.blade.php文件
编写模板文件
- master.blade.php 源码
```<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>@yield('title')</title><link rel="stylesheet" href="css/weui.css" type="text/css"><link rel="stylesheet" href="css/book.css" type="text/css"></head><body>`
</body>
<script src="js/jquery-1.11.2.min.js"></script>
@yield('my-js')
</html>```
- login.blade.php源码
```@extends('master')
@section('title','登录')
@section('content')
@include('component.actionsheet')
@endsection
@section('my-js')
<script type="text/javascript">
// ios
$(function(){
var $iosActionsheet = $('#iosActionsheet');
var $iosMask = $('#iosMask');
function hideActionSheet() {
$iosActionsheet.removeClass('weui-actionsheet_toggle');
$iosMask.fadeOut(200);
}
$iosMask.on('click', hideActionSheet);
$('#iosActionsheetCancel').on('click', hideActionSheet);
$("#showIOSActionSheet").on("click", function(){
$iosActionsheet.addClass('weui-actionsheet_toggle');
$iosMask.fadeIn(200);
});
});
</script>
@endsection```
- actionsheet.blade.php源码
```<div class="page">
<div class="page__bd page__bd_spacing">`
<a href="javascript:;" class="weui-btn weui-btn_default" id="showIOSActionSheet">iOS ActionSheet</a>
</div>
` <!--BEGIN actionSheet-->`
` <div>`
<div class="weui-mask" id="iosMask" style="display: none"></div>
<div class="weui-actionsheet" id="iosActionsheet">
<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 class="weui-actionsheet__cell" id="iosActionsheetCancel">取消</div>
</div>
</div>
</div>
` <!--END actionSheet-->`
</div>```
- 最后在把app/Http/routes.php的代码改为
`Route::get('/', function () {`
` return view('login');`
`});`
- 差不多就是这样了，下面是效果图
网友评论