前言
利用前端框架能快速搭建出所需要的頁面。這樣就不用費(fèi)心思去設(shè)計(jì)了，節(jié)省了開發(fā)時(shí)間和成本。
常用的前端框架有BootStrap（國外，在國內(nèi)應(yīng)用比較廣泛），AmazeUI（國產(chǎn)），WeUi（微信開發(fā)專用框架）。大家可適當(dāng)選擇自己喜歡的框架。
這里我們使用的是WeUI。演示一下調(diào)用WeUI中的ActionSheet組件
注：這里你有可能會(huì)嘗試成功，但是好多原理你不一定會(huì)。建議先去laravel學(xué)院學(xué)點(diǎn)基礎(chǔ)教程，和去慕課學(xué)點(diǎn)前端基礎(chǔ)。
使用Git下載框架
- 在Git Cmd中輸入
cd Desktop - 在Git Cmd中輸入
git clone https://github.com/weui/weui - 稍等一會(huì)就將weui的源碼下載到桌面上了。
- 然后將這個(gè)文件夾放至laravel的public下
Paste_Image.png
快速使用前端框架
準(zhǔn)備工作
- 在 public目錄下新建css，js ，images，fonts文件夾用以存放相應(yīng)的文件。
- 將weui中的css文件放至你自己創(chuàng)建的css文件夾下
- 在js文件夾下存放jQuery v1.11.2文件，網(wǎng)上文件很多，這里大家可自行查找
- 在resources\view文件夾下新建component文件夾
- 在view文件夾下新建master.blade.php，login.blade.php兩個(gè)文件
- 在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>```
- 最后在把a(bǔ)pp/Http/routes.php的代碼改為
`Route::get('/', function () {`
` return view('login');`
`});`
- 差不多就是這樣了，下面是效果圖
